Filtering AJAX data rows without using AJAX

whobutsb

Sorry for the confusing title, its better that I just explain.

When I load my page I make an AJAX call to the server to return a JSON list of rows for my table. Once I have the rows loaded I would like the filtering to happen within the DOM using Javascript. Right now every time I type in a character a new AJAX call is sent to the database, with the variable sSearch set.

Is there an option that I can turn on to make this happen?

Thanks for your help.

whobutsb

After doing some search around the forums I figured out that if I switch 'bServerSide': false that processing would happen on the Browser. But then I wasn't able to add my fnServerData to the function.

So in this forum:
http://datatables.net/forums/comments.php?DiscussionID=732

I modified the _fnInitialise function to use the options I added in my $.ajax function.

After that I ran in to a problem with the a.toLowerCase is not a function on line 588 of the datatables script.

So I modified the "string-asc" to:
[code]
"string-asc": function(a,b)
{
a = a + '';
var x = a.toLowerCase();
b = b + '';
var y = b.toLowerCase();
return ((x < y) ? -1 : ((x > y) ? - 1 : 0))
},
[/code]

and everything seems to be working just fine now.

allan

Hi whobutsb,

Good to hear you got it working. I'm going to add in the abstraction of fnServerData for Ajax data grabbing in the next release. However, I don't really plan to type cast whatever data into strings like in your modified sort function, primarily because it will slow down longer sorts. DataTables should correctly pick up numeric data etc, and if it is not, then it's a bug - but I've not seen this in a long time. Perhaps you could post a "working" example showing the bug - that would be very useful for me to nail down what is causing it.

Regards,
Allan

whobutsb

Hi Allan, thanks for the comment. Here is my javascript code I used to get everything working:

[code]

var oTable;

$(function(){
createDataTable();
});

//Create the DataTable
function createDataTable(){
oTable = $('#contacts-table').dataTable({
"aaSorting": [[ 1, "asc" ]],
"bInfo": false,
"bPaginate": false,
'bFilter': true,
'bProcessing' : true,
'bServerSide': false,
'sAjaxSource': '<?= site_url('AJAX/contact_ajax/select_group'); ?>' //Select the all contacts group
});
}

//Load the Contact Group
function loadContactGroup(contactgroupID){
if(contactgroupID != ''){
$('a#delete-group').attr('id', contactgroupID).removeClass('ui-state-disabled');
}else{
$('a#delete-group').attr('id', '#').addClass('ui-state-disabled');
}

//Run the Reload Function to grab the new contacts
oTable.fnReloadAjax('<?= site_url('AJAX/contact_ajax/select_group'); ?>/'+contactgroupID);
}

[/code]

Basically I'm trying to recreate Googles Contact manager in my CRM system. The application is in a intranet so I can't provide a link, I plan on creating a public demo in the future. But here is snap shot of the application.

http://imgur.com/8433o.jpg

allan

Hi whobutsb ,

Thanks for the code. Is there any chance you could also provide a little bit of the data that is coming from the Ajax source. Obviously it need not be the "real" data - but something with the right variable types in the columns. I suspect DataTables is seeing one column as a string when it should be seeing it as a number...

Thanks,
Allan

whobutsb

Hi Allan,

Here is a small sampling of the JSON returned. I presume its the first entry where there is blank contact name that is being passed, which is causing the error. This is a testing database so sometimes there is mal-formed rows in there.
[code]
{"aaData":[[[""],[" <\/a>"]],[[""],["Stephanie -<\/a>"]],[[""],["Amy .<\/a>"]],[[""],["Angie .<\/a>"]],[[""],["Ashley .<\/a>"]] [/code]

allan

Hi whobutsb,

I think you've got two many nested arrays there :-). DataTables is expecting a 2D array, rather than a 3D array. Something like this should work:

[code]
{
"aaData": [
[
"",
" <\/a>"
],
[
"",
"Stephanie -<\/a>"
],
[
"",
"Amy .<\/a>"
],
[
"",
"Angie .<\/a>"
],
[
"",
"Ashley .<\/a>"
]
]
}
[/code]
Regards,
Allan

whobutsb

Thanks for the advice! I modified my php array output I had an array around each of the rows, and like you said I didn't need to add that. Things are looking good now!

The script is a bit slow, but that is to be expected when pulling in 6000+ rows and growing every day. Have any hints on cutting down the execution time? I added a loading dialog box, which will help for now, but I can see my users getting pissed in the future.

Thanks for all of your help!

allan

Hi whobutsb,

Good to hear that worked. 6000+ is a good number of rows :-). A couple of things can be done to speed things up:

1. Disabled bSortClasses
2. Switch to using server-side processing - which might not be a bad idea if you are expecting a lot more rows to be added.

Regards,
Allan

allan

Hi whobutsb,

Good to hear that worked. 6000+ is a good number of rows :-). A couple of things can be done to speed things up:

1. Disabled bSortClasses
2. Switch to using server-side processing - which might not be a bad idea if you are expecting a lot more rows to be added.

Regards,
Allan