ページング効果を実現するための jQuery プラグインのページネーション_jquery

実用的な jQuery ページング効果プラグイン jquery.pagination.js は、jQuery 実装に基づいており、pageselectCallback 関数のコールバック呼び出しに従って、動的データを呼び出すことができます。現在のメソッドは、JSON データを JS ファイルに生成します。データは JSON 形式のデータです。 デメリット データは一度に読み込まれるため、効率は低下しますが、プラグインは多くのパラメーターのカスタム設定機能をサポートしていますが、独自のアイデアに従って改善することができます。

使用法:

1. プラグインと jQuery をロードします

<link rel="stylesheet" href="pagination.css"> 
<script type="text/javascript" src="jquery.min.js"></script> 
<script type="text/javascript" src="jquery.pagination.js"></script> 

2.HTML コンテンツ

コードをコピーします コードは次のとおりです:

2acddfcd60a06a3dd187b705d4d4012616b28748ea4df4d9c2150843fecfba68

3. 関数呼び出し

<script type="text/javascript"> 
function pageselectCallback(page_index, jq){ 
        alert(page_index); 
        return false; 
      } 
$(document).ready(function(){ 
$(".pagination").pagination(100, { 
  callback: pageselectCallback, 
  
   num_edge_entries: 1, 
  
  }); 
}); 
</script> 

パラメータ設定説明

パラメータ名 パラメータの説明 オプションの値 デフォルト値

callback ページングボタンをクリックするためのコールバック関数 function function(){return false;}
current_page 初期化中に選択されたページ番号 数値 0
items_per_page ページごとに表示されるレコード数 数値 10
link_to ページング リンク文字列 #
num_display_entries 最大表示ページ数 数値 11
next_text 「次のページ」文字列に表示されるテキスト Next
next_show_always false に設定すると、ブール値が true
の場合にのみ「次のページ」ボタンが表示されます。 prev_show_always false に設定すると、「前へ」ボタンは前のページにも移動できる場合にのみ表示されます。ブール値 true
prev_text 「前のページ」に表示されるテキスト String Previous
num_edge_entries が 1 に設定されている場合、最初と最後のページは常に 1 または 0 0
で表示されます。 ellipse_text 現在のページセグメントから最初または最後のページまでの識別文字列 文字列 …
load_first_page true に設定すると、プラグインの初期化時にコールバック関数が実行されます。ブール値 true

デモを見る プラグインのダウンロード

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。