邏輯:從後台取出所有資料,在js進行頁數等的判斷
引入bootstrap(主要是為了好看一點);兩個div用於顯示當頁的資料和頁碼;當然還要引入js
效果如下="row"
>
="col-lg-1"
>
<
/div>
="col-lg-10" id=
"item"
>
<
/div>
<
/div>
="row"
>
="col-lg-1"
>
<
/div>
="col-lg-10" style=
"text-align:center" id=
"pagniation"
>
<
/div>
<
/div>
$(function()
;//存放所有資料
var pagenumber;
//總頁數
var shownumber=6;
//每頁顯示數
var pagenumbernow=1;
//當前頁
inittable()
;//獲取資料並第一次載入頁面
function
inittable()
});}
function
initdata
(data,start,end)
//各種頁碼按鈕
$pagniation.
('共'
+taskdatalist.length+
'條');if
(parseint
(pagenumbernow)-2
>
1&&pagenumbernow>3)
if(pagenumbernow>1)
if(pagenumber<=
5||pagenumbernow<=3)
else
$pagniation.
($btn);}
}else
else
$pagniation.
($btn);}
}if(parseint
(pagenumbernow)+1
parseint
(pagenumbernow)+2
$pagniation.
("跳至");
var $jump =$(
'').attr
('id'
,'jumppage').
attr
('type'
,'number').
attr
('style'
,'width:5ex;').
attr
('step'
,'1').
attr
('min'
,'1').
attr
('max'
, pagenumber)
; $pagniation.
($jump)
; $pagniation.
("頁");
$('#jumppage').
bind
('keyup'
,function
(e)elseif(
parseint
(this
.value)
<0)
})$(
'#jumppage').
keypress
(function
(event)})
}$('#taskpagniation').
delegate
('button'
,'click'
,function
(e))})
;
JS簡單原生分頁
html部分隨便寫即可 不同需求寫不同樣式 html 這裡簡單些乙個ul標籤用來寫入內容 odd呢代表我們分頁要寫入的a標籤頁數 這裡後台我用到了node來書寫,不過原理是相通的,用其他後端語言也是可以實現的。node const express require express 建立乙個伺服器 co...
js實現簡單分頁瀏覽
最後實現如下 裡面還沒有磚塊,用js動態插入 這個是底下的導航 共x頁 var a math.floor math.random 10 50 var fatherbox document.getelementbyid bigbox for var i 0 i a i function gopage ...
js實現乙個簡單的分頁
tip 只適合一些 小打小鬧 的 js部分如下 var sizep 5 設定每頁顯示的個數 var size sizep 每頁顯示的個數 var up 0 當前頁開始的位置 var down 0 當前頁結束的位置 var v1 0 var v2 0 var up1 0 var up2 0 初始化歷史...