如何使用 Datatable 以 POST 类型传递请求正文数据以使用 Javascript 进行服务器端分页

Posted 2023-05-08

【中文标题】如何使用 Datatable 以 POST 类型传递请求正文数据以使用 Javascript 进行服务器端分页

【英文标题】：How to pass request body data in type POST using Datatable for Serverside pagination using Javascript

【发布时间】：2021-06-13 15:35:48

【问题描述】：

我正在尝试使用 Datatable 为 AJAX POST 请求实现服务器端分页

这是我的 javascript 代码，如果我将 JSON.stringify 用于数据字段，那么 api 将不会命中

$('#tripboard_table').DataTable(
    proccessing: true,
    serverSide: true,
    ajax: 
        "url": "http://localhost:5000/api/v1/trip/get-trip-list",
        "contentType": "application/json; charset=utf-8",
        "type": "POST",
        "dataType": "json",
        "data": 
            "driver_id": "",
            "franchise_id": login_data.franchise_id,
            "page_no": 0,
            "page_size": 10
        
    ,
    columns: [
         "data": "" ,
         "data": "reference_number" ,
         "data": "consignor_name" ,
         "data": "consignee_name" ,
         "data": "from_city" ,
         "data": "to_city" ,
         "data": "status" ,
         "data": "route_name" ,
         "data": "vehicle_number" ,
         "data": "driver_name" ,
         "data": "pickup_date" ,
         "data": "scheduled_delivery_date" ,
         "data": "total_money_allocated" ,
         "data": "total_money_released" 
    ]



);

如果我们从数据中删除 JSON.stringify 函数并按原样传递数据，那么 api 会被命中并显示错误警报

DataTables 警告：表 id=tripboard_table - Ajax 错误。更多 有关此错误的信息，请参阅http://datatables.net/tn/7

并且没有数据插入到表中。 在控制台中显示

方法不允许 请求的 URL 不允许该方法。

请为此提出解决方案..

【问题讨论】：

Method Not Allowed：您的 ajax URL 端点（由 base_url + get_trip_list 表示）似乎未配置为接受 POST 请求。也许它目前只为GET 请求配置。

您的请求中page_no 和page_size 的目的是什么？如果这是用于 DataTables 分页，则不需要，因为 DataTables 已经在其 serverSide 请求中 automatically includes pagination data （请参阅 start 和 length 参数）。

【参考方案1】：

使用它来添加到数据表的现有请求

function (d) 
                d.driver_id = "";
                d.franchise_id = login_data.franchise_id;
                d.page_no = 0;
                d.page_size = 10;
                return d;
            

https://datatables.net/manual/server-side#Sent-parameters

$('#tripboard_table').DataTable(
        proccessing: true,
        serverSide: true,
        ajax: 
            "url": "http://localhost:5000/api/v1/trip/get-trip-list",
            "contentType": "application/json; charset=utf-8",
            "type": "POST",
            "dataType": "json",
            "data": function (d) 
                d.driver_id = "";
                d.franchise_id = login_data.franchise_id;
                d.page_no = 0;
                d.page_size = 10;
                return JSON.stringify(d)
                );
            
        ,
        columns: [
             "data": "" ,
             "data": "reference_number" ,
             "data": "consignor_name" ,
             "data": "consignee_name" ,
             "data": "from_city" ,
             "data": "to_city" ,
             "data": "status" ,
             "data": "route_name" ,
             "data": "vehicle_number" ,
             "data": "driver_name" ,
             "data": "pickup_date" ,
             "data": "scheduled_delivery_date" ,
             "data": "total_money_allocated" ,
             "data": "total_money_released" 
        ]
    
    

    );

【讨论】：

自定义栏目模板请参考editor.datatables.net/examples/styling/template.html