HTMLテーブルでページ番号を使用するには？

このページ番号libraryを私のHTMLテーブルページ（特に軽いテーマ）に使用しようとしていますが、何とか私のHTMLページにこのライブラリをプラグインする方法を理解できませんので、私のHTMLのテーブル...今 HTMLテーブルでページ番号を使用するには？

が、私は私の下のHTMLコードは、私が欲しいものではありません1ページ内のすべての行をあなたのテーブルが表示されますので、作業の任意改ページコードなしでHTMLテーブルを持っている...

上記のページ設定のJavaScriptを使用して、1ページに6つのアイテムを表示したいと思います。2ページ目のタブをクリックすると、次の6つのアイテムが表示され、終了するまで続きます。

以下は

..私はそれが私のために動作しませんジャバスクリプトが、同じ上記のページネーションを使用してみましたがここで私の完全なHTMLコードです

<html> 
<head> 

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<script src="../jquery.simplePagination.js"></script> 
<link href="../simplePagination.css" rel="stylesheet" type="text/css" /> 


    <style type="text/css"> 
table { 
    width: 40em; 
    margin: 2em auto; 
    } 

    thead { 
    background: #000; 
    color: #fff; 
    } 

    td { 
    width: 10em; 
    padding: 0.3em; 
    } 

    tbody { 
    background: #ccc; 
    } 

    </style> 

    <script> 

function test(pageNumber) 
{ 

    var page="#page-id-"+pageNumber; 
    $('.select').hide() 
    $(page).show() 

} 

</script> 

</head> 

<body bgcolor="#F8F8F8"> 
    <table class="paginated"> 
     <thead> 
      <tr> 
       <th>A</th> 

       <th>B</th> 

       <th>C</th> 

       <th>D</th> 
      </tr> 
     </thead> 

     <tbody> 
      <tr> 
       <td>1</td> 

       <td>2</td> 

       <td>3</td> 

       <td>4</td> 
      </tr> 

      <tr> 
       <td>1</td> 

       <td>2</td> 

       <td>3</td> 

       <td>4</td> 
      </tr> 

      <tr> 
       <td>1</td> 

       <td>2</td> 

       <td>3</td> 

       <td>4</td> 
      </tr> 

      <tr> 
       <td>1</td> 

       <td>2</td> 

       <td>3</td> 

       <td>4</td> 
      </tr> 

      <tr> 
       <td>1</td> 

       <td>2</td> 

       <td>3</td> 

       <td>4</td> 
      </tr> 

      <tr> 
       <td>1</td> 

       <td>2</td> 

       <td>3</td> 

       <td>4</td> 
      </tr> 

      <tr> 
       <td>1</td> 

       <td>2</td> 

       <td>3</td> 

       <td>4</td> 
      </tr> 

      <tr> 
       <td>1</td> 

       <td>2</td> 

       <td>3</td> 

       <td>4</td> 
      </tr> 

      <tr> 
       <td>1</td> 

       <td>2</td> 

       <td>3</td> 

       <td>4</td> 
      </tr> 

      <tr> 
       <td>1</td> 

       <td>2</td> 

       <td>3</td> 

       <td>4</td> 
      </tr> 

      <tr> 
       <td>1</td> 

       <td>2</td> 

       <td>3</td> 

       <td>4</td> 
      </tr> 

      <tr> 
       <td>1</td> 

       <td>2</td> 

       <td>3</td> 

       <td>4</td> 
      </tr> 

      <tr> 
       <td>1</td> 

       <td>2</td> 

       <td>3</td> 

       <td>4</td> 
      </tr> 

      <tr> 
       <td>1</td> 

       <td>2</td> 

       <td>3</td> 

       <td>4</td> 
      </tr> 

      <tr> 
       <td>1</td> 

       <td>2</td> 

       <td>3</td> 

       <td>4</td> 
      </tr> 

      <tr> 
       <td>1</td> 

       <td>2</td> 

       <td>3</td> 

       <td>4</td> 
      </tr> 

      <tr> 
       <td>1</td> 

       <td>2</td> 

       <td>3</td> 

       <td>4</td> 
      </tr> 

      <tr> 
       <td>1</td> 

       <td>2</td> 

       <td>3</td> 

       <td>4</td> 
      </tr> 

      <tr> 
       <td>1</td> 

       <td>2</td> 

       <td>3</td> 

       <td>4</td> 
      </tr> 

      <tr> 
       <td>1</td> 

       <td>2</td> 

       <td>3</td> 

       <td>4</td> 
      </tr> 

      <tr> 
       <td>1</td> 

       <td>2</td> 

       <td>3</td> 

       <td>4</td> 
      </tr> 

      <tr> 
       <td>1</td> 

       <td>2</td> 

       <td>3</td> 

       <td>4</td> 
      </tr> 

      <tr> 
       <td>1</td> 

       <td>2</td> 

       <td>3</td> 

       <td>4</td> 
      </tr> 

      <tr> 
       <td>1</td> 

       <td>2</td> 

       <td>3</td> 

       <td>4</td> 
      </tr> 

      <tr> 
       <td>1</td> 

       <td>2</td> 

       <td>3</td> 

       <td>4</td> 
      </tr> 

      <tr> 
       <td>1</td> 

       <td>2</td> 

       <td>3</td> 

       <td>4</td> 
      </tr> 

      <tr> 
       <td>1</td> 

       <td>2</td> 

       <td>3</td> 

       <td>4</td> 
      </tr> 

      <tr> 
       <td>1</td> 

       <td>2</td> 

       <td>3</td> 

       <td>4</td> 
      </tr> 

      <tr> 
       <td>1</td> 

       <td>2</td> 

       <td>3</td> 

       <td>4</td> 
      </tr> 

      <tr> 
       <td>1</td> 

       <td>2</td> 

       <td>3</td> 

       <td>4</td> 
      </tr> 

      <tr> 
       <td>1</td> 

       <td>2</td> 

       <td>3</td> 

       <td>4</td> 
      </tr> 

      <tr> 
       <td>1</td> 

       <td>2</td> 

       <td>3</td> 

       <td>4</td> 
      </tr> 

      <tr> 
       <td>1</td> 

       <td>2</td> 

       <td>3</td> 

       <td>4</td> 
      </tr> 

      <tr> 
       <td>1</td> 

       <td>2</td> 

       <td>3</td> 

       <td>4</td> 
      </tr> 

      <tr> 
       <td>1</td> 

       <td>2</td> 

       <td>3</td> 

       <td>4</td> 
      </tr> 

      <tr> 
       <td>1</td> 

       <td>2</td> 

       <td>3</td> 

       <td>4</td> 
      </tr> 

      <tr> 
       <td>1</td> 

       <td>2</td> 

       <td>3</td> 

       <td>4</td> 
      </tr> 

      <tr> 
       <td>1</td> 

       <td>2</td> 

       <td>3</td> 

       <td>4</td> 
      </tr> 

      <tr> 
       <td>1</td> 

       <td>2</td> 

       <td>3</td> 

       <td>4</td> 
      </tr> 

      <tr> 
       <td>1</td> 

       <td>2</td> 

       <td>3</td> 

       <td>4</td> 
      </tr> 

      <tr> 
       <td>1</td> 

       <td>2</td> 

       <td>3</td> 

       <td>4</td> 
      </tr> 

      <tr> 
       <td>1</td> 

       <td>2</td> 

       <td>3</td> 

       <td>4</td> 
      </tr> 

      <tr> 
       <td>1</td> 

       <td>2</td> 

       <td>3</td> 

       <td>4</td> 
      </tr> 

      <tr> 
       <td>1</td> 

       <td>2</td> 

       <td>3</td> 

       <td>4</td> 
      </tr> 

      <tr> 
       <td>1</td> 

       <td>2</td> 

       <td>3</td> 

       <td>4</td> 
      </tr> 

      <tr> 
       <td>1</td> 

       <td>2</td> 

       <td>3</td> 

       <td>4</td> 
      </tr> 

      <tr> 
       <td>1</td> 

       <td>2</td> 

       <td>3</td> 

       <td>4</td> 
      </tr> 

      <tr> 
       <td>1</td> 

       <td>2</td> 

       <td>3</td> 

       <td>4</td> 
      </tr> 

      <tr> 
       <td>1</td> 

       <td>2</td> 

       <td>3</td> 

       <td>4</td> 
      </tr> 

      <tr> 
       <td>1</td> 

       <td>2</td> 

       <td>3</td> 

       <td>4</td> 
      </tr> 
     </tbody> 
    </table> 

<div id="choose"> 
</div> 


    <script language="javascript"> 
    $(function() { 
     $('#choose').pagination({ 
      items: 20, 
      itemsOnPage: 2, 
      cssStyle: 'light-theme', 
      onPageClick: function(pageNumber){test(pageNumber)} 
     }); 
    }); 
    </script> 

    </body> 
</html>

私の上記のHTMLコード上の任意の簡単なjsfiddle例の基礎とも組み合わせこれはHTMLのテーブルの上にJS imlementする方法を私はより良い理解するのに役立ちますjavascriptの上記ページネーション..との助けのため

おかげ..

注： -

私は、HTMLテーブルの上には、ページネーションを実装するためにjqueryのには非常にシンプルで効果的なユーティリティのビルドですhttp://tablesorter.com/docs/example-pager.html

私は現在

出典

2013-10-26 Anonymous

を実装しようとしていただけsimplePagination.js溶液中で唯一興味を持っていたプラグインをダウンロード

http://tablesorter.com/addons/pager/jquery.tablesorter.pager.jsからこのプラグインを追加した後のヘッドスクリプトに次のコードを追加します

$(document).ready(function() { 
    $("table") 
    .tablesorter({widthFixed: true, widgets: ['zebra']}) 
    .tablesorterPager({container: $("#pager")}); 
});

出典

2013-10-26 09:37:45 Ashwani

ありがとうございましたAshwin ..しかし、私はそのページライブラリのjavascriptソリューションに特に興味があります。助けてくれてありがとうございました... –

未知の型エラー：$（...）。tablesorterは関数ではありません。私もプラグインファイルが含まれていますが、まだこのエラーがあります –

jQuery（1.2.1以上）を使用 – DevC

paginationsプラグインのWebサイトで見る限り、プラグイン自体は実際のページネーションを行いません。それが行う唯一のことは、数字の行を表示し、あなたがいるページに応じて正しいボタンを表示することです。

実際に改ページするには、適切なJavascriptを自分で作成する必要があります。これは、このJavaScriptの代わりに配置する必要があります：

私はあなたを推測しているコードがある

function test(pageNumber) 
{ 

    var page="#page-id-"+pageNumber; 
    $('.select').hide() 
    $(page).show() 

}

ましコピー＆ペースト、本当に何もしないどこかからではなく、現時点では。 Javascriptが分からない場合は、実際にテーブルのページ区切りを行う別のライブラリを使ってみてください。我々はjquery.Hereを使用して表の改ページを実行したい場合があります

出典

2014-12-29 09:16:16 Vincent

何回も私はあなた

を解答し、参照リンクを与えるでしょうjqueryの

$(document).ready(function(){ 
     $('#data').after('<div id="nav"></div>'); 
     var rowsShown = 4; 
     var rowsTotal = $('#data tbody tr').length; 
     var numPages = rowsTotal/rowsShown; 
     for(i = 0;i < numPages;i++) { 
      var pageNum = i + 1; 
      $('#nav').append('<a href="#" rel="'+i+'">'+pageNum+'</a> '); 
     } 
     $('#data tbody tr').hide(); 
     $('#data tbody tr').slice(0, rowsShown).show(); 
     $('#nav a:first').addClass('active'); 
     $('#nav a').bind('click', function(){ 

      $('#nav a').removeClass('active'); 
      $(this).addClass('active'); 
      var currPage = $(this).attr('rel'); 
      var startItem = currPage * rowsShown; 
      var endItem = startItem + rowsShown; 
      $('#data tbody tr').css('opacity','0.0').hide().slice(startItem, endItem). 
        css('display','table-row').animate({opacity:1}, 300); 
     }); 
    });

JSfiddle：あなたが使用することができますhttps://jsfiddle.net/u9d1ewsh/

出典

2015-01-29 03:49:40 anushree

ya nice。プラグインなしで誰もが望むならば、 –

jQueryに依存している場合に行く方法。 –

refリンクはもう機能しません.... – Kixoka

この関数。その私にとってhttps://convertintowordpress.com/simple-jquery-table-pagination-code/

function pagination(){ 
    var req_num_row=10; 
    var $tr=jQuery('tbody tr'); 
    var total_num_row=$tr.length; 
    var num_pages=0; 
    if(total_num_row % req_num_row ==0){ 
     num_pages=total_num_row/req_num_row; 
    } 
    if(total_num_row % req_num_row >=1){ 
     num_pages=total_num_row/req_num_row; 
     num_pages++; 
     num_pages=Math.floor(num_pages++); 
    } 
    for(var i=1; i<=num_pages; i++){ 
     jQuery('#pagination').append("<a href='#' class='btn'>"+i+"</a>"); 
    } 
    $tr.each(function(i){ 
     jQuery(this).hide(); 
     if(i+1 <= req_num_row){ 
      $tr.eq(i).show(); 
     } 

    }); 
    jQuery('#pagination a').click(function(e){ 
     e.preventDefault(); 
     $tr.hide(); 
     var page=jQuery(this).text(); 
     var temp=page-1; 
     var start=temp*req_num_row; 
     //alert(start); 

     for(var i=0; i< req_num_row; i++){ 

      $tr.eq(start+i).show(); 

     } 
    }); 
}

出典

2015-12-14 20:43:28

から取られ、最良かつ最も簡単な方法、Bootply http://www.bootply.com/lxa0FF9yhw#

まず、プロジェクト

にブートストラップが含まれ、あなたは、このコードを書いているのJavaScriptファイルを含める：

を

$.fn.pageMe = function(opts){ 
    var $this = this, 
     defaults = { 
      perPage: 7, 
      showPrevNext: false, 
      hidePageNumbers: false 
     }, 
     settings = $.extend(defaults, opts); 

    var listElement = $this; 
    var perPage = settings.perPage; 
    var children = listElement.children(); 
    var pager = $('.pager'); 

    if (typeof settings.childSelector!="undefined") { 
     children = listElement.find(settings.childSelector); 
    } 

    if (typeof settings.pagerSelector!="undefined") { 
     pager = $(settings.pagerSelector); 
    } 

    var numItems = children.size(); 
    var numPages = Math.ceil(numItems/perPage); 

    pager.data("curr",0); 

    if (settings.showPrevNext){ 
     $('<li><a href="#" class="prev_link">«</a></li>').appendTo(pager); 
    } 

    var curr = 0; 
    while(numPages > curr && (settings.hidePageNumbers==false)){ 
     $('<li><a href="#" class="page_link">'+(curr+1)+'</a></li>').appendTo(pager); 
     curr++; 
    } 

    if (settings.showPrevNext){ 
     $('<li><a href="#" class="next_link">»</a></li>').appendTo(pager); 
    } 

    pager.find('.page_link:first').addClass('active'); 
    pager.find('.prev_link').hide(); 
    if (numPages<=1) { 
     pager.find('.next_link').hide(); 
    } 
    pager.children().eq(1).addClass("active"); 

    children.hide(); 
    children.slice(0, perPage).show(); 

    pager.find('li .page_link').click(function(){ 
     var clickedPage = $(this).html().valueOf()-1; 
     goTo(clickedPage,perPage); 
     return false; 
    }); 
    pager.find('li .prev_link').click(function(){ 
     previous(); 
     return false; 
    }); 
    pager.find('li .next_link').click(function(){ 
     next(); 
     return false; 
    }); 

    function previous(){ 
     var goToPage = parseInt(pager.data("curr")) - 1; 
     goTo(goToPage); 
    } 

    function next(){ 
     goToPage = parseInt(pager.data("curr")) + 1; 
     goTo(goToPage); 
    } 

    function goTo(page){ 
     var startAt = page * perPage, 
      endOn = startAt + perPage; 

     children.css('display','none').slice(startAt, endOn).show(); 

     if (page>=1) { 
      pager.find('.prev_link').show(); 
     } 
     else { 
      pager.find('.prev_link').hide(); 
     } 

     if (page<(numPages-1)) { 
      pager.find('.next_link').show(); 
     } 
     else { 
      pager.find('.next_link').hide(); 
     } 

     pager.data("curr",page); 
     pager.children().removeClass("active"); 
     pager.children().eq(page+1).addClass("active"); 

    } 
};

テーブルのtbodyにIDを与え、テーブルの後に 'div'を追加する必要がありますあなたのテーブルのデータがロードされるときにページネーションのため

 <table class="table" id="myTable"> 
      <thead> 
       <tr> 
        <th>...</th> 
       </tr> 
      </thead> 
      <tbody id="myTableBody"> 
      </tbody> 
     </table> 
     <div class="col-md-12 text-center"> 
      <ul class="pagination pagination-lg pager" id="myPager"></ul> 
     </div>

は、単に「perPage」の値は、あなたがしたいどのように多くのページあたりの要素を設定することで、この

$('#myTableBody').pageMe({pagerSelector:'#myPager',showPrevNext:true,hidePageNumbers:false,perPage:4});

を呼び出します。

出典

2015-12-16 16:55:27 jon

私はこのコードを試しています。しかし、毎回私はそれを実行するコンソールでこのエラーが発生します 'TypeError：listElement.childrenは関数ではありません'私は別のファイルにコードを入れているので、 '（jQuery）;'で私のコードを終了しようとしましたが、同じエラー。 – Jaylen

あなたはhtmlにそれを含めましたか？ – jon

ありがとうございます！私はずっと多くの時間を節約しました。 – Robert

例を参照して、breedjs（jQueryプラグイン）を使用して、テーブルをページ分割する簡単な方法があります：

<table> 
    <thead> 
    <tr> 
     <th>Name</th> 
     <th>Gender</th> 
     <th>Age</th> 
     <th>Email</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr b-scope="people" b-loop="person in people" b-paginate="5"> 
     <td>{{person.name}}</td> 
     <td>{{person.gender}}</td> 
     <td>{{person.age}}</td> 
     <td>{{person.email}}</td> 
    </tr> 
    </tbody> 
</table> 
<ul></ul>

var data={ people: [ {...}, {...}, ...] }; 

$(function() { 
    breed.run({ 
    scope: 'people', 
    input: data, 
    runEnd: function(){ //This runEnd is just to mount the page buttons 
     for(i=1 ; i<=breed.getPageCount('people') ; i++){ 
     $('ul').append(
      $('<li>',{ 
      html: i, 
      onclick: "breed.paginate({scope: 'people', page: " + i + "});" 
      }) 
     ); 
     } 
    } 
    }); 
});

あなたがページを変更するたびに

HTML 、電話する：

breed.paginate({scope: 'people', page: pageNumber);

More info。

Working example。

出典

2016-04-03 18:33:11

HTMLテーブルでページ番号を使用するには？

答えて

関連する問題