jQuery DataTables，更新后刷新网格(服务器端处理)

Question

好的，我一直在做一个与DataTables一起使用的小项目。这是一个jQuery网格插件，我现在已经实现了大部分功能。我唯一无法理解的是在AJAX内联编辑上进行网格刷新。

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

我在结尾有回声，因为它似乎在某个地方弹出了一个alert（），回声用信息填充了这个警报。

我知道像fnDraw这样重绘网格的函数，但对如何实现一无所知。

Answer 1

如果需要根据事件或其他内容重新加载Datatable的AJAX数据，只需使用fnReloadAjax方法。你可以在这里找到文档。

Answer 2

要扩展上述答案，您应该将发送的值返回到php文件。

所以在你的情况下，你的价值是

$editedValue = $_POST['value'];

因此，您应该返回（echo）该值。

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()) 重新绘制

当您使用ServerSide处理时，必须返回请求附带的sEcho变量（应通过dataTable自动添加到您的dataTable）。否则，刷新将不起任何作用，因为dataTable会忽略具有与预期不同的sCho的请求响应。

使用调试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

请参阅http://code.google.com/p/jquery-datatables-editable/wiki/EditCell#PHP_Example您的页面应该返回与您从请求中获取的值相同的值。否则，任何其他（不同）值都将被视为错误消息，显示在弹出窗口中，刷新将被取消。

Jovan

Answer 7

你不能让updatedata.php脚本回显表的内部内容吗？这样，在AJAX成功时，你可以运行以下

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

这将使用最新数据更新您的表。