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

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

问题描述:

好吧,我一直在研究一个与DataTables一起使用的小项目。它是一个jQuery网格插件,我现在获得了大部分功能。我似乎无法包住头脑的唯一事情是在AJAX内联编辑中刷新网格。jQuery DataTables,更新后的刷新网格(服务器端处理)

<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那样重绘网格的功能,但是我很无能,因为它不知道如何实现。

+0

我遇到了像你一样的:)并且等着诀窍。 – sophie 2012-06-16 18:53:46

+0

小心注射。 – 2012-09-27 09:40:23

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

约万

+0

你是什么意思?你的页面应该返回与你从请求中获得的值相同的值。你能否更清楚地解释一下这个问题?因为我也遇到了这个问题,并且仍然停留在这个问题上。谢谢 – sophie 2012-06-19 06:16:53

要在上面的回答扩大,您应该返回您发送到PHP文件中的值。

所以你的情况你的价值是

$editedValue = $_POST['value']; 

所以,你应该返回(回波),该值回。除此之外

echo $editedValue; 

什么东西都可以被视为这就是为什么你看到你的一个警示的错误消息, 所以按照这个网格将自动刷新,因为它现在认为没有错误。

所有上述信息可以发现here

作为一个侧面说明这个

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

就不再需要为价值回归已经存在。

的,而不是...

要求刷新页面的消息,为什么不ü写代码,以便更新的结果数据被更新后,屏幕上会出现重新加载页面。要这样使用。

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

'window.location.reload()' – 2012-09-01 22:51:55

你不能让你的updatedata.php脚本回声出表内的内容,这样一来就可以了,对AJAX成功运行以下

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

那么这将更新表格与最新的数据。所有的

+1

该表由DataTables插件填充,该插件由PHP提供数据(可能为JSON)。 OP显然是在DataTables中寻找API来触发更新。 – 2012-09-01 22:51:29

首先我没有看到

"bServerSide": true 

设置任何地方。

尝试oTable.fnDraw()oTable.fnDraw(oTable.fnSettings())

重绘当您使用服务器端的处理,你必须返回与要求来(应自动dataTable中被添加到您的dataTable)sEcho变量。否则,刷新不会执行任何操作,因为dataTable将忽略具有不同sEcho的请求响应。

检查你的数据表使用调试书签配置:dataTable debugger

你为什么不能调用Ajax调用的再次填充网格?每次添加,删除或更新操作之后?

你可以做到这一点,通过调用相同

$('#example').dataTable({ 

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

如果您需要重新加载基于事件或某事的DataTable的AJAX数据,只需使用fnReloadAjax方法。你可以找到文档here