ページングの Web 標準実装 bar_javascript スキル

ページング バーは、Web ページで最も一般的なコンポーネントです。このブログ投稿では、web2.0 ページング バーの標準的な例を示し、簡単な分析を行います。このページング バーのインターフェイス効果は次のとおりです:

このページング バー コンポーネントには次の特性があります:

1。現在のページ番号に関係なく、ページング バーには常に最初のページのページ番号と最後のページのページ番号が表示されます (上の図を参照)。これにより、ユーザーは最後のページ番号から合計ページ数がわかるだけでなく、最後のページと最初のページの間を簡単に移動することができます。

2. は、表示されるページ番号 (省略記号は 1 と数えます) の数を常に固定します。たとえば、9 に固定します。以下の 2 つの図に示すように、現在のページ番号が 1 または 9 (またはその他の番号) の場合、表示されるページ番号の数は 9 です。 。このように、Ajax ページングを実行する場合、ボタンの位置が変わるため、ユーザーは移動することなく、次のページ ボタンの位置は常に変更されません。マウスを使用すると、ユーザー エクスペリエンスが大幅に向上します。

3. 表示されるページ番号の数は、インターフェースのパラメーターを通じて簡単に設定できます。 genPaginationHtml() インターフェースの deviation (オフセット) パラメーターは、現在のページ番号の左側または右側に表示されるページ番号の数を設定するために使用されます。したがって、表示されるページ番号の総数は 2*偏差 1 となります。たとえば、この例では、deviation が 4 に設定されている場合、合計 9 ページ番号が表示されます。

この例の次のソース コードをコメントアウトし、インターフェイスのコメント前後の 2 つの違いを比較してください。 Google のページネーションの動作を比較することもできます。その動作は、この例の次のコードをコメントアウトした後の動作であることがわかります。この例を作成するときに、Google のページネーションの動作を研究し、それを徐々に進化させ、拡張しました。

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

//合計コード番号を固定します
if ( curPage - startNum < 偏差) {
endNum = 偏差 - (curPage - startNum);
endNum = endNum > pagesCount : endNum>}
if (endNum - curPage < 偏差 ) {
startNum -= curPage);


genPaginationHtml(rowsCount , pageSize, curPage, toPage,deviation) インターフェイス パラメーターは次のように説明されます:
rowsCount(number): レコードの総数。

pageSize(number): 各ページに表示されるレコードの数。
curPage(number): 現在のページ番号。
toPage(string): 指定されたページにジャンプするロジックを実装する関数名。
deviation(number): 現在のページ番号の左側または右側に表示されるページ番号の数。


ページバーサンプルのダウンロード