javascript - 如何在ajax上重新加载数据表并触发新的分页

Question

首先，我在这里使用了javascript示例，我掌握了基础并自行修改了它。

https://datatables.net/examples/data_sources/server_side

我有几个问题需要处理，它们是:

1. 一旦数据表在页面加载时加载，它就会成功检索默认数据，但它不会应用正确的分页和长度 View 。假设我有 100 个默认数据，它们全部显示出来，而不是按 dataTable 的默认长度 10 进行切片。同样在分页中，它会生成 1~10 个分页按钮，但它不起作用，因为所有 100 条记录已经显示在第 1 页中。
2. 使用搜索后，它成功检索到正确的数据，但 dataTable 并未向其呈现新的数据集，这与上面的示例相矛盾。

这是我的数据表脚本:

    $('#invoice-history').DataTable({
        processing: true,
        serverSide: true,
        searchDelay: 1000,
        ajax: {
            url: '/stock-sales/search',
            type: 'POST',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        },
        columns: [
            { data: 'ss_id' },
            {
                render: function ( data, type, row, meta ) {
                    return  row.patient_last_name + ', ' + row.patient_first_name;
                }
            },
            { data: 'grandtotal_current' },
            { data: 'created_at' },
            {
                render: function ( data, type, row, meta ) {
                    return  '<a href="/reports/invoice/' + row.ss_id + '/print" target="_blank" class="btn btn-primary btn-xs btn-block"><i class="fa fa-print"></i> Print</a>';
                }
            },
            {
                render: function ( data, type, row, meta ) {
                    return  '<a href="/stock-sales/return/' + row.ss_id + '" class="btn btn-danger btn-xs btn-block"><i class="fa fa-undo"></i> Return</a>';
                }
            }
        ],
        columnDefs: [ {
              targets: [ 4, 5 ],
              orderable: false
        } ],
        language: {
            emptyTable: '<center><span class="label label-danger">NO INVOICE RECORDS FOUND</span></center>',
            zeroRecords: '<center><span class="label label-danger">NO MATCHING RECORDS FOUND</span></center>'
        },
        order: [[ 3, 'desc' ]]
    });

在服务器端我使用 Laravel 框架:

public function search(Request $request)
{
    $transactions = StockSales::getAllByDepartment(Auth::user()->employee->department->id, $request->search['value']);

    return array(
        "draw" => 1,
        "recordsTotal" => count($transactions),
        "recordsFiltered" => count($transactions),
        "data" => $transactions
    );
}

我不想在过滤之前获取原始记录总数，所以我将其设置为相同，我不认为这与结果数据的分页有关，因为我也尝试过硬编码更高的值记录总值(value)。

编辑:

实际上通过从ajax返回绘制整数来使搜索重绘数据表

public function search(Request $request)
{
    $transactions = StockSales::getAllByDepartment(Auth::user()->employee->department->id, $request->search['value']);

    return array(
        "draw" => $request->draw, //from fixed 1
        "recordsTotal" => count($transactions),
        "recordsFiltered" => count($transactions),
        "data" => $transactions
    );

}

Answer 1

尝试在数据表初始化中使用“pageLength”属性来指定每页的行数。

"pageLength": 10,

服务器端:您需要使用ajax请求传递的“length”和“start”参数进行服务器端分页。看看所有的parameters由服务器端处理中的数据表使用。

$limit = $request->length;
$start = $request->start;

因此，您可以将 Controller 方法微调为:

$transactions = StockSales::getAllByDepartment(Auth::user()->employee->department->id,
        $request->search['value'])
        ->offset($start)
        ->limit($limit);

return array(
    "draw" => $request->draw, //from fixed 1
    "recordsTotal" => count($transactions),
    "recordsFiltered" => count($transactions),
    "data" => $transactions
);