jquery datatable ajax附加不需要的查询参数答案

【问题标题】：jquery datatable ajax appending unwanted query paramsjquery datatable ajax附加不需要的查询参数
【发布时间】：2020-09-14 10:16:58
【问题描述】：

我正在使用服务器端分页实现 jquery DataTable。参考下面的代码sn-p -

脚本

$(async function() {
    $('#registry_table').DataTable({
        serverSide: true,
        ajax: {
            url: 'localhost:3000/provenance/registries',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': 'Bearer ' + localStorage.getItem("token")
            },
            params: {
                page: 0,
                per_page: 5
            }
        },
        language: {
            searchPlaceholder: "Search...",
            search: "",
            lengthMenu: "_MENU_ &nbsp;items/page"
        }
    });
});

HTML

<table class="table table-striped mg-b-0" id="registry_table">
    <thead>
        <tr>
            <th class="text-left">#</th>
            <th class="text-left">Name</th>
            <th class="text-left">Created on</th>
            <th class="text-left">Transaction</th>
            <th class="text-center">Action</th>
        </tr>
    </thead>
</table>

但是当调用 REST API 时会生成错误的 URL

http://localhost:3000/provenance/registries?draw=1&columns%5B0%5D%5Bdata%5D=0&columns%5B0%5D%5Bname%5D=&columns%5B0%5D%5Bsearchable%5D=true&columns%5B0%5D%5Borderable%5D=true&columns%5B0%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B0%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B1%5D%5Bdata%5D=1&columns%5B1%5D%5Bname%5D=&columns%5B1%5D%5Bsearchable%5D=true&columns%5B1%5D%5Borderable%5D=true&columns%5B1%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B1%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B2%5D%5Bdata%5D=2&columns%5B2%5D%5Bname%5D=&columns%5B2%5D%5Bsearchable%5D=true&columns%5B2%5D%5Borderable%5D=true&columns%5B2%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B2%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B3%5D%5Bdata%5D=3&columns%5B3%5D%5Bname%5D=&columns%5B3%5D%5Bsearchable%5D=true&columns%5B3%5D%5Borderable%5D=true&columns%5B3%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B3%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B4%5D%5Bdata%5D=4&columns%5B4%5D%5Bname%5D=&columns%5B4%5D%5Bsearchable%5D=true&columns%5B4%5D%5Borderable%5D=true&columns%5B4%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B4%5D%5Bsearch%5D%5Bregex%5D=false&order%5B0%5D%5Bcolumn%5D=0&order%5B0%5D%5Bdir%5D=asc&start=0&length=10&search%5Bvalue%5D=&search%5Bregex%5D=false&_=1600077609184

如您所见，它没有传递 page 和 per_page 查询参数。并且不确定如何将所有其他参数添加到 URL。

【问题讨论】：

标签： datatables pagination server-side query-parameters

【解决方案1】：

将params 键更改为data 并返回我想用URL 作为JSON 发送的参数。

更新脚本：

ajax: {
    url: `${self.$provenance.defaults.baseURL}/provenance/registries`,
    headers: {
        'Content-Type': 'application/json',
        'Authorization': 'BWS ' + localStorage.getItem("token")
    },
    data: () => {
        return {page: 0, per_page: 5};
    },
    dataSrc: 'registries'
}

它删除了所有不需要的标题，除了 _

http://localhost:3000/provenance/registries?page=0&per_page=5&_=1600082235692

【讨论】：