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

我最后有回声，因为它似乎会弹出一个警告（）某些地方，并且回声通过信息填充该警报。

我知道重绘网格的功能就像fnDraw一样，但是对于如何实现却毫无头绪。

Answer 1

如果您需要根据事件或某事重新加载Datatable的AJAX数据，只需使用fnReloadAjax方法即可。您可以找到文档here。

Answer 2

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

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

$editedValue = $_POST['value'];

所以你应该返回（回显）那个值。

echo $editedValue;

除此之外的任何内容都将被视为错误消息，这就是您看到警报的原因，所以通过跟随它，网格应该自动刷新，因为它现在认为没有错误。

以上所有信息都可以找到here

作为旁注，

$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会忽略具有不同预期的sEcho的请求响应。

使用调试bookmarklet检查dataTables配置：dataTable debugger

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您的页面应返回与您从请求中获取的值相同的值。否则，任何其他（不同）值将被视为错误消息，在弹出窗口中显示并刷新将被取消。

约万

Answer 7

难道你不能让你的updatedata.php脚本回显出表的内部内容，这样你就可以在AJAX上成功运行以下

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

然后，这将使用最新数据更新您的表格。

jQuery DataTables，更新后刷新网格（服务器端处理）

7 个答案: