如何在 ajax 上重新加载 dataTables 并触发新的分页

Question

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

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

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

1. 一旦数据表在页面加载时加载，它会成功检索默认数据，但它没有应用正确的分页和长度视图。假设我有 100 个默认数据，它们全部显示出来，而不是按 10 切片，这是 dataTable 的默认长度。同样在分页中，它会生成 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
    );
}

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

编辑：

实际上是通过从 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

这里的问题是你误解了服务器端处理serverSide: true由于https://datatables.net/examples/data_sources/server_side

启用服务器端处理后，DataTables 执行的所有分页、搜索、排序操作都将移交给 SQL 引擎（或类似引擎）可以在大型数据集上执行这些操作的服务器（毕竟，这就是数据库引擎专为！）。因此，每次绘制表格都会产生一个新的 Ajax 请求以获取所需的数据。

在您的情况下，您返回所有调用 ajax 的数据，并认为 datatable 将处理分页，为您排序。那是错误的，你必须在ajax调用上自己做

但是，100 条记录并不大，您可以通过以下方式解决问题

    serverSide: false

这样改，datatable 会从 ajax 源加载所有数据并为你处理

Answer 2

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

"pageLength": 10,

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

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

因此，您可以将控制器方法微调为：

$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
);