jQuery dataTables服务器端分页计数器是错误的

时间:2017-10-02 06:52:17

标签: javascript jquery laravel pagination datatables

我试图在每页显示2个项目,但是当我选中“下一步”按钮时,它被禁用,分页计数器只有1.这是一个截图:

enter image description here

我的数据库记录中只有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;

我在这里错过了什么吗?

感谢。

1 个答案:

答案 0 :(得分:0)

DataTables不能与Laravel的分页输出一起使用。

关于如何使用DataTables进行服务器大小处理,请查看this example