js簡單的分頁

2021-10-23 01:38:43 字數 2067 閱讀 6845

邏輯:從後台取出所有資料,在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 初始化歷史...