Odd ordering with TableTools button for selected rows only
Odd ordering with TableTools button for selected rows only
oakhamwolf
Posts: 11Questions: 4Answers: 1
Dear all,
I hope your collective wisdom can assist me here.
I realise that TableTools is now retired and I will ultimately shift over to the Button and Select Extensions (maybe sooner rather than later if i can't find a solution to the current problem!) but I am having an issue with a TableTools button that I would very much like to solve.
To simplify the problem, in the code below I've used 3 rows from the example table. I've created a simple button that when clicked triggers an alert to display the first column of data from the table. I've opted for the {page: 'current'} selector option so as to display only selected data (if there is any) and display it in the order the table is in.
My problem is that if there is no selected data the alert box displays the data in the correct order as expected but if multiple rows are selected then the order comes out differently and not in the order the data appears in the table.
Is there another option I need to apply or something else I need to do/correct to get the data coming out in the right order?
Any help would be ver much appreciated. Here's the code:
<!DOCTYPE html>
<head>
<script type="text/javascript" src="/js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="/js/DataTables-1.10.9/media/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/js/TableTools-2.2.4/js/dataTables.tableTools.js"></script>
<link rel="stylesheet" type="text/css" href="/js/DataTables-1.10.9/media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="/js/TableTools-2.2.4/css/dataTables.tableTools.css">
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable({
"dom": 'T<"clear">lfrtip',
tableTools: {
// location of the flash file for generating csv and pdf files
"sSwfPath": "/js/TableTools-2.2.4/swf/copy_csv_xls_pdf.swf",
// method used to select the rows, this allows the default OS keys to be used
"sRowSelect": "os",
// button definitions
"aButtons": [
{
"sExtends": "select_all",
"sButtonText": "View Records",
"bFooter": false,
"bHeader": false,
"oSelectorOpts": {
page: 'current'
},
"mColumns": [ 0 ],
"fnClick": function( nButton, oConfig ) {
var sData = this.fnGetTableData(oConfig);
alert(sData);
}
}
]
}
});
});
</script>
</head>
<body>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
</tbody>
</table>
</body>
</html>
Answers
I decided to bite the bullet and start using the Buttons and Select extensions.
After a little help from allan in this thread:...
https://datatables.net/forums/discussion/comment/82211
....I put the following together which does the job for me and comes out in the right order. Hope this helps someone.