Retrieve data after sorting
Retrieve data after sorting
Hi,
I am using DataTables to display data generated by an ajax function. There are around 500 rows in the table and I am displaying them is pages of 14 rows each. I would like to retrieve the first 14 values of a couple of hidden columns every time the table is sorted. The column data is latitude & longitude data and would be passed to a function to draw a Google map.
My current code is set out below. The getDetails() function is called on $(document).ready.
I tried using "fnDrawCallback" but this appears to work only when the table is redrawn but not when it is sorted.
Any thoughts would be gratefully received.
Regards,
Bob
[code]
function getDetails(){
code = window.location.search.substring(1);
$.get('PHP/getProcHospitals.php',{id:code},function (response)
{
$('#toppanel').html(response);
$('#hosptable').dataTable({
"sDom": 'rt<"bottom"ip><"clear">',
"bLengthChange": false,
"iDisplayLength": 14,
"aoColumns": [
null,
null,
null,
null,
null,
null
],
"bPaginate": true,
"bJQueryUI": false
});
});
}
[/code]
I am using DataTables to display data generated by an ajax function. There are around 500 rows in the table and I am displaying them is pages of 14 rows each. I would like to retrieve the first 14 values of a couple of hidden columns every time the table is sorted. The column data is latitude & longitude data and would be passed to a function to draw a Google map.
My current code is set out below. The getDetails() function is called on $(document).ready.
I tried using "fnDrawCallback" but this appears to work only when the table is redrawn but not when it is sorted.
Any thoughts would be gratefully received.
Regards,
Bob
[code]
function getDetails(){
code = window.location.search.substring(1);
$.get('PHP/getProcHospitals.php',{id:code},function (response)
{
$('#toppanel').html(response);
$('#hosptable').dataTable({
"sDom": 'rt<"bottom"ip><"clear">',
"bLengthChange": false,
"iDisplayLength": 14,
"aoColumns": [
null,
null,
null,
null,
null,
null
],
"bPaginate": true,
"bJQueryUI": false
});
});
}
[/code]
This discussion has been closed.
Replies
I forgot to add that I would like to get the first 14 lines of the visible data after pagination as well.
[code]
"fnDrawCallback": function() {
console.log('redraw!');}
[/code]
To see if it's a question of the callback being fired at all. Obviously you'll need to have your JavaScript console visible to catch the log (as well as any other errors that may appear!).
Your sample code doesn't show how you are retrieving the hidden values you mention. Remember that when you're paginating, anything on the 2nd page onward will not actually be in the DOM. Not sure if that factors in or not.
As an aside, does your PHP response contain the complete table, including both data and HTML markup (in other words, does it create the #hosptable that dataTable() is getting called on)?
As an additional aside: if you ARE doing the above, and want access to the hidden columns as well as the visible data for the 14 visible rows, I can't help wondering if you're better served getting the data via AJAX (returned as JSON) rather than as a server-built table. Using mDataProp and various callbacks (notably fnRowCallback) you have all kinds of access to rows both hidden and otherwise without having to iterate through a table via a separate piece of JS.
The PHP response does create the entire table with both data & HTML markup. I have partially solved the problem by adding two hidden fields and iterating through aaData e.g.
[code]
function getDetails(){
code = window.location.search.substring(1);
$.get('PHP/getProcHospitals.php',{id:code},function (response)
{
$('#toppanel').html(response);
htable = $('#hosptable').dataTable({
"aaSorting": [ ],
"fnHeaderCallback":function(nHead, aaData, iStart, iEnd, aiDisplay) {
latlist = "";
longlist = "";
namelist = "";
townlist = "";
for (var i=iStart;i