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 的分页输出一起工作。

查看this example，了解如何使用 DataTables 进行服务器大小的处理