2016-08-22 12 views
1

こんにちは私はたくさんの行があるhtmlテーブルを持っていますが、JavaScriptコードを使用してページ番号オプションを追加するとうまくいきますが、ドキュメントをロードするとすべての行が表示されます5、10、またはすべてではない行を表示します。ここに私のJavaScriptコードがあると作業フィドル:HTMLテーブルにN個の行を表示する

$(document).ready(function() { 
    getPagination('#Tabla'); 
}); 

function getPagination(table) { 

    $('#maxRows').on('change', function() { 
    $('.pagination').html(''); // reset pagination 
    var trnum = 0; // reset tr counter 
    var maxRows = parseInt($(this).val()); // get Max Rows from select option 
    var totalRows = $(table + ' tbody tr').length; // numbers of rows 
    $(table + ' tr:gt(0)').each(function() { // each TR in table and not the header 
     trnum++; // Start Counter 
     if (trnum > maxRows) { // if tr number gt maxRows 

     $(this).hide(); // fade it out 
     } 
     if (trnum <= maxRows) { 
     $(this).show(); 
     } // else fade in Important in case if it .. 
    }); // was fade out to fade it in 
    if (totalRows > maxRows) { // if tr total rows gt max rows option 
     var pagenum = Math.ceil(totalRows/maxRows); // ceil total(rows/maxrows) to get .. 
     // numbers of pages 
     for (var i = 1; i <= pagenum;) { // for each page append pagination li 
     $('.pagination').append('<li class"wp" data-page="' + i + '">\ 
             <span>' + i++ + '<span class="sr-only">(current)</span></span>\ 
            </li>').show(); 
     } // end for i 
    } // end if row count > max rows 
    $('.pagination li:first-child').addClass('active'); // add active class to the first li 
    $('.pagination li').on('click', function() { // on click each page 
     var pageNum = $(this).attr('data-page'); // get it's number 
     var trIndex = 0; // reset tr counter 
     $('.pagination li').removeClass('active'); // remove active class from all li 
     $(this).addClass('active'); // add active class to the clicked 
     $(table + ' tr:gt(0)').each(function() { // each tr in table not the header 
     trIndex++; // tr index counter 
     // if tr index gt maxRows*pageNum or lt maxRows*pageNum-maxRows fade if out 
     if (trIndex > (maxRows * pageNum) || trIndex <= ((maxRows * pageNum) - maxRows)) { 
      $(this).hide(); 
     } else { 
      $(this).show(); 
     } //else fade in 
     }); // end of for each tr in table 
    }); // end of on click pagination list 


    }); 
} 

フィドル:

私はあなたのコードを変更した

Working Code

+0

を参照してください?並べ替え、フィルタリング、ページングなどのすてきなテーブル機能をすべて手に入れます。 – trincot

+0

テーブルがdinamycallyで作成されているため、フロントエンドにしかアクセスできません。 –

+0

これらのライブラリはそれをサポートしています。上記のリンクから引用:* "...ほとんどのデータソースをサポート:DOM、JavaScript、... *" – trincot

答えて

2

、これをチェックしてください。ページネーションを作成している関数はそのまま動作します。ただ、若干の変更NIコード

$(document).ready(function() { 
     $('#maxRows').on('change', function() { 
      getPagination('#Tabla',$(this).val()); 
     }); 
    getPagination('#Tabla',2); // the no of rows default you want to show 
}); 

function getPagination(table,noRows) { 

$('.pagination').html(''); // reset pagination 
    var trnum = 0; // reset tr counter 
    var maxRows = noRows; // get Max Rows from select option 
    var totalRows = $(table + ' tbody tr').length; // numbers of rows 
    $(table + ' tr:gt(0)').each(function() { // each TR in table and not the header 
     trnum++; // Start Counter 
     if (trnum > maxRows) { // if tr number gt maxRows 

     $(this).hide(); // fade it out 
     } 
     if (trnum <= maxRows) { 
     $(this).show(); 
     } // else fade in Important in case if it .. 
    }); // was fade out to fade it in 
    if (totalRows > maxRows) { // if tr total rows gt max rows option 
     var pagenum = Math.ceil(totalRows/maxRows); // ceil total(rows/maxrows) to get .. 
     // numbers of pages 
     for (var i = 1; i <= pagenum;) { // for each page append pagination li 
     $('.pagination').append('<li class"wp" data-page="' + i + '">\ 
             <span>' + i++ + '<span class="sr-only">(current)</span></span>\ 
            </li>').show(); 
     } // end for i 
    } // end if row count > max rows 
    $('.pagination li:first-child').addClass('active'); // add active class to the first li 
    $('.pagination li').on('click', function() { // on click each page 
     var pageNum = $(this).attr('data-page'); // get it's number 
     var trIndex = 0; // reset tr counter 
     $('.pagination li').removeClass('active'); // remove active class from all li 
     $(this).addClass('active'); // add active class to the clicked 
     $(table + ' tr:gt(0)').each(function() { // each tr in table not the header 
     trIndex++; // tr index counter 
     // if tr index gt maxRows*pageNum or lt maxRows*pageNum-maxRows fade if out 
     if (trIndex > (maxRows * pageNum) || trIndex <= ((maxRows * pageNum) - maxRows)) { 
      $(this).hide(); 
     } else { 
      $(this).show(); 
     } //else fade in 
     }); // end of for each tr in table 
    }); // end of on click pagination list 
} 

Update your Fiddle

2

あなたは書類準備の「maxRowsの」オプションの1つを選択することができます。たとえば、あなたは最後のオプションを選択することがあります。すべては「変更」イベントに応じて再配置されるように

$('#maxRows option:last').prop('selected', true).trigger('change'); 

は、あなたが変更イベントをトリガする必要があります。

スニペット:あなたは本当に、車輪を再発明しているよう

$(document).ready(function() { 
 
    getPagination('#Tabla'); 
 
    $('#maxRows option:last').prop('selected', true).trigger('change'); 
 
}); 
 

 
function getPagination(table) { 
 

 
    $('#maxRows').on('change', function(e) { 
 
    $('.pagination').html(''); // reset pagination 
 
    var trnum = 0; // reset tr counter 
 
    var maxRows = parseInt($(this).val()); // get Max Rows from select option 
 
    var totalRows = $(table + ' tbody tr').length; // numbers of rows 
 
    $(table + ' tr:gt(0)').each(function() { // each TR in table and not the header 
 
     trnum++; // Start Counter 
 
     if (trnum > maxRows) { // if tr number gt maxRows 
 

 
     $(this).hide(); // fade it out 
 
     } 
 
     if (trnum <= maxRows) { 
 
     $(this).show(); 
 
     } // else fade in Important in case if it .. 
 
    }); // was fade out to fade it in 
 
    if (totalRows > maxRows) { // if tr total rows gt max rows option 
 
     var pagenum = Math.ceil(totalRows/maxRows); // ceil total(rows/maxrows) to get .. 
 
     // \t numbers of pages 
 
     for (var i = 1; i <= pagenum;) { // for each page append pagination li 
 
     $('.pagination').append('<li class"wp" data-page="' + i + '">\ 
 
<span>' + i++ + '<span class="sr-only">(current)</span></span>\ 
 
</li>').show(); 
 
     } // end for i 
 
    } // end if row count > max rows 
 
    $('.pagination li:first-child').addClass('active'); // add active class to the first li 
 
    $('.pagination li').on('click', function() { // on click each page 
 
     var pageNum = $(this).attr('data-page'); // get it's number 
 
     var trIndex = 0; // reset tr counter 
 
     $('.pagination li').removeClass('active'); // remove active class from all li 
 
     $(this).addClass('active'); // add active class to the clicked 
 
     $(table + ' tr:gt(0)').each(function() { // each tr in table not the header 
 
     trIndex++; // tr index counter 
 
     // if tr index gt maxRows*pageNum or lt maxRows*pageNum-maxRows fade if out 
 
     if (trIndex > (maxRows * pageNum) || trIndex <= ((maxRows * pageNum) - maxRows)) { 
 
      $(this).hide(); 
 
     } else { 
 
      $(this).show(); 
 
     } //else fade in 
 
     }); // end of for each tr in table 
 
    }); // end of on click pagination list 
 

 

 
    }); 
 

 
    // end of on select change 
 

 

 

 
    // END OF PAGINATION 
 
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="input col-md-1 col-xs-2"> 
 
      <!-- \t \t Show Numbers Of Rows \t \t --> 
 
      <select class="form-control" name="state" id="maxRows"> 
 
       <option value="5000">Show ALL Rows</option> 
 
       <option value="1">1</option> 
 
       <option value="2">2</option> 
 
       <option value="3">3</option> 
 
      </select> 
 
     </div> 
 
    </div> 
 
    <div class="row col-md-12 col-xs-12"> 
 
     <div class="table-responsive"> 
 
      <table class="table table-striped table-hover table-condensed table-bordered" id="Tabla"> 
 
       <thead> 
 
       <tr class="info"> 
 
        <td>ID<span class="hidden-xs"></span></td> 
 
        <td>Family<span class="hidden-xs"></span></td> 
 
       </tr> 
 
       </thead> 
 
       <tbody id="TablaFamilias"> 
 
       <tr> 
 
        <td>1</td> 
 
        <td>A</td> 
 
       </tr> 
 
       <tr> 
 
        <td>2</td> 
 
        <td>B</td> 
 
       </tr> 
 
       <tr> 
 
        <td>3</td> 
 
        <td>A</td> 
 
       </tr> 
 
       <tr> 
 
        <td>4</td> 
 
        <td>D</td> 
 
       </tr> 
 
       <tr> 
 
        <td>5</td> 
 
        <td>A</td> 
 
       </tr> 
 
       </tbody> 
 
       <tfoot></tfoot> 
 
      </table> 
 
      <div> 
 
       <nav> 
 
        <ul class="pagination"></ul> 
 
       </nav> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

+0

完璧に動作します!しかし、ナリンの答えが最初です。とにかく助けてくれてありがとう! –

+0

こんにちはgaetanoM、私はあなたの変更と作品を使用しています、ありがとうございます。問題は、htmlコードの右下にある "フルページ"リンクをクリックすると、ページ番号セレクタがページと並んで表示されることです。ページの上部または下部に小さなアイコンを表示するこの動作を変更するにはどうすればよいですか? – user1265067

+0

@ user1265067 [](http://getbootstrap.com/css/):コンテナ流体、行、クラス、およびグリッドシステムの構築方法をご覧ください。スニペットが更新されました。お知らせ下さい。 – gaetanoM

2

まず、私は...ページング、フィルタリング、ソートなどのテーブル機能のためのライブラリを使用することをお勧め。 、あなたのHTMLでは

  1. 3のように、ページのロード時に表示するページのご希望の数を持っていselectedとオプションをマーク:

    はしかし、あなたが上げる問題のために、あなたは、2つの調整をしなければなりません:

    あなたのコードで
    <select class="form-control" name="state" id="maxRows"> 
        <option value="5000">Show ALL Rows</option> 
        <option value="1">1</option> 
        <option value="2">2</option> 
        <option value="3" selected>3</option> 
    </select> 
    
  2. maxRows要素に.trigger('change')メソッドを呼び出します。

    $('#maxRows').on('change', function() { 
        // all code here can stay as it is 
        // ... 
    }).trigger('change'); 
    

これだけです。あなたが原料のこの種のhttps://datatables.net/のようなライブラリを使用していないのはなぜ

updated fiddle

+0

これも完璧に動作します!しかし、ナリンの答えが最初に、とにかく助けてくれてありがとう! –

関連する問題