Php 使用ajax和json的Laravel分页

我有四个字段在我的laravel模型上实现过滤器。我使用ajax从模板刀片服务器获取响应数据并返回json响应。我的职能：

public function displayTable()
{
    // This four variables get response from ajax
    // The same happens with $this->request->has('instituicao')

    $cpf = $this->request->get('cpf', '');
    $operacao = $this->request->get('operacao', '');
    $dataInicio = $this->request->get('dataInicio', '');
    $dataFim = $this->request->get('dataFim', '');

    $this->validate($this->request, [
        'instituicao' => ['nullable', 'integer', Rule::exists('instituicoes', 'id')],
    ]);

    $auditorias = Audit::with('user')
        ->whereHas('user', function (Builder $q) use ($cpf, $dataFim, $dataInicio) {
            if ($cpf != '') {
                $q->where('cpf', $cpf);
            }
            if ($dataInicio != '' and $dataFim != '') {
                $q->where('created_at', '>=', $dataInicio)
                    ->where('updated_at', '<=', $dataFim);
            }

            $q->when($this->request->has('instituicao'), function (Builder $query) {
                $query->whereHas('perfis', function (Builder $query) {
                    $query->where('tipo', '!=', 'administrador');
                });
            });
        })
        ->get()->filter(function ($item) use ($operacao) {
            if ($operacao != '') {
                return $item->event == $operacao;
            } else {
                return $item;
            }
        })->when($this->request->has('instituicao'), function (Collection $collection) {
            return $collection->filter(function ($auditoria) {
                return $auditoria->user->perfis->contains(function ($perfil) {
                    return $perfil->papel->instituicao->id == $this->request->get('instituicao');
                });
            });
        })->map(function ($item) {
            $auditable_type = explode(
                '\\', $item->auditable_type
            );

            $item->auditable_type = end($auditable_type);

            if ($item->event == 'created') {
                $item->event = 'Criação';
            } elseif ($item->event == 'updated') {
                $item->event = 'Atualização';
            } else {
                $item->event = 'Remoção';
            }

            return $item;
        })->values();

    return response()->json([
        'data' => $auditorias,
    ]);
}

公共函数displayTable（）
{
//这四个变量从ajax获得响应
//$this->request->has（'instituico'）也会发生同样的情况
$cpf=$this->request->get（'cpf'，''）；
$operacao=$this->request->get（'operacao'，''）；
$dataInicio=$this->request->get（'dataInicio'，''）；
$dataFim=$this->request->get（'dataFim'，''）；
$this->validate（$this->请求）[
'instituicao'=>['nullable'，'integer'，Rule:：exists（'instituicoes'，'id'），
]);
$auditorias=Audit:：with（'user'）
->其中有（'user'，function（Builder$q）使用（$cpf，$dataFim，$dataInicio）{
如果（$cpf！=''）{
$q->where（'cpf'，$cpf）；
}
如果（$dataInicio！=''和$dataFim！=''）{
$q->where（'created_at'，'>='，$dataInicio）
->其中（'updated_at'，'
$（'operacao'）。关于（'change'，函数（）{
var operacao=$（'#operacao'）.val（）；
var cpf=$（'#cpf'）.val（）；
var instituico=$（'#escolas'）.val（）；
dataInicio=$（'#dataInicio'）.val（）；
dataFim=$（'#dataFim'）.val（）；
$.ajax({
键入：“获取”，
数据类型：“json”，
url:“{route（'auditoria.displayDatatable'）}}”，
数据：{
中央公积金，
歌剧院：歌剧院，
国际民航组织：国际民航组织，
dataInicio:dataInicio，
数据职能指令手册：数据职能指令手册，
},
成功：功能（数据）{
创建表（数据）；
if（data.data.length==0）{
$（'#corpoTabela'）.html(
" " +
“我们需要一个过滤器”+
""
);
}
},
});
});
函数createTable（数据）{
表=''；
控制台日志（数据）；
对于（var i=0；i

我想要一种对json进行分页的方法。为此，可以使用javascript、jquery、vue.js或Laravel的分页方法。请记住：过滤器可以单独使用，也可以同时使用。

您有两种选择

1：通过创建更复杂的查询重写代码，但返回按数据库过滤的结果，并且分页方法不会影响结果

---

2：使用

lengsawarepaginator

类并手动创建分页。

我建议您使用Laravel Datatable，这将减少您在分页和其他方面的工作，请检查以下内容：我知道。我首先使用了Datatable，但此组件中的筛选更为复杂，而且会生成另一个依赖项，因此我需要指定不使用。谢谢，这非常有用，我选择了第二个选项，但现在我有另一个问题。正在分页的是我的json api：当我单击我的分页时，我有localhost:8000/json？Page=2，例如，但我需要为使用api:localhost:8000/index？Page=2的我的前台分页。有办法吗？重新渲染表当ajax返回新的数据集时，有很多方法可以做到：使用jQuery、vue.js或不是很专业但工作正常的操作表：渲染表并用ajax而不是json返回它

                    <table id="tabela" class="table table-striped dataTable" style="width: 100%">
                        <thead>
                        <tr>
                            <th>Usuário Responśavel</th>
                            <th>CPF Usuário Responśavel</th>
                            <th>Operação</th>
                            <th>Tipo de Modificação</th>
                            <th>Data de Criação</th>
                            <th>Data de Modificação</th>
                        </tr>
                        </thead>
                        <tbody id="corpoTabela"></tbody>
                    </table>

<!-- Here I have the scripts -->
<!-- This div is the field (Select2), 
 who is selected and return his data response, 
as the others filds data -->

$('#operacao').on('change', function () {
        var operacao = $('#operacao').val();
        var cpf = $('#cpf').val();
        var instituicao = $('#escolas').val();
        dataInicio = $('#dataInicio').val();
        dataFim = $('#dataFim').val();

        $.ajax({
            type: "GET",
            datatype: 'json',
            url: "{{ route('auditoria.displayDatatable') }}",
            data: {
                cpf: cpf,
                operacao: operacao,
                instituicao: instituicao,
                dataInicio: dataInicio,
                dataFim: dataFim,
            },
            success: function (data) {
                createTable(data);
                if (data.data.length == 0) {
                    $('#corpoTabela').html(
                        "<tr><td colspan='6' style='text-align:center'> " +
                        "Nenhum usuario de acordo com o que foi filtrado" +
                        "<td></tr>"
                    );
                }
            },
        });
    });

<!-- Here is my function who display the table -->

function createTable(data) {
    table = '';
    console.log(data);
    for (var i = 0; i < data.data.length; i++) {
        table += "<tr>";
        table += "<td>" + data.data[i].user.nome + "</td>";
        table += "<td>" + data.data[i].user.cpf + "</td>";
        table += "<td>" + data.data[i].event + "</td>";
        table += "<td style='text-transform: capitalize'>" + data.data[i].auditable_type+ "</td>";
        table += "<td>" + moment(data.data[i].created_at).format('DD/MM/YYYY hh:mm') + "</td>";
        table += "<td>" + moment(data.data[i].updated_at).format('DD/MM/YYYY hh:mm') + "</td>";
        table += "<td><a class='btn btn-primary btn-xs' href=\"/show/" + data.data[i].id + "\"> Ver </a>";
        table += "</tr>";
    }
    ;
    $('#corpoTabela').html(table);
};