ページングとフィルタはどのようにうまく機能しますか？

私は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

出典

2017-07-05 Karl Jhan

は、単にカウンタを追加します：

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

を私は多くのI.よりも、このより良いを行うことができ、このサイトにあると確信している:)

出典

2017-07-05 20:19:34 deckeresq

私がしようとしていますそれを投稿する前に私のコードにカウントを入れるには、問題は、 '2'（フィールドが空である）を取り除くよりもフィルターに '2'を設定すると、すべての行が表示されます。私はあなたのコード（マジックナンバーなし）も試して、同じ結果を得ました。 "if（$（this）.innerHTML.toUpperCase（）。indexOf（filter）<0）"の "uncaught TypeError：未定義のUpperCase 'を読み取れません"というメッセージが表示されます。 –

最後に、これを追加しますif（filter == ""）{ for（i = 5; i

@ KarlJhan私のコードでは、フィルタをクリアすると新しい行は表示されませんでした。なぜあなたは未定義のエラーを受けているのか分かりません - 私はそれを見て、必要ならば更新します。 – deckeresq

ページングとフィルタはどのようにうまく機能しますか？

答えて

関連する問題