fnDraw 清除但不重新加载 DataTable Datasrc MVC JSON Api

Question

我怎样才能让它在点击按钮时或每隔一分钟左右在计时器上刷新一次？谢谢。

这是我点击 "Refresh" 时的样子。它清除数据但不重新加载它。

这是查看代码。

<h2>Fixtures</h2>

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

    <table id="fixtures" class="table table-bordered table-hover">
        <thead>
            <tr>
                <th>Fixture</th>
                <th>Market</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>

    @section scripts
{
        <script>
            $(document).ready(function () {
                $("#fixtures").DataTable({
                    ajax: {
                        url: "/api/fixtures",
                        dataSrc: ""
                    },
                    columns: [
                        {
                            data: "eventName",
                        },
                         {
                            data: "marketName"
                        }
                    ]
                });
                var oFixtureTable = $('#fixtures').dataTable();

                $("#Refresh").click(function (e) {
                    oFixtureTable.fnClearTable(0),
                    oFixtureTable.fnDraw();
                });
            });
        </script>
    }

编辑：按照下面的建议简单地将 DataTable 更改为变量赋值会导致 DataTable 根本不呈现（无论是否有任何额外的刷新编码）。

    <script>
            $(document).ready(function () {
                //$("#fixtures").DataTable({
                var FixtureTable = $("fixtures").DataTable({
                    ajax: {
                        url: "/api/fixtures",
                        dataSrc: ""
                    },

Answer 1

首先，匈牙利符号（fnFoo、oTable、aBar）在从 Datatables 1.9 到 1.10 的过程中已经过时了。由于您有一些选项不使用该表示法，因此我假设您使用的是 1.10+。

你的代码不能按你想要的方式工作的原因是你首先清除 table （销毁所有行）然后 redraw table .请注意，您并不是 重新加载 数据，只是再次绘制 table。虽然可能有 1.9 版本的 reload，但我将为您提供 1.10+ 的解决方案，您可能应该使用它。

要重新加载 table，只需调用 TableName.ajax.reload()。请参阅文档 here。

另一个需要注意的细节是您正在初始化数据table，然后将其分配给一个变量，但您可以而且应该一步完成。而不是：

//Make sure you use the capital D, lowercase creates a table, uppercase returns an API object
$("fixtures").DataTable({
    //.......
});
var oFixtureTable = $("fixtures").dataTable();

你应该有：

//Might as well get rid of the 'o' (though you don't have to)
var FixtureTable = $("fixtures").DataTable({
    //.......
});
//Don't need the other assignment now.

然后您将刷新方法的内部更改为：

FixtureTable.ajax.reload();

Answer 2

如果您只想要一个刷新按钮，使用 buttons option from the download builder. Or if you just want to download and include it as a single file, use e.g https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js

可能更容易

那么你可以使用：

var Fixturetable = $("#fixtures").DataTable({
        ajax: { 
           // ajax setup 
        },
        dom: 'Bfrtip',
        columns: [
            {
                // your columns
            }
        ],
        buttons: [
            {
                text: 'Refresh Table',
                action: function () {
                   Fixturetable.ajax.reload();
                }
            }
        ]
     });

另见示例 here to get idea (its for 'Retain selection on reload' but shows how to use button) - documentation here & here。

fnDraw 清除但不重新加载 DataTable Datasrc MVC JSON Api

fnDraw clearing but not reloading DataTable Datasrc MVC JSON Api

asp.net-mvc

json

asp.net-ajax

datatables