javascript - 分页和过滤如何很好地工作？

Question

我有一张 table paging and filter 。我将限制设置为 5，当页面加载时它工作得很好，但是当我使用过滤器来获取数据时，它显示了超过 5 行。我希望它能保持限制5和分页。

@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

这是我的代码

  $('#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

只需添加一个计数器:

$('#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";
      }
    }       
  }
  });

此外，您可能想删除所有 magic numbers并更有效地使用 jQuery。如果我要重写你的代码，我会这样做:

$('#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');
    }
  });
});

我确信这个网站上有很多人可以比我做得更好。:)