jQuery DataTables，更新后刷新網格（服務器端處理）

Question

好的，我一直在研究一個與DataTables一起使用的小項目。 它是一個jQuery網格插件，我現在已經完成了大部分功能。 我似乎無法繞過的唯一一件事就是在AJAX Inline編輯中刷新網格。

<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>

這是我的updatedata.php文件

$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";

我最后有回聲，因為它似乎彈出一個警報（）一些地方和回聲用信息填充警報。

我知道像fnDraw那樣重繪網格的功能，但是如何實現卻毫無頭緒。

Answer 1

如果您需要根據事件或其他內容重新加載Datatable的AJAX數據，只需使用fnReloadAjax方法。 你可以在這里找到文檔。

Answer 2

要擴展上面的答案，您應該返回發送到php文件的值。

所以在你的情況下你的價值是

$editedValue = $_POST['value'];

所以你應該返回（回顯）那個值。

echo $editedValue;

除此之外的任何內容都將被視為錯誤消息，這就是您看到警報的原因，因此，通過執行此操作，網格應自動刷新，因為它現在認為沒有錯誤。

以上所有信息均可在此處找到

作為旁注這個

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

因為要返回的值已經存在，所以不需要。

Answer 3

代替...

要求刷新頁面消息，為什么不編寫代碼來重新加載頁面，以便在更新數據后更新的結果出現在屏幕上。 這樣做是有用的。

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

Answer 4

首先，我沒有看到

"bServerSide": true

隨處設置。

嘗試使用oTable.fnDraw()或oTable.fnDraw(oTable.fnSettings())重繪

使用sEcho處理時， 必須返回請求附帶的sEcho變量（應由dataTable自動添加到dataTable中）。 否則刷新不會執行任何操作，因為dataTable會忽略具有與預期不同的sEcho的請求響應。

使用debug bookmarklet檢查dataTables配置： dataTable調試器

Answer 5

為什么不能再次調用ajax調用來填充網格？ 每次添加，刪除或更新操作后？

你可以通過調用它來做到這一點

$('#example').dataTable({

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

Answer 6

難道你不能讓你的updatedata.php腳本回顯出表的內部內容，這樣你就可以在AJAX上成功運行以下內容

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

然后，這將使用最新數據更新您的表。

Answer 7

請參閱http://code.google.com/p/jquery-datatables-editable/wiki/EditCell#PHP_Example，您的頁面應返回與您從請求中獲取的值相同的值。 否則，任何其他（不同）值將被視為錯誤消息，在彈出窗口中顯示並刷新將被取消。

約萬