Load datables thru Ajax onclick

javilmer

Hi,

First, congratulations for datatables, it is just amazing what you have done. We use it and it works perfectly with UK dates, fixed header, and many other things. We have tried more than 10 other solutions and yours is by far the most advanced.

Now, we need to evolve as follow. We have a page with :
- a basic search engine with 2 fields : prices range and product types, and a submit button,
- the datatables.
What we want is that when the page loads, the datatables does not display any datas. Then, when the user specifies a price range and/or a product type and click submit, then we need to send this two parameters to the Ajax page that will load the datatables. We have no problem to generate the JSON on the server side but what we do not see very well is :
- how not to initially load the datatables,
- how to combine the fnServerData or something else to load the table with an onclick button
- how to pass the parameters to the Ajax page.
We went thru http://datatables.net/forums/discussion/2760/programatically-loading-ajax-data/p1 but did not get it.
Any help appreciated
Best Regards

allan

Hi javilmer,

When you say:

> - how not to initially load the datatables,

do you mean that you don't want the table initially visible, or you want the table initially visible, but empty? Do make it hidden initially you could just have a display:none on the div.dataTable_wrapper class. When when you load data into the table you would make this display:block. If you want to have the table initially visible but empty, you just need to make sure that there are no TR rows in the TBODY and you aren't loading any data by Ajax.

> - how to combine the fnServerData or something else to load the table with an onclick button

What is the data source you are using the for table - i.e. are you using sAjaxSource? How about bServerSide? What you might want to consider doing is not having DataTables doing the Ajax work for you (assuming you are not using server-side processing) but rather use the DataTables API to add / delete data from the table. For example whenever you need to load data, you you use $.ajax as usual, then in the "success" callback you would use fnAddData ( http://datatables.net/api#fnAddData ) to add the new data to the table. You could also use fnClearTable to delete any old rows so they are replaced.

> - how to pass the parameters to the Ajax page.

If you do what you use fnServerData (which is a perfectly valid way of doing it - there are quite a lot of ways of addressing what you are looking at) then how to add parameters is shown on this page: http://datatables.net/release-datatables/examples/server_side/custom_vars.html . That is specifically for server-side processing, but the same will work for client-side processing with Ajax sourced data.

Regards,
Allan

javilmer

Hello,
I want the table initially empty, as I dont't know yet what criterias the user is going to choose, so it does not make sense to display any data. I want to display the (appropriate) datas when he has chosen criterias and clicked submit.

I can use the datasource I want, I'll follow your advice, knowing that the datas can takes up to 5 to 10 seconds to get from Database.

So in the perfect world :
- the user sees a page with a couple of criteria to select on the top of the page,
- he selects what he needs (product types for instance),
- he clicks submit,
- under the criteria, then display something like "loading results"
- then the lists appears, in the datatable of course.
Of course all this without any page reload.

Any help greatly appreciated
Jean

GregP

Hi Jean,

I think the functions Allan mentioned are already the ones I would use. The only thing you need to do is decide how to pass the parameters during your Ajax call.

When you use jQuery's .ajax() method, there is a parameter called "data" which will allow you to set your two parameters collected in the fields. So, let's say for example that both of those fields are input tags with the class "searchCriteria" and you have a submit button with the id "submitButton" it would look something like (excluding DataTables initializations):

[code]
// just a quick way of mocking up getting the search terms
var myCriteria = "searchCriteria=";

$('input.searchCriteria').each(function() {
myCriteria += $(this).text();
myCriteria += ",";
});
myCriteria.slice(0, -1); //JSBin didn't cut off the last comma, but this SHOULD work

$('#submitButton').click(function() {
$.ajax({
url: 'myServerScript.php',
dataType: 'json',
data: myCriteria,
success: function (data) {
processData(data);
}
});
});

function processData(data) {
// 'data' is the returned JSON. Do what you need to do with it using
// fnAddData or fnServerData.
}
[/code]