Question

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

我在MVC 4.0 Razor中使用jquery模型弹出窗口进行addnew和更新记录，只使用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不会刷新。

请帮助我。

Answer 1

将数据表初始化包装到函数中，例如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();
});

这是一个演示 - ＆gt;的 http://jsfiddle.net/cxe5L/

避免缓存问题
jQuery dataTables已将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

在AJAX请求上设置cache : false时，这与jQuery基本相同。

Answer 2

location.reload（）将刷新页面内容和您的

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

再次执行而不是获取最新的更改。查看天气数据库是否有新记录。

如何刷新数据表列表jquery？

2 个答案: