Having trouble getting jquery tabledit plugin to work on multiple tables - javascript

I've been working on a small project where I display multiple tables for a user on a web page. I would like for the users to be able to edit their tables and have that data update in the database. I'm using the jQuery tabledit plugin to achieve this.
I followed this tutorial Live editable tables and was able to successfully get this to work for one table.
The problem I'm having is this doesn't seem to be working for all my tables. I can only click into the first displayed table but I need to be able to edit all of them.
I've searched for anybody trying to achieve something similar but couldn't find much.
<?php
// ...
if ($resultCheck > 0) {
while ($row = mysqli_fetch_assoc($result)) {
?>
<table id="data_table">
<thead>
<tr>
<th>col1</th>
<th>col2</th>
<th>col3</th>
<th>col4</th>
</tr>
</thead>
<tbody>
<tr>
<td><?php echo $row ['col1_data']; ?></td>
<td><?php echo $row ['col2_data']; ?></td>
<td><?php echo $row ['col3_data']; ?></td>
<td><?php echo $row ['col4_data']; ?></td>
</tr>
</tbody>
</table>
<?php
}
}
$(document).ready(function () {
$('#data_table').Tabledit({
deleteButton: false,
editButton: false,
columns: {
identifier: [ 0, 'col1_data' ],
editable: [ [ 1, 'col2_data' ], [ 2, 'col3_data' ], [ 3, 'col4_data' ] ],
},
hideIdentifier: false,
url: 'includes/liveedit.inc.php',
})
})
I think this may be a problem with each table having the same identifier but I'm not sure. I return each table from the database with a unique identifier but I'm not sure how to use that with the plugin (it seems like I need to).
Sorry if this has an easy solution. I'm pretty new to php and jQuery.
Thanks in advance for any help and please let me know if I'm not being clear enough!

You have an id and it must be unique. Your while statement creates many tables with the same id.
Your JS always going to the first table with such id. Change it on class. Don't use id if you wanna apply your JS code at once.
$(document).ready(function() {
$('.data_table').Tabledit({
deleteButton: false,
editButton: false,
columns: {
identifier: [0, 'col1_data'],
editable: [[1, 'col2_data'], [2, 'col3_data'], [3, 'col4_data']]
},
hideIdentifier: false,
url: 'includes/liveedit.inc.php'
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-tabledit#1.0.0/jquery.tabledit.min.js"></script>
<table class="data_table">
<thead>
<tr>
<th>col1</th>
<th>col2</th>
<th>col3</th>
<th>col4</th>
</tr>
</thead>
<tbody>
<tr>
<td>rew</td>
<td>ter</td>
<td>yrt</td>
<td>qwe</td>
</tr>
</tbody>
</table>
<table class="data_table">
<thead>
<tr>
<th>col1</th>
<th>col2</th>
<th>col3</th>
<th>col4</th>
</tr>
</thead>
<tbody>
<tr>
<td>data_column1</td>
<td>dat2a_column1</td>
<td>da3ta_column1</td>
<td>data_co5lumn1</td>
</tr>
</tbody>
</table>
Press ENTER in the snippet for saving the new value

Related

Print button in Javascript

Here's my code :
<table class="table table-hover" id="mytable" >
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Print</th>
</tr>
<script type="text/javascript">
function initButtonPrint(){
var button = document.getElementById('button-print');
button.onclick = function(e){
print();
grayLine(1);
return false;
}
}
function grayLine(lineId){
var arrayLine = document.getElementById("mytable").rows;
arrayLine[lineId].style.backgroundColor = "silver";
}
</script>
</thead>
<tbody>
<br/>
<?php
for ($i=0; $i<$lineNumber; $i++)
{
?>
<tr>
<td><?php echo $mytable[$i]['Data']['Column 1']; ?></td>
<td><?php echo $mytable[$i]['Data']['Column 2']; ?></td>
<td><input type="button" id="button-print" value="Print"/></td>
</tr>
<?php
}
echo $this->Js->writeBuffer();
?>
</tbody>
</table>
<script type="text/javascript">
initButtonPrint();
</script>
What this code does ?
I put my data from a database into a html table using a for loop and I put a print button in each line. When I click the first print button, the print configuration page opens and the first line is colored grey
arrayLine[lineId].style.backgroundColor = "silver";
What I want to do ?
When I click on a print button, the line is colored grey (or silver here)
The main issue is that I don't know how to tell the javascript which button from which line was pressed. In my code the first line is colored grey because I passed the number 1 into the function
grayLine(1)
Another main issue is that only the first print button from the first line works (only one which opens the print configuration page)
Thanks for your help !
You must change the id='button-print' to class='button-print' because 'id' is unique in a document, the loop creat more than one id
please try the following code:
<html>
<head>
<script src="https://code.jquery.com/jquery-3.0.0.js" integrity="sha256-jrPLZ+8vDxt2FnE1zvZXCkCcebI/C8Dt5xyaQBjxQIo=" crossorigin="anonymous"></script>
</head>
<body>
<table class="table table-hover" id="mytable" >
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Print</th>
</tr>
</thead>
<tbody>
<br/>
<?php
$database = array(
'one' => array('name' => 'john' , 'city' => 'noida' , 'addr' => 'xyz','mail' => 'john#xyz.com'),
'two' => array('name' => 'jimi' , 'city' => 'india' , 'addr' => 'abc','mail' => 'jimi#abc.com'),
'three' => array('name' => 'foo' , 'city' => 'china' , 'addr' => 'pqr','mail' => 'foo#pqr.com'),
'four' => array('name' => 'apple' , 'city' => 'america' , 'addr' => 'lmno','mail' => 'apple#lmno.com'),
);
foreach($database as $row)
{
?>
<tr>
<td>Name : <?php echo $row['name']; ?></td>
<td>City : <?php echo $row['city']; ?></td>
<td><input type="button" onclick="change_color(this);" class="button-print" value="Print"/></td>
</tr>
<?php
}
?>
</tbody>
</table>
<script>
function change_color(obj){
$('.button-print').parent().parent().css('background-color' , 'white');
$(obj).parent().parent().css('background-color' , 'silver');
}
</script>
</body>
</html>
I agree with Sun Liren answer and you should accept it but I would also like to point out the title is somewhat misleading and could be reworded to show what you actually wanted to know( make the buttonclick aware of the row he is a child of). I would also remove the php tag since it's not relevant to the question and I would use dummy data instead of your php code to populate it, to make it easier to get your code to work on tools like jsfiddle. Sorry if that sounded arrogant, it wasn't my intention. Would have posted it as a comment but I don't have enough reputation
For a quick look, you can see this codepen
http://codepen.io/SLRXXX/pen/KrmRgE?editors=1111
The attribute 'id' means there's only one specific element with the id in the html DOM tree. So, in the html that you show us, there are many buttons with the same id, which is an improper way to use 'id', but the browser won't tell you. When you use the document.getElementById method, it only returns the first button.
So, what we should do is to bind event to every button in the table rows, when button clicked, find the row containing the button (in another word, look for the button's parent table row), then change its color.
To select all the buttons, we can use class instead of id attribute. Or if the page is simple enough, we can just use input[type="button"] to select.
Put the following script under your table element.
function initButtonPrint() {
var buttons = document.querySelectorAll('#mytable .button-print');
for (var i = 0; i < buttons.length; i++) {
buttons.item(i).onclick = function () {
var t = this;
while (true) { // find the row containing the button
t = t.parentElement;
if (t.nodeName === 'TR') {
break;
}
}
t.style.backgroundColor = "silver";
};
}
}
initButtonPrint();
As for your table, it may look like this:
<table class="table table-hover" id="mytable" >
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Print</th>
</tr>
</thead>
<tbody>
<?php
for ($i=0; $i<$lineNumber; $i++) {
?>
<tr>
<td><?php echo $mytable[$i]['Data']['Column 1']; ?></td>
<td><?php echo $mytable[$i]['Data']['Column 2']; ?></td>
<td><input type="button" class="button-print" value="Print"/></td>
</tr>
<?php
}
echo $this->Js->writeBuffer();
?>
</tbody>
</table>
Ok so I manage to solve my problem and it is ridiculously simple : I deleted the initButtonPrint() and grayLine(lineId) functions which were useless and instead I did this using jQuery (thanks to Gurpreet Janjua) :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.button-print').click(function(){
$(this).parent().parent().css('background','grey');
print();
});
});
</script>
The problem was that I declared my button with id instead of class.
Big thank you to Sun Liren, N Muhammed Thamjeed and everyone who replied to me
may be it's help you :
<table class="table table-hover" id="mytable" >
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Print</th>
</tr>
</thead>
<tbody>
<br/>
<?php
for ($i=0; $i<$lineNumber; $i++)
{
?>
<tr>
<td><?php echo $mytable[$i]['Data']['Column 1']; ?></td>
<td><?php echo $mytable[$i]['Data']['Column 2']; ?></td>
<td><input type="button" class="button-print" value="Print"/></td>
</tr>
<?php
}
echo $this->Js->writeBuffer();
?>
</tbody>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.button-print').click(function(){
$(this).parent().parent().css('background','grey');
});
});
</script>
in this code,when you click on print button then that row background will be grey..

How to fetch the data for one page at a time

I have the problem to fetch the as per number of rows at a time in jQuery DataTables with Bootstrap. Firstly, my code below fetches whole data from the database and starts the pagination.
But I want data loaded for one page at a time.
My PHP code is:
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th> Name</th>
<th>category</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<?php foreach ($datastat as $row) {
?>
<tr>
<td><?php echo $row['fname'];?> <?php echo $row['mname'];?> <?php echo $row['lname'];?></a></td>
<td><?php echo $row['category'];?></td>
<td><?php echo $row['location'];?></td>
</tr>
<?php }?>
</tbody>
<tfoot>
<tr>
<th> Name</th>
<th>category</th>
<th>Location</th>
</tr>
</tfoot>
</table>
My javascript code is:
$(function() {
$('#example1').dataTable({
"bPaginate": true,
"bLengthChange": true,
"bFilter": true,
"bSort": true,
"pageLength": 10
});
});
You need to implement server-side processing in order to retrieve one page at a time from the server, see this example.
Luckily DataTables distribution includes PHP class ssp.class.php and sample code that makes it fairly easy to use with PHP.

jquery.switchButton on multiple pages of datatable

I use jQuery's Datatable plugin and jQuery's switchButton plugin, like this:
<table id="test-list" class="cell-border" cellspacing="0" width="100%">
<thead>
<tr>
<th>Enabled ?</th>
</tr>
</thead>
<tbody>
<?php for ($i=0; $i<100; $i++) { ?>
<tr>
<td>
<input type="checkbox" class="enable-disable" name="enable-disable" value="<?php echo $i; ?>" checked />
</td>
</tr>
<?php } ?>
</tbody>
</table>
This is javascript code:
$(document).ready(function () {
// format datatable
$('#test-list').dataTable({
"scrollCollapse": true,
"paging": true,
"info": false,
// other fields
// ...
});
// format checkboxes as switch buttons
$('.enable-disable').switchButton();
// others
// ...
});
The problem is: all checkboxes on the first page of the datatable are formated correctly (switch button type), but when I turn to other pages (from the second page to the end page) checkboxes are not formated (traditional type)

multiple child rows in datatable

I have an exiting PHP/javascript application that generates a table with some rows and corresponding child rows(there can be many of them, all are retrived from DB at once), which are hidden by default. Child rows are shown after user clicks button placed in table row.
It looks like this(one parent, two children):
http://i.imgur.com/hul9fT9.png
It is generated like this from php:
for($i = 0; $i < count($shipArr); $i++)
{
echo '
<tr>
<td><span>'.$shipArr[$i]["orderNo"].'</span></td>
</tr>
<tr>
<td>
<table id="details">
;'
for($j = 0; $j < count($shipDetailsArr[$i]); $j++)
{
echo '
<tr>
<td>
<p>
<span>Order Number: </span><span>'.$shipDetailsArr[$i][$j]["lineNo"].'</span>
</p>
</td>
</tr>
';
}
echo '</table>;'
}
Can I use somehow objects $shipArr and $shipDetailsArr populated from db to create the same effect using datatables plugin? How can I achieve this?
Thanks for any help.
I dont't think there is a database plugin which can automatically generate a table. You should use something like a table generator. You can program it yourself in e.g. PHP.
If this is hard for you there are already classes which can do this. Two examples are:
http://www.dyn-web.com/php/table_class/example.php
https://github.com/naomik/htmlgen
Good luck!
I know this question is quite old, but I thought I'd chime in with some support considering another answer here linked to my project.
To solve this problem, I wrote htmlgen, mirrored on packagist. It makes HTML generation with PHP quite nice, if I do say so myself !
use function htmlgen\html as h;
use function htmlgen\map;
$beeData = [
'pop' => 'yup',
'candy' => 'sometimes',
'flowers' => 'so much',
'water' => 'not really',
'sand' => 'indifferent',
'donuts' => 'most definitely'
];
echo h('table',
h('thead',
h('tr',
h('td', 'item'),
h('td', 'do bees like it?')
)
),
h('tbody',
map($beeData, function($value, $key) { return
h('tr',
h('td', $key),
h('td', $value)
);
})
)
);
Output (whitespace not included in actual output)
<table>
<thead>
<tr>
<td>item</td>
<td>do bees like it?</td>
</tr>
</thead>
<tbody>
<tr>
<td>pop</td>
<td>yup</td>
</tr>
<tr>
<td>candy</td>
<td>sometimes</td>
</tr>
<tr>
<td>flowers</td>
<td>so much</td>
</tr>
<tr>
<td>water</td>
<td>not really</td>
</tr>
<tr>
<td>sand</td>
<td>indifferent</td>
</tr>
<tr>
<td>donuts</td>
<td>most definitely</td>
</tr>
</tbody>
</table>

Filter SQL Data on HTML Table

I'm trying to find a way to filter my sql data from a mysql database on my html table. The trouble I've had is because it's a dynamic table. Should I be sorting on the html table, and if so, how do I get the result html from the sql query (the entire table), as opposed to the html that's just a single row.
If I need to sort on the SQL query itself, how can I do this without needing to refresh the page every time?
Thanks for any help!
Here's my code for reference:
<?php
$host=""; // Host name
$username=""; // Mysql username
$password=""; // Mysql password
$db_name=""; // Database name
$tbl_name=""; // Table name
// Connect to server and select databse.
mysql_connect("$host", "$username", "$password")or die("cannot connect");
mysql_select_db("$db_name")or die("cannot select DB");
$sql="SELECT * FROM $tbl_name ORDER BY id DESC";
// OREDER BY id DESC is order result by descending
}
$result=mysql_query($sql);
?>
<html>
<head>
<script type="text/javascript" charset="utf-8" src="jquery.js"></script>
</head>
<table id="forum" width="90%" border="0" align="center" cellpadding="3" cellspacing="1" bgcolor="#CCCCCC">
<thead>
<tr>
<th width="6%" align="center" bgcolor="#E6E6E6"><strong>#</strong></td>
<th width="43%" align="center" bgcolor="#E6E6E6"><strong>Topic</strong></td>
<th width="10%" align="center" bgcolor="#E6E6E6"><strong>Author</strong></td>
<th width="15%" align="center" bgcolor="#E6E6E6"><strong>Views</strong></td>
<th width="13%" align="center" bgcolor="#E6E6E6"><strong>Replies</strong></td>
<th width="13%" align="center" bgcolor="#E6E6E6"><strong>Date/Time</strong></td>
</tr>
</thead>
<?php
// Start looping table row
while($rows=mysql_fetch_array($result)){
?>
<tbody>
<tr>
<td bgcolor="#FFFFFF"><? echo $rows['threadtype']; ?></td>
<td bgcolor="#FFFFFF"><? echo $rows['topic']; ?><BR></td>
<td align="center" bgcolor="#FFFFFF"><? echo $rows['email']; ?></td>
<td align="center" bgcolor="#FFFFFF"><? echo $rows['view']; ?></td>
<td align="center" bgcolor="#FFFFFF"><? echo $rows['reply']; ?></td>
<td align="center" bgcolor="#FFFFFF"><? echo $rows['datetime']; ?></td>
</tr>
</tbody
<?php
// Exit looping and close connection
}
mysql_close();
?>
<tfoot>
<tr>
<td colspan="6" align="right" bgcolor="#E6E6E6"><strong>Create New Topic</strong> </td>
</tr>
</tfoot>
</table>
</html>
If you don't have a lot of data [less than 100 rows], it is reasonable to load the entire thing with one query and do all the sorting/filtering client-side.
There are tons of great jquery plugins for doing this. Here is a good one I like:
https://datatables.net/
If you want to be scaleable and handle a lot of rows then you don't want to just load all of them at once.
In this case you want to implement a paging pattern with your queries. If you need to do paging then you will also need your query to sort on the backend when the user changes which column they want to sort by.
Rather than reinvent the wheel, especially if you don't feel comfortable rolling your own here, there are lots of tools you can use to do this. This one seems promising: http://blog.drale.com/mysql-table-viewer-with-pagination-and-sorting/

Categories