php - jQuery DataTables, refresh grid after update (server-side processing) - Stack Overflow

admin管理员组

文章数量:1355658

Ok, I've been working on a small project for use with DataTables. Its a jQuery grid plugin and Ive got most the functionality working as intended now. The only thing I cant seem to wrap my head around is making the grid refresh 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 the echo at the end because it seems to pop a alert() some where and the echo fills that alert with info.

I know of the functions for redrawing the grid like fnDraw but am clueless as how to implement.

Ok, I've been working on a small project for use with DataTables. Its a jQuery grid plugin and Ive got most the functionality working as intended now. The only thing I cant seem to wrap my head around is making the grid refresh 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 the echo at the end because it seems to pop a alert() some where and the echo fills that alert with info.

I know of the functions for redrawing the grid like fnDraw but am clueless as how to implement.

• php
• javascript
• jquery

Share Improve this question Follow asked Feb 13, 2012 at 19:42 KelsoKelso 38744 silver badges1313 bronze badges 1

• I met the same like you :) and waiting the trick. – sophie Commented Jun 16, 2012 at 18:53

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 2

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

To expand on the above answer, You should return the value you send to the php file.

so in your case your value is in

$editedValue = $_POST['value'];

So you should return (echo) that value back.

echo $editedValue;

Anything other than that will be treated as a error message which is why you see your alert, so by following this the grid should refresh automatically as it now believes there is no error.

All above information can be found here

As a side note this

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

would not be needed as the value to return is already present.

instead of...

asking to refresh the page message, why don't u write code to reload the page so the updated result appears on the screen after the data is been updated. To Do so use.

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

First of all i dont see

"bServerSide": true

set anywhere.

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

When you are using ServerSide processing you must return sEcho variable that came with request(should be added to your dataTable automatically by dataTable). Otherwise refresh does nothing because dataTable ignores requests response with different sEcho than expected.

Check you dataTables config using debug bookmarklet: dataTable debugger

Why can't you call the ajax call for populating the grid once again? after each add,delete or update operations?

You can do that, by calling the same

$('#example').dataTable({

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

See http://code.google./p/jquery-datatables-editable/wiki/EditCell#PHP_Example your page should return the same value as the one you have taken from request. Otherwise any other (different) value will be considered as error message, displayed in popup and refresh will be canceled.

Jovan

Couldn't you make your updatedata.php script echo out the inner contents of the table, this way you can, on AJAX success run the following

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

This will then update your table with the latest data.

本文标签：