Question

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

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

我要处理几个问题，这些问题是：

一旦在表加载时加载了数据表，它会成功检索默认数据，但未应用正确的分页和长度视图。假设我有100个默认数据，它们全部显示了，而不是按10切片，这是dataTable的默认长度。同样在分页中，它会生成1〜10个分页按钮，但由于在第1页中已经显示了全部100条记录，因此无法使用。
使用搜索功能后，它成功检索了正确的数据，但dataTable没有向其呈现新的数据集，这与上面的示例相反。

这是我的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
    );
}

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

编辑：

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

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

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

Answer 2

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

启用服务器端处理后，DataTables执行的所有分页，搜索，排序操作都将传递到服务器，在该服务器上，SQL引擎（或类似引擎）可以对大型数据集执行这些操作（毕竟，这就是数据库引擎是专为！）。这样，每次绘制表格都会导致发出新的Ajax请求以获取所需的数据。

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

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

    serverSide: false

进行这样的更改，datatable将从ajax源加载所有数据并为您处理

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

2 个答案: