2017-07-20 6 views
0

私のララブモデルでフィルタを実現する4つのフィールドがあります。私はajaxを使用して、テンプレートブレードからの応答データを取得し、json応答を返します。 My機能は:ajaxとjsonのLaravelページ設定

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, 
    ]); 
} 

私はのpaginate(10)によるget()メソッドを置き換え、例えば、フィルタをしている私の回答は、()は動作しません。

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

私はJSONをページ分割する方法をしたい:

マイテンプレートブレードは、このようなものです。これは、javascript、jquery、vue.js、またはLaravelのページネーションメソッドを使用できます。フィルタは独立して、または同時に使用できます。

+0

Laravel Datatableを使用することをお勧めします。これはページネーションなどの作業を軽減するため、https://github.com/yajra/laravel-datatables –

+0

をご確認ください。最初の瞬間、私はDatatableを使用しましたが、フィルタリングはこのコンポーネントではさらに複雑になり、別の依存関係が生成されるため、使用しないことに決めました。 – itepifanio

答えて

0

2つのオプションがあります。

1:より複雑なクエリを作成しますが、データベースによってフィルタリングされた結果を返すことによって、あなたのコードを書き換えて、あなたのpaginateメソッドが

2を検索結果には影響しません:LengthAwarePaginatorクラスを使用して、手動で改ページを作成します。

+0

ありがとう、これは非常に便利で、私は第2の選択肢を選んだが、今は別の問題がある。私のページをクリックすると、私はlocalhost:8000/json?Pa​​ge = 2を持っていますが、api:localhost:8000/indexを消費している私の前部を改ページする必要があります。 = 2である。これを行う方法がありますか? – itepifanio

+0

ajaxが新しいデータセットを返すときの再テーブル。それを行うには多くの方法があります:jQuery、vue.jsを使用してテーブルを操作するか、非常に専門的ではありませんが、テーブルをレンダリングしてjsonの代わりにajaxで返します – piotr

関連する問題