jqueryを使用してhtmlでページ番号を作成するには

私は以下のhtmlタグを持っています。私はページにn個のボタンとそれぞれのテーブルを持っています。ページは動的であり、データが供給されるバックエンドごとにデータが増加または減少する可能性があります。ページネーションを実装し、ページあたり2つのボタンとテーブルのみを紹介したいと思います。ユーザーが残りのデータを表示するためにページネーションを使用する必要があることを確認したい場合。jqueryを使用してhtmlでページ番号を作成するには

<html> 
     <body> 
     <div id="tab"> 
      <div> 
      <button type="button" class="button">Source_1</button> 
      </div> 
      <div class="logtitude"> 
      <table class="data_table"> 
      <tr> 
      <th>111</th> 
      </tr> 
      <tr> 
      <td>111</td> 
      </tr> 
      </table> 
      </div> 
      <div> 
      <button type="button" class="button">Source_2</button> 
      </div> 
      <div class="logtitude"> 
      <table class="data_table"> 
      <tr> 
      <th>222</th> 
      </tr> 
      <tr> 
      <td>222</td> 
      </tr> 
      </table> 
      </div> 
      <div> 
      <button type="button" class="button">Source_3</button> 
      </div> 
      <div class="logtitude"> 
      <table class="data_table"> 
      <tr> 
      <th>333</th> 
      </tr> 
      <tr> 
      <td>333</td> 
      </tr> 
      </table> 
      </div> 
     </div> 
     </body> 
    </html>

誰かが唯一の2 <div>buttons</div>ページあたりに表示するページネーションを達成するために私を助けることができます。

出典

2017-11-24 ArrchanaMohan

ページングを作成するためのレディメイドプラグインについては、https://stackoverflow.com/questions/7000048/slickgrid-vs-jqgridおよびhttps://www.slant.co/versus/4837/4840/~jqgrid_vs_datatablesを参照してください。 jqgridは、セルの独自のhtmlを作成するフォーマッターオプションを提供します。 – Anil

あなたはどのようにこのサイト http://www.learningjquery.com/2017/03/add-pagination-to-html-table-using-jquery を試し求めている場合は、いくつかの情報を持っていますが、あなたはチュートリアルを行う場合は....だけでなく、あなたが

出典

2017-11-24 04:52:41 CryTech

あなたはjQueryのデータテーブルを使用することができます間違っていない、それは非常に簡単で、 PAGINATION、SORT、SEARCH機能で使いやすい。

<link rel="stylesheet"href="http://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css"> 

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script> 

<script type="text/javascript" src="http://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> 

$(document).ready(function(){ 
    $('.data_table').DataTable(); 
});

上記のように、uは異なるクラス名またはIDを持つ複数のデータテーブルを作成できます。

出典

2017-11-24 05:08:10

ありがとうございました。私のアップデートを投稿しよう。 – ArrchanaMohan

次のエラーメッセージが表示されました。DataTables警告：テーブル以外のノードの初期化（DIV）。このエラーの詳細については、http：//datatables.net/tn/2を参照してください。私は、ボタンのdivタグだけではなく、テーブルを改ページしようとしていません。 – ArrchanaMohan

divとテーブルの両方に同じクラス名またはID名を使用している可能性があります。 –

jqueryを使用してhtmlでページ番号を作成するには

答えて

関連する問題