自分で書かれたシンプルなページングコンポーネントである主な機能と実装はすべてJSにあります。ページを配置するためにDivを追加してページを生成し、コンテナのIDを指定します。
HTML構造は次のとおりです。
コードコピーは次のとおりです。
<ul id = "pagediv">
</ul>
class = "ページネーション"はページネーションスタイルを与えます、
ID = "Pagediv"は、JS生成されたペジネーションを配置するために使用されます
CSS構造は次のとおりです。
コードコピーは次のとおりです。
.pagination {
マージントップ:10px;
マージンボトム:10px;
ディスプレイ:インラインブロック。
パディング左:0;
マージン:20px 0;
ボーダーラジウス:4px;
}
.pagination> li {
表示:インライン;
}
.pagination> li:first-child> a {
マージン左:0;
Border-Top-Left-Radius:4px;
国境圏の左radius:4px;
}
.pagination> li> a {
位置:相対;
フロート:左;
パディング:6px 12px;
マージン左:-1px;
ラインハイト:1.42857143;
色:#337AB7;
テキスト装置:なし;
バックグラウンドカラー:#fff;
境界線:1px solid #ddd;
カーソル:ポインター;
}
.pagination> li> a.navcur {
背景:#CCCCCCCC;
色:#ffffff;
}
以下はJS構造です。JQueryを参照してください
コードコピーは次のとおりです。
/**
* @pagecontentidページのdiv要素をレンダリングします
* @curpage現在の開始ページ
* @totalcountの総数
* @pagerowsページごとのディスプレイ数
* @callbackデータを表示するコールバック関数
*/
function Pagelist(pagecontentid、option){
this.pagecontentid = document.getElementById(pagecontentid);
this.curpage = option.curpage;
this.totalcount = option.totalcount;
this.pagerows = option.pagerows;
this.callback = option.callback;
this.pagesize = math.ceil(this.totalcount/this.pagerows);
}
pagelist.prototype = {
init:function(){
this.renderbtn();
}、
firstPage:function(){
var _self = this;
_self._firstpage = document.createelement( "li");
_self._firstpagea = document.createelement( "a");
_self._firstpagea.innerhtml = "Homepage";
_self._firstpage.appendchild(_self._firstpagea);
this.pagecontentid.appendchild(_self._firstpage);
_self._firstpage.onclick = function(){
_self.gotopage(1);
}
}、
lastPage:function(){
var _self = this;
_self._lastpage = document.createelement( "li");
_self._lastpagea = document.createelement( "a");
_self._lastpagea.innerhtml = "last page";
_self._lastpage.appendchild(_self._lastpagea);
this.pagecontentid.appendchild(_self._lastpage);
_self._lastpage.onclick = function(){
_self.gotopage(_self.pagesize);
}
}、
putpage:function(){
var _self = this;
_self._prew = document.createelement( "li");
_self._prewa = document.createelement( "a");
_self._prewa.innerhtml = "<<";
_self._prew.appendchild(_self._prewa);
this.pagecontentid.appendChild(_ self._prew);
_self._prew.onclick = function(){
if(_self.curpage> 1){
_self.curpage-;
}
_self.callback.call(this、this.curpage);
_self.init();
console.log(_ self.curpage);
}
}、
次のページ:function(){
var _self = this;
_self._next = document.createelement( "li");
_self._nexta = document.createelement( "a");
_self._nexta.innerhtml = ">>";
_self._next.appendchild(_self._nexta);
this.pagecontentid.appendchild(_self._next);
_self._next.onclick = function(){
if(_self.curpage <_ self.pagesize){
_self.curpage ++;
}
_self.callback.call(this、this.curpage);
_self.init();
console.log(_ self.curpage);
}
}、
Pagenum:function(){
var _self = this;
if(this.pagesize <= 10){
for(var i = 1、len = this.pagesize; i <= len; i ++){
_self._num = document.createelement( "li");
_self._numa = document.createelement( "a");
_self._numa.innerhtml = i;
_self._num.appendchild(_self._numa);
this.pagecontentid.appendChild(_ self._num);
_self._num.onclick = function(){
var curpage = $(this).text();
_self.gotopage(curpage);
}
}
}
それ以外{
if(_self.curpage <= 10){
for(var i = 1; i <= 10; i ++){
_self._num = document.createelement( "li");
_self._numa = document.createelement( "a");
_self._numa.innerhtml = i;
_self._num.appendchild(_self._numa);
this.pagecontentid.appendChild(_ self._num);
_self._num.onclick = function(){
var curpage = $(this).text();
_self.gotopage(curpage);
}
}
}
else if(_self.curpage> 10 && _ self.curpage <= this.pagesize){
if(this.pagesize <math.ceil(_self.curpage/10)*10){
for(var i = math.floor(_self.curpage/10)*10+1; i <= this.pagesize; i ++){
if(_self.curpage> this.pagesize)
戻る;
_self._num = document.createelement( "li");
_self._numa = document.createelement( "a");
_self._numa.innerhtml = i;
_self._num.appendchild(_self._numa);
this.pagecontentid.appendChild(_ self._num);
_self._num.onclick = function(){
var curpage = $(this).text();
_self.gotopage(curpage);
}
}
}それ以外{
if(math.ceil(_self.curpage/10)*10 == _ self.curpage){
for(var i = _ self.curpage-9; i <= _ self.curpage; i ++){
_self._num = document.createelement( "li");
_self._numa = document.createelement( "a");
_self._numa.innerhtml = i;
_self._num.appendchild(_self._numa);
this.pagecontentid.appendChild(_ self._num);
_self._num.onclick = function(){
var curpage = $(this).text();
_self.gotopage(curpage);
}
}
}それ以外{
for(var i = math.floor(_self.curpage/10)*10+1; i <= math.ceil(_ self.curpage/10)*10; i ++){10; i ++){
_self._num = document.createelement( "li");
_self._numa = document.createelement( "a");
_self._numa.innerhtml = i;
_self._num.appendchild(_self._numa);
this.pagecontentid.appendChild(_ self._num);
_self._num.onclick = function(){
var curpage = $(this).text();
_self.gotopage(curpage);
}
}
}
}
}
}
$( "。ページネーションli")。各(function(){
if($(this)[0] .innertext == _ self.curpage){
$( "。ページネーションli")。子供( "a")。removeclass( "navcur");
$(this).children( "a")。addclass( "navcur");
}
});
}、
getopage:function(curpage){
this.curpage = curpage;
this.callback.call(this、this.curpage);
this.init();
console.log(this.curpage);
}、
renderbtn:function(){
$( "。ページネーション")。html( "");
this.firstpage();
this.prewpage();
this.pagenum();
this.nextPage();
this.lastpage();
}
};
$(function(){
var pager = new Pagelist( "Pagediv"、{
呪い:1、
TotalCount:26、
ポケットロウ:1、
コールバック:callbackfuc
});
pager.init();
});
関数callbackfuc(curpage){
}
説明:
このページは10ページに基づいています。 10ページ未満の場合、すべてのページが表示されます。 10ページを超えると、ページは残りのページを表示するようになります。
呼び出し方法:
コードコピーは次のとおりです。
$(function(){
var pager = new Pagelist( "Pagediv"、{
呪い:1、
TotalCount:26、
ポケットロウ:1、
コールバック:callbackfuc
});
pager.init();
});
上記は、このページングコンポーネントのコアコードです。気に入っていただければ幸いです。