jQuery dataTables服務器端分頁計數器錯誤

Question

我試圖每頁顯示2個項目，但是當我單擊“下一步”按鈕時，它被禁用並且分頁計數器僅為1。這是屏幕截圖：

我的數據庫記錄中只有3個項目，並且嘗試每頁顯示2個項目。 因此，分頁計數器應顯示2並且不應禁用“下一步”按鈕。

這是我的代碼：

    $('#transactions').DataTable({
            dom: 'Bfrtip',
            "processing" : true,
            "serverSide" : true,
            "ajax" : {
                url: "/reports/ajax-overall",
                dataSrc: function(json){
                    json['recordsTotal'] = json.total;
                    json['recordsFiltered'] = json.per_page;
                    json['draw'] = 1;
//                    return json;
                    return json.data;
                }
            },
            "columns": [
                { "data": "created_at" },
                { "data": "order_number" },
                { "data": "customer_name" },
                { "data": "payment_method" },
                { "data": "discount" },
                { "data": "tax" },
                { "data": "total_payable_amount" },
                { "data": "customer_paid_amount" },
                { "data" : "" }
            ],
            "columnDefs" : [
                {
                    "render" : function(data,type,row){
                        console.log(row.id);
                        return "<a href='#' class='view-order-details' id='order-details-"+row.id+"'>View Order Details</a>";
                    },
                    "targets" : 8
                },
                {
                    "render" : function(data,type,row){
                        let total = row.total_payable_amount;
                        total = parseFloat(total);
                        total = total.toFixed(2);
                        return numberWithCommas(total);
                    },
                    "targets" : 6
                },
                {
                    "render" : function(data,type,row){
                        let paid_amount = row.customer_paid_amount;
                        paid_amount = parseFloat(paid_amount);
                        paid_amount = paid_amount.toFixed(2);
                        return numberWithCommas(paid_amount);
                    },
                    "targets" : 7
                }
            ],
            buttons: [
                {
                    extend: 'pdf',
                    footer: false,
                    exportOptions: {
                        columns: "thead th:not(.noExport)"
                    }
                },
                {
                    extend: 'csv',
                    footer: false,
                    exportOptions: {
                        columns: "thead th:not(.noExport)"
                    }
                },
                {
                    extend: 'excel',
                    footer: false,
                    exportOptions: {
                        columns: "thead th:not(.noExport)"
                    }
                }
            ]
        });

這是來自服務器的示例響應：

{
    "current_page": 1,
    "data": [
        {
            "id": 2,
            "created_at": "2017-10-01 15:34:30",
            "order_number": "1001",
            "payment_method": "Cash",
            "customer_name": "Michael Jordan",
            "total_payable_amount": "1250.0000",
            "total": "1250.0000",
            "discount": null,
            "tax": null,
            "customer_paid_amount": "1500.0000"
        },
        {
            "id": 3,
            "created_at": "2017-10-01 14:38:47",
            "order_number": "1002",
            "payment_method": "Cash",
            "customer_name": "Kobe Bryant",
            "total_payable_amount": "1250.0000",
            "total": "1250.0000",
            "discount": null,
            "tax": null,
            "customer_paid_amount": "1500.0000"
        }
    ],
    "from": 1,
    "last_page": 2,
    "next_page_url": "http://127.0.0.1:8080/api/reports/all/2017-10-01/2017-10-01?page=2",
    "path": "http://127.0.0.1:8080/api/reports/all/2017-10-01/2017-10-01",
    "per_page": 2,
    "prev_page_url": null,
    "to": 2,
    "total": 3
}

這是我的Laravel代碼：

$orders = DB::table("orders")
        ->select(
            "orders.id",
            "orders.created_at",
            "orders.order_number",
            "order_payments.payment_method",
            "order_payments.customer_name",
            "order_payments.total_payable_amount",
            "order_payments.total",
            "order_payments.discount",
            "order_payments.tax",
            "order_payments.customer_paid_amount"
        )
        ->leftJoin("order_payments","order_payments.order_id","=","orders.id")
        ->where('orders.created_at','>=',$start_date)
        ->where('orders.created_at','<=',$end_date)
        ->where("orders.has_paid","=",$has_paid)
        ->paginate(2);
    return $orders;

我在這里想念什么嗎？

謝謝。

Answer 1

DataTables無法與Laravel分頁的輸出一起使用。

查看此示例 ，了解如何使用DataTables執行服務器大小的處理