Using form wrapped around Tabletools with pagination
Using form wrapped around Tabletools with pagination
UKNetmaster
Posts: 1Questions: 1Answers: 0
I'm working with the (frankly) excellent datatables with the tableTools extension but am running into a bit of a problem when it comes to selecting multiple rows, across multiple pages.
I'm hoping to complete a form where a user can select multiple rows across multiple pages (or draws as I believe they're known as) and then simply click on the "Next" button where I'm able to process the selection.
I've three versions of what I want to achieve and version 1 and 2 didn't have tableTools (I came across it today) and have been playing with it since, and can only imagine that I'm so close I can smell the beer I'll pour myself once completed.
The table is wrapped within a form, I'm pulling the data from an external application and formatting it accordingly. The first column contains a checkbox (outside of datatables as it's going to be serialized) with some hidden data assigned to it. I'm able to select mutliple rows as expected but when I come to submit the form, only the records shown on the page that I'm viewing are submitted.
For example - with 30 records, pagination set to 25, I select (Page 1) row1 and then (Page 2) row1, 2 and 3.
Now, if I return to Page 1 and press Submit, one row is submitted; however if I remained on page 2, three rows are submitted. In both cases I would've expected 4 rows to be submitted.
HTML:
<html>
<head>
<!-- <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!-- <link rel="stylesheet" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css"></style> -->
<link rel="stylesheet" href="css/jquery.dataTables.min.css"></style>
<link rel="stylesheet" href="css/dataTables.tableTools.css"></style>
<!-- <script type="text/javascript" src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script> -->
<script type="text/javascript" src="js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="js/dataTables.tableTools.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<form action="exampleC-p1.php" method="POST" style="width: 80%; margin: auto; background: #EBEBE7; padding:0.7em">
<div class="table-responsive">
<table id="qrResultsTable" class="display table" width="100%" >
<thead>
<tr>
<th> </th>
<th> Name</th>
<th>ABC</th>
<th>DEF</th>
<th>GHI</th>
<th>JKL</th>
<th>MNO</th>
</tr>
</thead>
<tbody>
<!-- table data follows -->
<?php echo $tableList;?>
</tbody>
</table>
</div>
<input type="submit" name="submit" value="Next >">
</form>
<script>
$(document).ready(function(){
$('#qrResultsTable').dataTable({
dom: 'T<"clear">lfrtip',
tableTools: {
"sRowSelect": "multi",
"sRowSelector": "td:first-child",
"aButtons": [ 'select_all', 'select_none' ]
},
"bStateSave": true, // save the users state of the table (uses cookies)
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [ 0 ] }, // disable sort-ability for column 0 (the first)
{ 'bSearchable': false, 'aTargets': [ 0 ] } // disable any searching on column 0
],
"order": [[ 4, "asc" ]] // sort by the 4th column (that is sortable - note the first above isn't being sorted) in descending order
});
});
</script>
</body>
</html>
Now the results of $tableList are as follows:
<tr><td><input type="checkbox" name="siuid[]" value="0"/></td><td>NAME92</td><td>MR92</td><td>ACC4043</td><td>CT</td><td>20131211</td><td>Test description</td></tr>
<tr><td><input type="checkbox" name="siuid[]" value="1"/></td><td>NAME80</td><td>MR80</td><td>ACC4030</td><td>CR</td><td>20131204</td><td>Test description</td></tr>
<tr><td><input type="checkbox" name="siuid[]" value="2"/></td><td>NAME87</td><td>MR87</td><td>ACC4039</td><td>MG</td><td>20130930</td><td>Test description</td></tr>
<tr><td><input type="checkbox" name="siuid[]" value="3"/></td><td>NAME88</td><td>MR88</td><td>ACC4037</td><td>MG</td><td>20131204</td><td>Test description</td></tr>
<tr><td><input type="checkbox" name="siuid[]" value="4"/></td><td>NAME85</td><td>MR85</td><td>ACC4035</td><td>MG</td><td>20131204</td><td>Test description</td></tr>
<tr><td><input type="checkbox" name="siuid[]" value="5"/></td><td>NAME89</td><td>MR89</td><td>ACC4040</td><td>MG</td><td>20131205</td><td>Test description</td></tr>
<tr><td><input type="checkbox" name="siuid[]" value="6"/></td><td>NAME86</td><td>MR86</td><td>ACC4036</td><td>MG</td><td>20131209</td><td>Test description</td></tr>
<tr><td><input type="checkbox" name="siuid[]" value="7"/></td><td>NAME78</td><td>MR78</td><td>ACC4029</td><td>CR</td><td>20131204</td><td>Test description</td></tr>
<tr><td><input type="checkbox" name="siuid[]" value="8"/></td><td>NAME72</td><td>MR72</td><td>ACC4032</td><td>CR</td><td>20131206</td><td>Test description</td></tr>
<tr><td><input type="checkbox" name="siuid[]" value="9"/></td><td>NAME82</td><td>MR82</td><td>ACC4042</td><td>US</td><td>20131209</td><td>Test description</td></tr>
<tr><td><input type="checkbox" name="siuid[]" value="10"/></td><td>NAME91</td><td>MR91</td><td>ACC4031</td><td>CT</td><td>20131204</td><td>Test description</td></tr>
<tr><td><input type="checkbox" name="siuid[]" value="11"/></td><td>NAME81</td><td>MR81</td><td>ACC4028</td><td>US</td><td>20131209</td><td>Test description</td></tr>
<tr><td><input type="checkbox" name="siuid[]" value="12"/></td><td>NAME79</td><td>MR79</td><td>ACC4033</td><td>US</td><td>20131206</td><td>Test description</td></tr>
<tr><td><input type="checkbox" name="siuid[]" value="13"/></td><td>NAME83</td><td>MR83</td><td>ACC4038</td><td>MG</td><td>20131204</td><td>Test description</td></tr>
<tr><td><input type="checkbox" name="siuid[]" value="14"/></td><td>NAME87</td><td>MR87</td><td>ACC4034</td><td>US</td><td>20131209</td><td>Test description</td></tr>
Any ideas where I'm going wrong?