Reloading DataTable.js fnServer fnDraw

Question

First I initiate all datatables by the following code (there are more options, but I'm adding a minimum for this example). The code bellow is working and start all datatables, if the datatable has a search, it'll initialise the fnServerParams with the parameters. (the parameters are going to the function on the codebehind and working).

var dt = jQuery(".dataTable");
if(jQuery().dataTable && dt.length > 0) {
    dt.each(function () {
        var e = {
            sPaginationType: "full_numbers",
        };
        // If has external filters
        if(!!jQuery(this).data("searchbox")) {
            var search_box = jQuery(jQuery(this).data("searchbox"));

            var additional_filters = [];
            jQuery.each(search_box.find('input,select'), function(i, v){
                additional_filters.push({
                    name: jQuery(v).attr('name'),
                    value: jQuery(v).val()
                });
            });

            if (additional_filters.length > 0) {
                e.fnServerParams = function (aoData) {
                    for (var i=0; i < additional_filters.length; i++) {
                        var filter = additional_filters[i];
                        aoData.push( { "name": filter.name, "value": filter.value } );
                    }
                }
            }
        }
        jQuery(this).dataTable(e);
    });
}

The problem is when I call my function RefreshDataTables() by a click/change event. In the function I used this simplified version to refresh:

PS: All code below is to be interpreted that is inside RefreshDataTables()

var dt = jQuery(".dataTable");
if(jQuery().dataTable && dt.length > 0) {
    dt.each(function () {
        var $oTable = jQuery(this).dataTable();
        $oTable.fnDraw();
    });
}

But it doesn't update the changes on the inputs/selects of the search. it keep the same from the before. So I tried this code base on this answer :

var dt = jQuery(".dataTable");
if(jQuery().dataTable && dt.length > 0) {
    dt.each(function () {
        var $oTable = jQuery(this).dataTable();
        var search_box = jQuery(jQuery(this).data("searchbox"));

        var additional_filters = [];

        jQuery.each(search_box.find('input,select'), function(i, v){
            additional_filters.push({
                name: jQuery(v).attr('name'),
                value: jQuery(v).val()
            });
        });

        if (additional_filters.length > 0) {
            $oTable._fnServerParams = function (aoData) {
                for (var i=0; i < additional_filters.length; i++) {
                    var filter = additional_filters[i];
                    aoData.push( { "name": filter.name, "value": filter.value } );
                }
            }
        }
        $oTable.fnDraw();
    });
}

But it didn't work. There is no error, but the data is still the same, without any change.

Answer 1

You're querying values of INPUT and SELECT only once during initialization. Instead you should do it every time the data is requested from the server.

So you can modify your initialization code so that you retrieve INPUT and SELECT values on every call to function defined with fnServerParams .

Below I just moved your code into fnServerParams callback.

var dt = jQuery(".dataTable");
if(jQuery().dataTable && dt.length > 0) {
    dt.each(function () {
        var e = {
            sPaginationType: "full_numbers",
            fnServerParams: function(aoData){
                // If has external filters
                if(!!jQuery(this).data("searchbox")) {
                    var search_box = jQuery(jQuery(this).data("searchbox"));

                    var additional_filters = [];
                    jQuery.each(search_box.find('input,select'), function(i, v){
                        additional_filters.push({
                            name: jQuery(v).attr('name'),
                            value: jQuery(v).val()
                        });
                    });

                    if (additional_filters.length > 0) {
                        for (var i=0; i < additional_filters.length; i++) {
                            var filter = additional_filters[i];
                            aoData.push( { "name": filter.name, "value": filter.value } );
                        }
                    }
                }
            }
        };

        jQuery(this).dataTable(e);
    });
}

Then your RefreshDataTables() calling $oTable.fnDraw() should work.

See the example below for code and demonstration. Please note, that I'm using jQuery Mockjax plug-in just for the sake of demonstrating Ajax request, it's not needed for production code.

 $(document).ready(function() { // AJAX emulation for demonstration only $.mockjax({ url: '/test/0', responseTime: 200, response: function(settings) { console.log("Request data: ", settings.data); this.responseText = { "aaData": [ [ "Trident", "Internet Explorer 4.0", "Win 95+", "4", "X" ], [ "Trident", "Internet Explorer 5.0", "Win 95+", "5", "C" ], [ "Trident", "Internet Explorer 5.5", "Win 95+", "5.5", "A" ] ] }; } }); $('#example').dataTable({ "sAjaxSource": "/test/0", "bServerSide": true, "fnServerParams": function(aoData) { // If has external filters if (!!jQuery(this).data("searchbox")) { var search_box = jQuery(jQuery(this).data("searchbox")); var additional_filters = []; jQuery.each(search_box.find('input,select'), function(i, v) { additional_filters.push({ name: jQuery(v).attr('name'), value: jQuery(v).val() }); }); if (additional_filters.length > 0) { for (var i = 0; i < additional_filters.length; i++) { var filter = additional_filters[i]; aoData.push({ "name": filter.name, "value": filter.value }); } } } } }); $('#btn').on('click', function(){ $('#example').dataTable().fnDraw(); }); }); 

 <!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <link href="//cdn.datatables.net/1.9.4/css/jquery.dataTables.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="//cdn.datatables.net/1.9.4/js/jquery.dataTables.min.js"></script> <script src="http://vitalets.github.com/x-editable/assets/mockjax/jquery.mockjax.js"></script> </head> <body> <p id="searchbox"> <input type="text" name="param1" value="" placeholder="param1"> <button id="btn" type="button">Search</button> </p> <table cellpadding="0" cellspacing="0" border="0" class="display" id="example" data-searchbox="#searchbox"> <thead> <tr> <th width="20%">Rendering engine</th> <th width="25%">Browser</th> <th width="25%">Platform(s)</th> <th width="15%">Engine version</th> <th width="15%">CSS grade</th> </tr> </thead> <tbody> </tbody> <tfoot> <tr> <th>Rendering engine</th> <th>Browser</th> <th>Platform(s)</th> <th>Engine version</th> <th>CSS grade</th> </tr> </tfoot> </table> </body> </html>