I make ajax request when entering characters. I return the string in the form of html and insert it into the table. However, the paginatora links remain old and it turns out that the table is filtered, but the old paginator allows you to scroll through the pages from the original table. How to change paginator links? Request code js:

$('#id_card').on('keyup', function(){ // поиск value = $(this).val(); $.ajax({ type: 'POST', url: '/home', data: { search: value, code: 1, _token: '{{csrf_token()}}' }, success: function (data) { var tab= $('#table_list').find('tbody'); tab.empty(); tab.append(data); }, error: function(data){ console.log(data); } }) })

Controller code

 public function search(Request $request){ $models= Model::where('table','LIKE','%'.$request->input('search').'%')->paginate(4); $str = ""; foreach($models as $model){ $str .= '<tr>'. '<td>'. $model["id"].'</td>'. '<td> two</td>'. '<td> three</td>'. '<td> four</td>'. '<td> five</td>'. '<td> six</td>'. '</tr>'; } print($str); return; }

    1 answer 1

    When an Ajax request via jQuery, you do not pass the parameter responsible for the page number. OK. But when you have Ajax returns the result in the form of HTML code that you insert into the body of the page, then when you click on the link or what you have there, you have to re-call the same AJAX method, but already transfer to it the number of the page you clicked on the paginator.

    Below is one of the options. There are a lot of options for solving this problem, I cite one of the options:

    IMPORTANT! I threw "on my knee", did not check the code, but the principle showed, I hope it is clear)

     // Π’Π²ΠΎΠΉ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ ΠΏΡ€ΠΈ ΠΏΠ΅Ρ€Π²ΠΈΡ‡Π½ΠΎΠΉ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠ΅ Π½Π΅ Π±ΡƒΠ΄Ρƒ Ρ‚Ρ€ΠΎΠ³Π°Ρ‚ΡŒ $('#id_card').on('keyup', function() { // поиск var value = $(this).val(); $.ajax({ type: 'POST', url: '/home', data: { search: value, code: 1, _token: '{{csrf_token()}}' }, success: function (data) { var tab= $('#table_list').find('tbody'); tab.empty(); tab.append(data.body); // Π’ΡΡ‚Π°Π²Π»ΡΠ΅ΡˆΡŒ содСрТимоС ΠΏΠ°Π³ΠΈΠ½Π°Ρ†ΠΈΠΈ Π² Π±Π»ΠΎΠΊ $('#paginator').html(data.paginator); }, error: function(data) { console.log(data); } }) }); // ΠŸΠ°Π³ΠΈΠ½Π°Ρ†ΠΈΡ $(document).on('click', '[data-type="paginator"]', function() { // поиск // НСобходимо ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ с ΠΊΠ°ΠΊΠΎΠ³ΠΎ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° Π±ΡƒΠ΄Π΅Ρ‚ Π±Ρ€Π°Ρ‚ΡŒ строку для поиска var value = $(this).val(); $.ajax({ type: 'POST', url: '/home', data: { search: value, code: 1, _token: '{{csrf_token()}}', page: $(this).attr('data-page') }, success: function (data) { var tab= $('#table_list').find('tbody'); tab.empty(); tab.append(data.body); // Π’ΡΡ‚Π°Π²Π»ΡΠ΅ΡˆΡŒ содСрТимоС ΠΏΠ°Π³ΠΈΠ½Π°Ρ†ΠΈΠΈ Π² Π±Π»ΠΎΠΊ $('#paginator').html(data.paginator); }, error: function(data) { console.log(data); } }) });

    Controller code

     public function search(Request $request) { $models = Model::where('field', 'LIKE', '%' . $request->input('search') . '%')->paginate(4); $str = ''; foreach($models as $model) { $str .= ' <tr> <td>' . $model->id . '</td> <td> two</td> <td> three</td> <td> four</td> <td> five</td> <td> six</td> </tr>'; } $paginator = ''; for($i = 1; $i <= $models->lastPage(); $i++) { $paginator .= '<a href="javascript:;" data-type="paginator" data-page="' . $i . '">' . $i . '</a>'; } echo json_encode(['body' => $str, 'paginator' => $paginator]); // ΠŸΡ€Π°Π²ΠΈΠ»ΡŒΠ½Π΅Π΅ Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Ρ‚ΡŒ сгСнСрированный тСкст ΠΈΠ· Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ, Π° Π½Π΅ Π² Π½Π΅ΠΉ Π΄Π΅Π»Π°Ρ‚ΡŒ Π²Ρ‹Π²ΠΎΠ΄ тСкста return; }

    Add block to HTML template

     <div id="paginator"></div>
    • It would not be bad to have an example before my eyes) I just tried to return both the html code and the link at the same time, but problems appeared there) - KordDEM
    • A couple of questions on the controller. 1) Pass the page number, but do not use it anywhere. 2) I did not fully understand how you assemble the paginator in a cycle. If possible in more detail. - KordDEM
    • 1) The answer to getting the page in the controller and installing the page is here: stackoverflow.com/questions/31747801/… - Chaikin Evgenii
    • 2) A paginator in a loop is just a search through the total number of pages according to the query condition. Accordingly, we get the number of pages that we got on request. - Chaikin Evgenii
    • I would not do the server-side paginator generation, if you pass it with AJAX. Surely the best way is to simply make additional conditions for sampling and limiting the issue in the model. Type -> limit (4) -> orderBy (field) -> get (); And get the right content per page. - Chaikin Evgenii