Question

如何通过点击按钮或每分钟左右的定时器来刷新它？谢谢。

这是我点击“刷新”时的样子。它会清除数据，但不会重新加载。

这是View代码。

<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+。

您的代码无法正常工作的原因是您首先清除表格（销毁所有行），然后重绘表格。请注意，您没有重新加载数据，只需再次绘制表格。虽然可能有1.9版本的重新加载，但我会给你1.10+解决方案，这是你可能应该使用的。

要重新加载表格，只需致电TableName.ajax.reload()即可。请参阅文档here。

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

//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选项。或者，如果您只想下载并将其作为单个文件包含，请使用例如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以获取想法（其用于“重新加载时保留选择”，但显示如何使用按钮） - 文档here＆amp; here

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

2 个答案: