Data tables refresh on button click

ambesangevishal

I am doing search of Customers and displaying results. I am providing single screen to get search criteria and display search results. There is default results which I am displaying when user comes to this screen first time. I am using data tables to display search results here. I am able to display default search results fine. Now if modifies search criteria and clicks on search button, I want to display search results for the modified search criteria on this button click.
If anyone has already implemented such functionality then please help me out. I got lot of things done being a new bee to data tables :) This is the only one I am stuck with.

Thanks.

psharp

Take a look at this example:
http://www.datatables.net/examples/api/multi_filter.html

With this, filtering becomes automatic and does not require the user to click a button to apply them.

I've written a delay function for column filtering and would share it if there is any interest.

psharp

Actually, there may be so just in case:
set up this javascript global
[code]
var oTable = {};
var delay = (function(){
var timer = 0;
return function(callback, ms) {
clearTimeout(timer);
timer = setTimeout(callback, ms);
};
})();
[/code]

bind your datatable to the oTable global:

[code]
oTable = $('your table').dataTable({ settings ... });
[/code]

In your table html code, do not forget to add the tfoot section with search input fields. Like so:
[code]

Filter results by column
















[/code]

and finally, attach an event to fire on each input field that will apply the filtering. Like so:
[code]
// using self invoking (closure method) to access global oTable reference
$("tfoot input").each(function(){
var me=$(this);
me.keyup(
function(){return function(){
delay(function(){oTable.fnFilter(me.val(), $("tfoot input").index(me) );}, 750);
}}()
);
});
[/code]

the 750 parameter provides a good delay time for the user to be able to input values before the filter fires off.