基於jQuery封裝的分頁元件（可自定義設定）

前幾天做了乙個vue的元件分頁，而現在需求是jquery的分頁，我就根據我自己的需求寫了乙個。

在網上找了很久的基於jquery的分頁封裝，可是都不是我想要的結果，那麼今天我就給大家看一下我的這個分頁。

你可以自行改變內容**來達到你的目的，例如：樣式的問題，你就可以自行調整css樣式。

1.看一下效果

2.下面就是具體介紹一下

（1）、首先是css樣式（可自行調節）當然你頁可以外鏈乙個css，最後會有整體的**展示！

body,

html 
* .page 
.pages 
.all_data 
.all_pages 
.page_left 
.page_footer 
.page_cont>div 
.hometrailer 
.updown 
.page_view 
.page_view ul 
.li 
.active 
.pages>div 
.page_input 
.page_btn 
.page_home 
.page_trailer 
.page_down 
.page_down_two 

function page(settings) 

//預設配置
page.prototype = ,
create: function()  條資訊/共 $ 頁
首頁腳頁
頁跳轉    
`;    this.refreshdom(this.settings);
this.bindevent();
},bindevent: function() );
$(this.settings.container).on("click", ".page_up", function()  else 
_this.settings.callback(_this.settings.nowpage)
_this.refreshdom(this.settings);
});$(this.settings.container).on("click", ".page_down", function()  else 
_this.settings.callback(_this.settings.nowpage)
_this.refreshdom(this.settings);
});//跳轉末頁
$(this.settings.container).on("click", ".page_trailer", function() );
//go跳轉
$(this.settings.container).on("click", ".page_btn", function()  else 
});},
refreshdom: function() `;
} else `;
}html += pagehtml;
}} else if(nowpage - bian > 0 && nowpage + bian < countpage) `;
} else `;
}html += pagehtml;
}} else if(nowpage + bian >= countpage) `;
} else `;
}html += pagehtml;}}
$(".li").click(function() )
}};    var pageinit = function(opts) ;
window.pageinit = $.pageinit = pageinit;

（4）、html**（封裝好的js和css，直接來看吧！）

Vue封裝分頁元件

使用vue做雙向繫結的時候，可能經常會用到分頁功能 接下來我們來封裝乙個分頁元件 先定義樣式檔案 pagination.css ul,li page bar page button disabled page bar li page bar li first child a page bar a p...

封裝element分頁元件

將 element ui 中分頁封裝成公共元件 admin後台中會有很多的 以及分頁的應用，所以考慮將分頁分裝成公共元件 封裝元件 vue頁面 background background current page.sync currentpage page size.sync pagesize la...

elementUI分頁元件封裝

在實際開發需求，產品需要的分頁元件比較簡單，只可以一頁頁地翻，就是為了防止用於直接翻看最後的資料 因為有一些歷史資料資料量比較大，檢視的意義不大，檢索效率比較低也比較忙，因為不希望使用者在翻頁的時候可以隨意翻看很久之前的資料 因此需要根據實際需求進行分頁元件封裝 以下封裝的分頁元件，勉強夠用，但是還...