Update datatables (JQuery) when button is clicked

Question

I\'ve created a simple form and I\'m using the Datatables jQuery plugin to display some data in it. Data are being populated by a php script (process.php) which returns the prop

Answer 1

fnReloadAjax is what you should use (and I believe that it might have a redraw built into the function). But the problem is that, although you make a second .ajax call, the data in that call is not associated with your datatable at all and will never be bound to it.

Using fnReloadAjax will make the same Ajax call that you specified in your table initialization. So what you need, as Stefan mentioned, is to specify your fnServerData parameter in your datatable settings (but trash the Success parameters, because something along those lines is already assumed by datatables). Then just make your button call fnReloadAjax().

Here's what your final code should look like:

$(document).ready(function() {
        var oTable = $('#example').dataTable( {
            "sPaginationType": "full_numbers",
            "iDisplayLength": 10,
            "sAjaxSource": "process.php",
            "fnServerData": function ( sSource, aoData, fnCallback ) {
                $.ajax( {
                    "dataType": 'json', 
                    "type": "POST", 
                    "url": sSource, 
                    "data": 'txtId=' + $("txtId").val(), 
                    "success": fnCallback
                } );
            }
        } );

    $("#btnSubmit").click(function(){ 
        oTable.fnReloadAjax();
    });
} );