javascript - 数据表(https ://datatables.net/)分页参数与服务器端不匹配

Question

我正在尝试将数据表与现有的 REST API 集成，但遇到了问题:数据表中分页的参数名称是 start 和 length，而 Rest api 中的名称是 page 和 size (API URL 类似于 /user?page=1&size=10)，并且我无法更改 api 中的参数名称。有没有办法可以转换这两个参数？

Answer 1

您可以使用数据表适配器来自定义您的请求 URL。

function dataTableAdapter(sSource, aoData, fnCallback, oSettings) {

    var page, size;
    var serverDataConverter = function () { return { "0": "No data converter implemented" } };
    for (var i = 0; i < aoData.length; i++) {
        if (aoData[i].name == "iDisplayStart") {
            page= aoData[i].value;
        }
        else if (aoData[i].name == "iDisplayLength") {
            size= aoData[i].value;
        }
    else if (aoData[i].name == "sEcho") {
            echo = aoData[i].value;
        } 
    else if (aoData[i].name == "serverDataConverter") {
            // user provided function to convert the data coming back from the server.
            serverDataConverter = aoData[i].value;
        }     
    }

    var data=
     {
        page:page,
    size:size,
        // construct your request data here
     };


    $.ajax({
        url: sSource,
        type: "POST",
        data: data
    }).success(function (response) { dataTableCallback(response, fnCallback, serverDataConverter  echo ); });

}

function dataTableCallback(pageData, datatable_callback, serverDataConverter, echo ) {
    if (!pageData) return;

    var reply = new Object();
    reply.sEcho = echo;
    reply.iTotalRecords = pageData.TotalItems;
    reply.iTotalDisplayRecords = pageData.TotalFilteredItems;
    reply.aaData = new Array();

    if (pageData.Page) {
        for (var i = 0; i < pageData.Page.length; i++) {
           // You need to push your data in the right format here.
           reply.aaData.push(serverDataConverter(pageData.Page[i]));
        }
    }

    datatable_callback(reply);
}

您可以通过调用数据表来实现这一点

$('#id').DataTable({
   "fnServerData": dataTableAdapter,
   // other settings goes here
});