Data refresh (jQuery) at the click of a button

Question

I created a simple form and I use the jQuery datatables plugin to display some data. The data is populated with a php script (process.php) that returns the correct results in JSON format. The form has a button that sends the value of the text field to the process.php file. The problem is that I cannot update / modify the datatable with the new data received by the process.PHP script when the button is clicked .

Form Code:

<form name="myform" id="myform" action="" method="POST"> <label for="id">Enter an id:</label> <input type="text" name="txtId" id="txtId" value=""/> <input type="button" id="btnSubmit" name="btnSubmit" value="Search"> </form> <div id="results"> <table class="display" id="example"> <thead> <tr> <th>id</th> <th>Surname</th> <th>Name</th> </tr> </thead> <tbody> <!-- data goes here --> </tbody> </table> </div> 

To create a datatable, I use the following jQuery code:

  $(document).ready(function() { var oTable = $('#example').dataTable( { "sPaginationType": "full_numbers", "iDisplayLength": 10, //"bServerSide": true, "sAjaxSource": "process.php" } ); $("#btnSubmit").click(function(){ $.ajax({ type: "POST", url: "process.php", data: 'txtId=' + $("txtId").val(), success: function(result) { oTable.fnReloadAjax(); oTable.fnDraw(); } }); }); } ); 

process.PHP script (works great):

 <?php $result=""; if (empty($_REQUEST["txtId"])) { $result = '{"aaData":[["1","Surname1","Name1"]]}'; } else { $result = '{"aaData":[["2","Surname2","Name2"]]}'; } print $result; ?> 

Answer 1

It looks like you should also specify fnServerData when you are setting up your data if you want to use ajax POST: http://datatables.net/ref#fnServerData

It is also possible that you do not need to call fnReloadAjax() , but only fnDraw() . fnReloadAjax() is a plugin function, so I assume you preloaded it.

Answer 2

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

Using fnReloadAjax will make the same Ajax call that you specified in the table initialization. So, as Stefan said, you need to specify your fnServerData parameter in your data parameters (but reset the Success parameters, because something along these lines is already accepted by datatables). Then just click the fnReloadAjax() button.

Here is what your last 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(); }); } ); 

Answer 3

I finally found a solution! There were 2 problems in my jQuery code:

• I had to add the fnReloadAjax () code after the script tags that load the datatables and before the $ (document) .ready () statement.
• I had to change the jQuery code of my submit button (there is no need to call AJAX, only fnReloadAjax () is needed).

Thanks to both Stefan and Mbesley !!

JQuery code now:

 // // fnReloadAjax() code // $.fn.dataTableExt.oApi.fnReloadAjax = function ( oSettings, sNewSource, fnCallback, bStandingRedraw ) { if ( typeof sNewSource != 'undefined' && sNewSource != null ) { oSettings.sAjaxSource = sNewSource; } this.oApi._fnProcessingDisplay( oSettings, true ); var that = this; var iStart = oSettings._iDisplayStart; var aData = []; this.oApi._fnServerParams( oSettings, aData ); oSettings.fnServerData( oSettings.sAjaxSource, aData, function(json) { /* Clear the old information from the table */ that.oApi._fnClearTable( oSettings ); /* Got the data - add it to the table */ var aData = (oSettings.sAjaxDataProp !== "") ? that.oApi._fnGetObjectDataFn( oSettings.sAjaxDataProp )( json ) : json; for ( var i=0 ; i<aData.length ; i++ ) { that.oApi._fnAddData( oSettings, aData[i] ); } oSettings.aiDisplay = oSettings.aiDisplayMaster.slice(); that.fnDraw(); if ( typeof bStandingRedraw != 'undefined' && bStandingRedraw === true ) { oSettings._iDisplayStart = iStart; that.fnDraw( false ); } that.oApi._fnProcessingDisplay( oSettings, false ); /* Callback user function - for event handlers etc */ if ( typeof fnCallback == 'function' && fnCallback != null ) { fnCallback( oSettings ); } }, oSettings ); } $(document).ready(function() { var oTable = $('#example').dataTable( { "sPaginationType": "full_numbers", "iDisplayLength": 10, //"bServerSide": true, "sAjaxSource": "process.php" }); $("#btnSubmit").click(function(){ oTable.fnReloadAjax("process.php?txtId=" + $("txtId").val()); }); } ); 

Answer 4

You can also simply destroy the table and recreate it.

 var oTable = null; function reloadTable() { if (oTable) { oTable.fnDestroy(); } oTable = $('#example').dataTable( { "sPaginationType": "full_numbers", "iDisplayLength": 10, //"bServerSide": true, "sAjaxSource": "process.php" } ); } reloadTable();