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

Question

I am trying to implement ServerSide pagination using Datatable for AJAX POST request

here is my Javascript Code, if I use JSON.stringify for data field then api won't hit

$('#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" }
    ]



});

if we remove JSON.stringify function from data and passed data as it is then api gets hit and showing error alert that

DataTables warning: table id=tripboard_table - Ajax error. For more information about this error, please see http://datatables.net/tn/7

and no data is inserted in table. In console it shows

Method Not Allowed The method is not allowed for the requested URL.

Please suggest solution for this..

Answer 1

Use this for adding to existing request of data table

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" }
        ]
    
    

    });