在 ajax 调用中使用新参数重新加载数据表

Question

我在我的应用程序中添加了一个带有 AJAX 调用的数据表。它工作正常，但我需要添加一些自定义过滤器。

这是我的代码

<table id="mydatatable">
    <thead>
        <tr>
            <td>Name</td>
            <td>Age</td>
            <td>Email</td>
        </tr>
    </thead>
</table>
<script>
    $("#mydatatable").DataTable({
        "ajax": {
            url: "ajax.php?action=datatable",
            "type": 'POST',
        },
        "order": [[2, "desc"]],
    });
</script>

现在我在选择框更改上添加了年龄 >15、>25、>35 的自定义选择框，我需要进行 AJAX 调用并刷新数据表

Answer 1

您可以使用ajax.data 选项将选择框中的数据提供给您的ajax.php 脚本。然后使用ajax.reload() API 方法在选择框的值发生变化时重新加载数据。

更改您的 ajax.php 以根据提供的 age 请求参数过滤数据。

例如：

$("#mydatatable").DataTable({
    "ajax": {
        "url": "ajax.php?action=datatable",
        "data": function(data){
           data.age = $('#select-age').val();
        },
        "type": 'POST',
    },
    "order": [[2, "desc"]],
});

// Handle event when select box value changes
$('#select-age').on('change', function(){
   // Reload data 
   $("#mydatatable").DataTable().ajax.reload();
});