如何刷新数据表列表

How to refresh datatable list jquery?

本文关键字：数据表 列表 刷新 何刷新      更新时间：2023-09-26

我使用DataTable Jquery绑定记录列表。我面临以下问题。

我使用jquery模型弹出添加新的和更新记录在MVC 4.0 Razor没有提交按钮，只使用ajax功能。当我点击"保存"按钮，我想更新列表与最新的变化，但它不能。我的代码如下:

为列表绑定的索引页。

<script type="text/javascript">
        $(document).ready(function () {
            if (fnServerObjectToArray) {
                var oTable = $('.datatable').dataTable({
                    "bJQueryUI": true,
                    "sScrollX": "",
                    "bSortClasses": false,
                    "aaSorting": [[0, 'asc']],
                    "bAutoWidth": true,
                    "bInfo": true,
                    "sScrollY": "100%",
                    "sScrollX": "100%",
                    "bScrollCollapse": true,
                    "sPaginationType": "full_numbers",
                    "bRetrieve": true,
                    "bProcessing": true,
                    "sAjaxSource": $('.datatable').attr('data'),
                    "aoColumns": [
                                  { sType: 'string' },
                                  { sType: 'string' },
                                  { sType: 'string' },
                                  { sType: 'string' },
                                  { bSortable: false }
                    ],
                    "fnServerData": fnServerObjectToArray()
                });
            }
        });
        fnServerObjectToArray = function () {
            return function (sSource, aoData, fnCallback) {
                $.ajax({
                    "dataType": 'json',
                    "type": "GET",
                    "url": sSource,
                    "data": aoData,
                    "success": function (json) {
                        var a = [];
                        for (var i = 0, iLen = json.aaData.length; i < iLen; i++) {
                            var inner = [];
                            inner.push(json.aaData[i].Name);
                            inner.push(json.aaData[i].Price);
                            inner.push(json.aaData[i].Phone);
                            inner.push(json.aaData[i].Email);
                            inner.push("<a title='Edit Place' class='EditDialogPlacesToStay' href='/placetostay/" + json.aaData[i].Id + "/edit'><img src='/Content/images/icons/small/grey/pencil.png' title='Edit' /></a> <a class='DeleteConfirm' href='/placetostay/" + json.aaData[i].ID + "/delete'><img src='/Content/images/icons/small/grey/trashcan.png' title='Delete' /></a>");
                            a.push(inner);
                        }
                        json.aaData = a;
                        fnCallback(json);
                    },
                    "error": function (error) {
                    }
                });
            }
        }
    </script>

在成功函数中保存按钮时，我调用location.reload()。

但是我不能绑定最新更改的记录意味着List没有刷新。

请帮帮我。

将数据表初始化封装到函数中，如initDataTable()，并将选项 bDestroy 添加到设置中:

function initDataTable() {
   if (fnServerObjectToArray) {
      var oTable = $('.datatable').dataTable({
         "bDestroy" : true, //<-- add this option
         "bJQueryUI" : true,
         ...
         //anything as above
      });
   }
}
$(document).ready(function () {
  initDataTable();
});

当你想刷新/重新加载时，比如点击一个按钮:

<button id="refresh">Refresh</button>

$("#refresh").click(function() {
   initDataTable();
});

这是一个演示-> http://jsfiddle.net/cxe5L/

避免缓存问题
jQuery数据表将cache : true硬编码到它的ajax调用中。有"sAjaxSource": $('.datatable').attr('data')。我假设data持有外部资源的路径，如/data/getdata.asp或类似的?向该资源添加时间戳作为参数，如

sAjaxSource : $('.datatable').attr('data')+'?param='+new Date().getTime()

所以sAjaxSource变成了表单

/data/getdata.asp?param=1401278688565

这与jQuery在ajax请求上设置cache : false时所做的基本相同。

location.reload()将刷新页面内容和您的

 $(document).ready(function () {}

正在再次执行，而不是获得最新的更改。检查数据库是否有新记录

相关文章：