📌  相关文章
📜  datatables ajax 重新加载 - Javascript (1)

📅  最后修改于: 2023-12-03 14:40:37.972000             🧑  作者: Mango

DataTables Ajax 重新加载

在使用 DataTables 插件时，我们经常需要根据不同的条件重新加载表格数据。其中一种方法是使用 Ajax。

实现
var table = $('#example').DataTable({
    ajax: 'data.json'
});

$('#reload').on('click', function(){
    table.ajax.reload();
});

以上代码创建了一个 DataTables 的实例 table，并且设置了加载数据的 Ajax 请求为 'data.json'。

当点击页面上的一个按钮时，我们可以调用 table.ajax.reload() 方法来重新加载表格数据。

参数

table.ajax.reload() 方法可以接受以下参数：

  • callback：重新加载完成后的回调函数。该函数会在重新加载之后的 draw 事件之前被调用。

  • resetPaging：布尔类型，表示是否重置页面编号。如果为 true，那么重新加载后的表格会回到第一页。

  • drawType：字符串类型，可选值为 'full-hold'、'full-reset'、'page'。用于指定重新加载表格的方式。

其中，resetPaging 默认为 true，drawType 默认为 'full-reset'。

示例

以下示例演示了如何使用 Ajax 重新加载表格数据：

<!DOCTYPE html>
<html>
<head>
    <title>DataTables Ajax Reload</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.css"/>
</head>
<body>
    <table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <button id="reload">Reload</button>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.js"></script>
    <script type="text/javascript">
        var table = $('#example').DataTable({
            ajax: 'data.json'
        });
    
        $('#reload').on('click', function(){
            table.ajax.reload();
        });
    </script>
</body>
</html>

在以上示例中，我们有一个按钮 'Reload'，点击该按钮会重新加载表格数据。数据源为 'data.json'。

结论

通过上述示例和说明，我们可以看出使用 DataTables Ajax 重新加载表格数据是相当简单的。

这种方法还有一个好处：当你使用原生 Ajax 的时候，你可以自由地控制请求的参数和返回数据，从而实现更为灵活的前端页面效果。

如果您正在寻找一个强大的表格插件，那么 DataTables 无疑是您的首选之一。无论您是在使用传统的数据加载方法，还是在使用 Ajax，DataTable 都可以通过简单的 API 实现各种各样的功能。