JS再構成ページング
13816 ワード
JS再構成ページング
以前にJqueryページングコンポーネントを書いたことがありますが、当時書いたコンポーネントには欠点がありました.当時のJSプラグインはこのように設計されていました.例えば、-->クエリーボタン-->ajaxをクリックして総ページ数とすべてのデータを返すように要求し、総ページ数を手に入れて私のページングコードを呼び出し、合計何ページを計算し、ページ番号ボタンを表示し、コールバックに成功した後、さらにAjaxリクエストを送り、すべてのデータリクエストを返します.これには、クエリーボタンをクリックするたびに2つのAJAXリクエストが連続して送信され、フロントエンドのパフォーマンスに友好的ではないという欠点があります.だから今晩彼らに再カプセル化して、もちろん以前の論理は変わっていません.ただ1つの構成項目と数行のコードを追加して、初期化の時に1つの方法で初期化しました.次のようなJSPedbleがあります.
JSPedbleアドレスは次のとおりです:ページ番号をクリックして、火狐やグーグルコンソールを使って私が印刷したデータを見て、へへ!
構成パラメータは次のとおりです.
container
'、ページコンテナのデフォルトは空です.
perPage
10,1ページあたりのデータ数デフォルトで10データ
curIndex
1現在のインデックスは、最初のページからデフォルトで開始されます.
itemCount
',レコード総数はデフォルトで空の必須開発に返される
totalPages
0,合計何ページを開発して総数を返して計算する必要があります
buttonAmount
10ページごとに表示されるボタンの数
isAutoClick
trueは、前のページと次のページがデフォルトでtrueに追加されたパラメータとしてカプセル化されているかどうかです.
すべてのJSコードは以下の通りです.
呼び出し方法は次のとおりです.
1. 1つ目は、isAutoClickパラメータがtrueにデフォルトで設定されているすべてのクリックがページングコードの内部で処理されていることです.欠点は、クエリーボタンをクリックするたびにajaxリクエストが2回連続して送信されることです.sAutoClick
2. 2つ目の初期化方法は、isAutoClick falseを参照してインスタンス化した後、外部でclickイベントを呼び出して他のことをします.次のようにします.
第2の方法の利点:クエリーボタンをクリックした後、一度だけリクエストが成功した後、ページングコードを初期化し、あるページをクリックするコードを書き、まだクリックしていないので、最初は一度だけリクエストします.
DEMOダウンロード
以前にJqueryページングコンポーネントを書いたことがありますが、当時書いたコンポーネントには欠点がありました.当時のJSプラグインはこのように設計されていました.例えば、-->クエリーボタン-->ajaxをクリックして総ページ数とすべてのデータを返すように要求し、総ページ数を手に入れて私のページングコードを呼び出し、合計何ページを計算し、ページ番号ボタンを表示し、コールバックに成功した後、さらにAjaxリクエストを送り、すべてのデータリクエストを返します.これには、クエリーボタンをクリックするたびに2つのAJAXリクエストが連続して送信され、フロントエンドのパフォーマンスに友好的ではないという欠点があります.だから今晩彼らに再カプセル化して、もちろん以前の論理は変わっていません.ただ1つの構成項目と数行のコードを追加して、初期化の時に1つの方法で初期化しました.次のようなJSPedbleがあります.
JSPedbleアドレスは次のとおりです:ページ番号をクリックして、火狐やグーグルコンソールを使って私が印刷したデータを見て、へへ!
構成パラメータは次のとおりです.
container
'、ページコンテナのデフォルトは空です.
perPage
10,1ページあたりのデータ数デフォルトで10データ
curIndex
1現在のインデックスは、最初のページからデフォルトで開始されます.
itemCount
',レコード総数はデフォルトで空の必須開発に返される
totalPages
0,合計何ページを開発して総数を返して計算する必要があります
buttonAmount
10ページごとに表示されるボタンの数
isAutoClick
trueは、前のページと次のページがデフォルトでtrueに追加されたパラメータとしてカプセル化されているかどうかです.
すべてのJSコードは以下の通りです.
function Pagination(){
this.config = {
container : '', //
perPage : 10, // 10
curIndex : 1, //
itemCount : 100, // 100
totalPages : 0, //
buttonAmount : 10, //
isAutoClick : true // true
};
};
Pagination.prototype = {
constructor:Pagination,
init: function(customConfig,callback){
this.config = $.extend(this.config, customConfig || {});
var _self = this,
_config = _self.config;
_self._query(callback);
return this;
},
_query: function(callback){
var _self = this,
_config = _self.config;
var start,
end,
html = '',
str = '';
_self._calculate();
start = Math.max(1,_config.curIndex - parseInt(_config.buttonAmount/2));
end = Math.min(_config.totalPages,start + _config.buttonAmount - 1);
str += '<div class="PagerView">';
// 1
if(_config.totalPages > 1) {
if(_config.curIndex != 1) {
str += '<a href="javascript://1"><span>|<</span></a>';
str += '<a href="javascript://' + (_config.curIndex-1) + '"><span><<</span></a>';
}else {
str += '<span>|<</span>';
str += '<span><<</span>';
}
}
for(var i = start; i <= end; i+=1) {
if(i == _config.curIndex) {
str += '<span class="on">' + i + "</span>";
}else {
str += '<a href="javascript://' + i + '"><span>' + i + "</span></a>";
}
}
if(_config.totalPages > 1){
if(_config.curIndex != _config.totalPages){
str += '<a href="javascript://' + (_config.curIndex+1) + '"><span>>></span></a>';
str += '<a href="javascript://' + _config.totalPages + '"><span>>|</span></a>';
}else{
str += '<span>>></span>';
str += '<span>>|</span>';
}
}
str += ' ' + _config.totalPages + ' , ' + _config.itemCount + ' ';
str += "</div>";
//
$(_config.container).html(str);
if(_config.isAutoClick){
//
var a_list = $(_config.container + ' a');
for(var i=0; i<a_list.length; i++){
a_list[i].onclick = function(){
var index = $(this).attr('href');
if(index != undefined && index != ''){
index = parseInt(index.replace('javascript://', ''));
_self.click(index,callback);
}
};
}
}
return this;
},
_getSelectValue: function(select){
var idx = select.selectedIndex, //
option,
value;
if(idx > -1) {
option = select.options[idx]; // option
console.log(option);
value = option.attributes.value;
return (value && value.specified) ? option.value : option.text;
}
return null;
},
click: function(index,callback) {
var _self = this,
_config = _self.config;
_config.curIndex = index;
_self._query(callback);
callback && $.isFunction(callback) && callback(_config);
return this;
},
/**
* .
*/
_calculate: function(){
var _self = this,
_config = _self.config;
// = parseInt(Math.ceil( / ),10)
_config.totalPages = parseInt(Math.ceil(_config.itemCount/_config.perPage),10);
_self.curIndex = parseInt(_self.curIndex,10);
if(_self.curIndex > _config.totalPages) {
_self.curIndex = _config.totalPages;
}
}
};呼び出し方法は次のとおりです.
1. 1つ目は、isAutoClickパラメータがtrueにデフォルトで設定されているすべてのクリックがページングコードの内部で処理されていることです.欠点は、クエリーボタンをクリックするたびにajaxリクエストが2回連続して送信されることです.sAutoClick
var pager = new Pagination().init({
container: '#pager'
},function(cfg){
console.log(cfg);
});2. 2つ目の初期化方法は、isAutoClick falseを参照してインスタンス化した後、外部でclickイベントを呼び出して他のことをします.次のようにします.
var pager = new Pagination().init({
container: '#pager',
isAutoClick: false
});
//
$("#pager").delegate('a','click',function(){
var curIndex = $(this).attr('href');
if(curIndex != undefined && curIndex != ''){
curIndex = parseInt(curIndex.replace('javascript://', ''));
pager.click(curIndex,function(cfg){
console.log(cfg);
});
}
});第2の方法の利点:クエリーボタンをクリックした後、一度だけリクエストが成功した後、ページングコードを初期化し、あるページをクリックするコードを書き、まだクリックしていないので、最初は一度だけリクエストします.
DEMOダウンロード