JQuery DataTables, refresh grid after upgrade (server side processing)

Question

Well, I was working on a small project for use with DataTables. Its jQuery grid plugin and Ive got most of the functionality that works as intended. The only thing I can’t bow my head to do is update the grid on AJAX Inline edit.

<script type="text/javascript" charset="utf-8"> $(document).ready( function () { var oTable = $('#example').dataTable({ "bJQueryUI": true, "bProcessing": true, "sAjaxSource": "/test/server_processing.php", "sPaginationType": "full_numbers", "aoColumns": [ { "bVisible": false }, null, null, null ] }).makeEditable({ sAddURL: "AddData.php", sAddHttpMethod: "GET", sDeleteHttpMethod: "GET", sDeleteURL: "DeleteData.php", sUpdateURL: "UpdateData.php", oAddNewRowButtonOptions: { label: "Add...", icons: {primary:'ui-icon-plus'} }, oDeleteRowButtonOptions: { label: "Remove", icons: {primary:'ui-icon-trash'} }, oAddNewRowFormOptions: { title: 'New Toll Free number', show: "blind", hide: "explode", modal: true }, sAddDeleteToolbarSelector: ".dataTables_length" }); } ); </script> 

This is my updatedata.php file

 $editedColumn = $_POST['columnId']; $editedValue = $_POST['value']; $id = $_POST['id']; if ($editedColumn == '1') { $sql = "update Main set name='$editedValue' where id='$id'"; } elseif ($editedColumn == '2') { $sql = "update Main set dn='$editedValue' where id='$id'"; } elseif ($editedColumn == '3') { $sql = "update Main set dn1='$editedValue' where id='$id'"; } /* Update a record using information about id, columnName (property of the object or column in the table) and value that should be set */ $sql2 = "select name from Main where id = '$id';"; mysql_query($sql) or die(mysql_error()); echo "Update ok, reload to see changes"; 

I have an echo at the end, because it seems that a warning () is appearing somewhere, and the echo fills this notification with information.

I know about functions for redrawing the grid, for example fnDraw, but I don’t know how to implement it.

Answer 1

If you need to reload the AJAX data of your Datatable based on some event or something else, just use the fnReloadAjax method. You can find the documentation here .

Answer 2

To expand on this answer, you should return the value sent to the php file.

so in your case your value is in

 $editedValue = $_POST['value']; 

So you have to return (echo) this value back.

 echo $editedValue; 

Everything except this will be considered as an error message, so you see your warning, therefore, following this, the grid should be updated automatically, because now it considers that there is no error.

All of the above information can be found here.

As a note, it should be noted

 $sql2 = "select name from Main where id = '$id';"; 

not required, since a return value is already present.

Answer 3

instead...

asking you to update the page message, why not write code to reload the page so that the updated result appears on the screen after the data has been updated. Use for this.

 echo "<script>window.location='pageName.php'</script>"; 

Answer 4

First of all, I do not see

 "bServerSide": true 

install anywhere.

Try redrawing with oTable.fnDraw() or oTable.fnDraw(oTable.fnSettings())

When using ServerSide, you must return the sEcho variable that comes with the request (should be automatically added to your data table using the dataTable method). Otherwise, the update does nothing, because dataTable ignores the response of requests with a different sEcho than expected.

Verify dataTables configuration with debug bookmarklet: data debuggerTable

Answer 5

Why can't you call ajax call to fill the grid again? after each adding, deleting or updating operations?

You can do this by calling the same

 $('#example').dataTable({ "bJQueryUI": true, "bProcessing": true, "sAjaxSource": "/test/server_processing.php", "sPaginationType": "full_numbers", "aoColumns": [ { "bVisible": false }, null, null, null ] }); 

Answer 6

See http://code.google.com/p/jquery-datatables-editable/wiki/EditCell#PHP_Example your page should return the same value as you taken from the request. Otherwise, any other (other) value will be considered as an error message displayed in the pop-up window, and the update will be canceled.

Yovan

Answer 7

Could your updatedata.php script file fail to display the internal contents of the table, so you can execute AJAX if successful

 jQuery('TABLE#referencedTable').html(newData); 

Then the table with the latest data will be updated.