分页和过滤器如何正常工作？

Question

I have a table with paging and filter . I set the limit to 5 and it work's well when the page is loaded, but when I use a filter to fetch the data, its shows me more than 5 rows. I hope it can keep limit 5 and paging.

@foreach($products as $item)
    <tr name='items'>
        <td><a href="#" name='type' data-pk='{{$item->id}}'>{{$item->type_id}}</a></td>
        <td><input class = 'imgInp btn btn-default' type="file" name="icon" data-input="false">
            <img />
            <button class='btn btn-primary' style='display:none'>upload</button>
            <button class='btn btn-danger' style='display:none'>cancel</button>
        </td>
        <td><a href="#" name='name' data-pk='{{$item->id}}' class="editable">{{$item->name}}</a></td>
        <td><a href="#" name='pricing' data-pk='{{$item->id}}' class="editable">{{$item->pricing}}</a></td>
        <td><a href="#" name='short_description' data-pk='{{$item->id}}' class="editable">{{$item->short_description}}</a></td>
        <td><a href='#' class="fa fa-trash fa-lg" aria-hidden="true" data-pk='{{$item->id}}' name='delete'></a></td>
    </tr>
@endforeach

here is my code

  $('#search').keyup(function(){ var input, filter, table, tr, td, i; input = document.getElementById("search"); filter = input.value.toUpperCase(); table = document.getElementById("product_table"); tr = $("tr[name=items]"); for (i = 0; i < tr.length; i++) { td = tr[i].getElementsByTagName("td")[0]; td_1 = tr[i].getElementsByTagName("td")[1]; td_2 = tr[i].getElementsByTagName("td")[2]; td_3 = tr[i].getElementsByTagName("td")[3]; td_4 = tr[i].getElementsByTagName("td")[4]; if (td || td_1 || td_2 || td_3 || td_4) { if (td.innerHTML.toUpperCase().indexOf(filter) > -1 || td_1.innerHTML.toUpperCase().indexOf(filter) > -1 || td_2.innerHTML.toUpperCase().indexOf(filter) > -1 || td_3.innerHTML.toUpperCase().indexOf(filter) > -1 || td_4.innerHTML.toUpperCase().indexOf(filter) > -1) { tr[i].style.display = ""; } else { tr[i].style.display = "none"; } } } }); 

  .thumb { height: 100px; border: 1px solid #000; margin: 10px 5px 0 0; } .paging-nav { text-align: right; padding-top: 2px; } .paging-nav a { margin: auto 1px; text-decoration: none; display: inline-block; padding: 1px 7px; background: #91b9e6; color: white; border-radius: 3px; } .paging-nav .selected-page { background: #187ed5; font-weight: bold; } #search_product{ float: right; padding-bottom: 10px; } 

 <link href="http://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script> <div class="tab-pane fade in active" id="update"> <br> <div id="search_product" class="input-group input-wrapper" align="right"> <span class="input-group-addon">search</span> <input type="text" id="search" class="form-control" placeholder=" "> </div> <table id="product_table" class="table"> <tbody><tr style="display: table-row;"> <td>type</td> <td>icon</td> <td>name</td> <td>pricing</td> <td>note</td> <td>delete</td> </tr> <tr name="items" style="display: table-row;"> <td><a href="#" name="type" data-pk="48">0</a></td> <td><input class="imgInp btn btn-default" type="file" name="icon" data-input="false"> <img> <button class="btn btn-primary" style="display:none">upload</button> <button class="btn btn-danger" style="display:none">cancel</button> </td> <td><a href="#" name="name" data-pk="48" class="editable editable-click">name</a></td> <td><a href="#" name="pricing" data-pk="48" class="editable editable-click">10</a></td> <td><a href="#" name="short_description" data-pk="48" class="editable editable-click">note</a></td> <td><a href="#" class="fa fa-trash fa-lg" aria-hidden="true" data-pk="48" name="delete"></a></td> </tr> <tr name="items" style="display: table-row;"> <td><a href="#" name="type" data-pk="49">0</a></td> <td><input class="imgInp btn btn-default" type="file" name="icon" data-input="false"> <img> <button class="btn btn-primary" style="display:none">upload</button> <button class="btn btn-danger" style="display:none">cancel</button> </td> <td><a href="#" name="name" data-pk="49" class="editable editable-click">name</a></td> <td><a href="#" name="pricing" data-pk="49" class="editable editable-click">10</a></td> <td><a href="#" name="short_description" data-pk="49" class="editable editable-click">note</a></td> <td><a href="#" class="fa fa-trash fa-lg" aria-hidden="true" data-pk="49" name="delete"></a></td> </tr> <tr name="items" style="display: table-row;"> <td><a href="#" name="type" data-pk="50">0</a></td> <td><input class="imgInp btn btn-default" type="file" name="icon" data-input="false"> <img> <button class="btn btn-primary" style="display:none">upload</button> <button class="btn btn-danger" style="display:none">cancel</button> </td> <td><a href="#" name="name" data-pk="50" class="editable editable-click">name</a></td> <td><a href="#" name="pricing" data-pk="50" class="editable editable-click">10</a></td> <td><a href="#" name="short_description" data-pk="50" class="editable editable-click">note</a></td> <td><a href="#" class="fa fa-trash fa-lg" aria-hidden="true" data-pk="50" name="delete"></a></td> </tr> <tr name="items" style="display: table-row;"> <td><a href="#" name="type" data-pk="51">0</a></td> <td><input class="imgInp btn btn-default" type="file" name="icon" data-input="false"> <img> <button class="btn btn-primary" style="display:none">upload</button> <button class="btn btn-danger" style="display:none">cancel</button> </td> <td><a href="#" name="name" data-pk="51" class="editable editable-click">name</a></td> <td><a href="#" name="pricing" data-pk="51" class="editable editable-click">10</a></td> <td><a href="#" name="short_description" data-pk="51" class="editable editable-click">note</a></td> <td><a href="#" class="fa fa-trash fa-lg" aria-hidden="true" data-pk="51" name="delete"></a></td> </tr> <tr name="items" style="display: none;"> <td><a href="#" name="type" data-pk="52">0</a></td> <td><input class="imgInp btn btn-default" type="file" name="icon" data-input="false"> <img> <button class="btn btn-primary" style="display:none">upload</button> <button class="btn btn-danger" style="display:none">cancel</button> </td> <td><a href="#" name="name" data-pk="52" class="editable editable-click">name</a></td> <td><a href="#" name="pricing" data-pk="52" class="editable editable-click">10</a></td> <td><a href="#" name="short_description" data-pk="52" class="editable editable-click">note</a></td> <td><a href="#" class="fa fa-trash fa-lg" aria-hidden="true" data-pk="52" name="delete"></a></td> </tr> <tr name="items" style="display: none;"> <td><a href="#" name="type" data-pk="53">0</a></td> <td><input class="imgInp btn btn-default" type="file" name="icon" data-input="false"> <img> <button class="btn btn-primary" style="display:none">upload</button> <button class="btn btn-danger" style="display:none">cancel</button> </td> <td><a href="#" name="name" data-pk="53" class="editable editable-click">name</a></td> <td><a href="#" name="pricing" data-pk="53" class="editable editable-click">20</a></td> <td><a href="#" name="short_description" data-pk="53" class="editable editable-click">note</a></td> <td><a href="#" class="fa fa-trash fa-lg" aria-hidden="true" data-pk="53" name="delete"></a></td> </tr> <tr name="items" style="display: none;"> <td><a href="#" name="type" data-pk="54">0</a></td> <td><input class="imgInp btn btn-default" type="file" name="icon" data-input="false"> <img> <button class="btn btn-primary" style="display:none">upload</button> <button class="btn btn-danger" style="display:none">cancel</button> </td> <td><a href="#" name="name" data-pk="54" class="editable editable-click">name</a></td> <td><a href="#" name="pricing" data-pk="54" class="editable editable-click">20</a></td> <td><a href="#" name="short_description" data-pk="54" class="editable editable-click">note</a></td> <td><a href="#" class="fa fa-trash fa-lg" aria-hidden="true" data-pk="54" name="delete"></a></td> </tr> <tr name="items" style="display: none;"> <td><a href="#" name="type" data-pk="55">0</a></td> <td><input class="imgInp btn btn-default" type="file" name="icon" data-input="false"> <img> <button class="btn btn-primary" style="display:none">upload</button> <button class="btn btn-danger" style="display:none">cancel</button> </td> <td><a href="#" name="name" data-pk="55" class="editable editable-click">name</a></td> <td><a href="#" name="pricing" data-pk="55" class="editable editable-click">20</a></td> <td><a href="#" name="short_description" data-pk="55" class="editable editable-click">note</a></td> <td><a href="#" class="fa fa-trash fa-lg" aria-hidden="true" data-pk="55" name="delete"></a></td> </tr> <tr name="items" style="display: none;"> <td><a href="#" name="type" data-pk="56">0</a></td> <td><input class="imgInp btn btn-default" type="file" name="icon" data-input="false"> <img> <button class="btn btn-primary" style="display:none">upload</button> <button class="btn btn-danger" style="display:none">cancel</button> </td> <td><a href="#" name="name" data-pk="56" class="editable editable-click">name</a></td> <td><a href="#" name="pricing" data-pk="56" class="editable editable-click">20</a></td> <td><a href="#" name="short_description" data-pk="56" class="editable editable-click">note</a></td> <td><a href="#" class="fa fa-trash fa-lg" aria-hidden="true" data-pk="56" name="delete"></a></td> </tr> <tr name="items" style="display: none;"> <td><a href="#" name="type" data-pk="57">0</a></td> <td><input class="imgInp btn btn-default" type="file" name="icon" data-input="false"> <img> <button class="btn btn-primary" style="display:none">upload</button> <button class="btn btn-danger" style="display:none">cancel</button> </td> <td><a href="#" name="name" data-pk="57" class="editable editable-click">name</a></td> <td><a href="#" name="pricing" data-pk="57" class="editable editable-click">20</a></td> <td><a href="#" name="short_description" data-pk="57" class="editable editable-click">note</a></td> <td><a href="#" class="fa fa-trash fa-lg" aria-hidden="true" data-pk="57" name="delete"></a></td> </tr> </tbody></table><div class="paging-nav"><a href="#" data-direction="-1">&lt;&lt;</a><a href="#" data-page="0">1</a><a href="#" data-page="1">2</a><a href="#" data-page="2">3</a><a href="#" data-direction="1">&gt;&gt;</a></div> </div> 

Fiddle

Answer 1

Simply add a counter:

$('#search').keyup(function(){
  var input, filter, table, tr, td, i, count = 0;
  input = document.getElementById("search");
  filter = input.value.toUpperCase();
  table = document.getElementById("product_table");
  tr = $("tr[name=items]");
  for (i = 0; i < tr.length && count < 5; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    td_1 = tr[i].getElementsByTagName("td")[1];
    td_2 = tr[i].getElementsByTagName("td")[2];
    td_3 = tr[i].getElementsByTagName("td")[3];
    td_4 = tr[i].getElementsByTagName("td")[4];
    if (td || td_1 || td_2 || td_3 || td_4) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1 ||
          td_1.innerHTML.toUpperCase().indexOf(filter) > -1 ||
          td_2.innerHTML.toUpperCase().indexOf(filter) > -1 ||
          td_3.innerHTML.toUpperCase().indexOf(filter) > -1 ||
          td_4.innerHTML.toUpperCase().indexOf(filter) > -1) {
        count++;
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }       
  }
  });

Also, you may want to get rid of all of your magic numbers and use jQuery a little more effectively. If I were to rewrite your code, I'd do it as follows:

$('#search').keyup(function () {
  const maxNums = 5;
  var filter = $(this).val().toUpperCase(),
      count  = 0;    

  $('tr[name="items"]').each(function () {
    if (count >= maxNums) return;

    var possible = true;
    $('td', this).each(function () {
      if ($(this).html().toUpperCase().indexOf(filter) < 0) {
        possible = false;        
      }
    })

    if (possible) {
      if (count++ < maxNums) {
        $(this).css('display', 'block');
      }
    } else {
      $(this).css('display', 'none');
    }
  });
});

I'm sure there are many on this site who could perform this even better than I. :)