jQuery DataTable 参数传递 - Javascript

jQuery DataTables 是一个非常流行的用于处理表格数据的 JavaScript 库。它提供了许多功能，使得处理大量数据变得更加容易和高效。其中，参数传递是十分重要的，只有正确传递参数才能获取所需的表格数据。

传递参数

在使用 jQuery DataTable 时，有两种传递参数的方式：URL 传参和 Ajax 传参。

URL 传参

URL 传参是一种直接在 URL 中传递参数的方式，例如：

http://example.com/my-page?param1=value1&param2=value2

在这个例子中，"param1" 和 "param2" 是参数名，"value1" 和 "value2" 是对应的参数值。可以将这些参数传递给 DataTables。

$(document).ready(function() {
    $('#my-table').DataTable( {
        "ajax": "/mypage/data.json?param1=value1&param2=value2",
        "columns": [
            { "data": "name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "salary" }
        ]
    } );
} );

Ajax 传参

Ajax 传参是一种使用 Ajax 请求从服务器获取数据的方式。这种方式通常比 URL 传参更加灵活，因为它允许在每次请求中动态更改参数值。

$(document).ready(function() {
    $('#my-table').DataTable( {
        "ajax": {
            "url": "/mypage/data.json",
            "data": {
                "param1": "value1",
                "param2": "value2"
            }
        },
        "columns": [
            { "data": "name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "salary" }
        ]
    } );
} );

在这个例子中，"url" 指定了服务器端的数据源，而 "data" 选项允许在每次请求中动态更改参数值。

传递多个参数

当需要传递多个参数时，可以将它们作为 JavaScript 对象传递给 "data" 选项。例如：

$(document).ready(function() {
    var queryParams = {
        "param1": "value1",
        "param2": "value2",
        "param3": "value3"
    };

    $('#my-table').DataTable( {
        "ajax": {
            "url": "/mypage/data.json",
            "data": queryParams
        },
        "columns": [
            { "data": "name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "salary" }
        ]
    } );
} );

参考链接

• jQuery DataTables 官方文档