原生js之簡單資料分頁

1. 最簡單的資料分頁

完整**

lang

="en"
>
>
charset
="utf-8"
>
>
titletitle
>
head
>
>
*div
.left,.right
.bg.num div
style
>
>
class
="left"
>
>
class
="num"
>
class
="bg"
>
1div
>
>
2div
>
>
3div
>
>
4div
>
>
5div
>
>
6div
>
>
7div
>
>
8div
>
>
9div
>
>
10div
>
div>
class
="right"
>
>
>
var leftbutton = document.
getelementsbyclassname
("left")[
0];var rightbutton = document.
getelementsbyclassname
("right")[
0];var numlist = document.
getelementsbyclassname
("num")[
0].children;
var currentcheck =0;
leftbutton.
onclick
=function()
}};    rightbutton.
onclick
=function()
};for(
var i=
0;i)function
setcolor()
else}}
script
>
body
>
html
>

效果圖：

思想：前縮，後縮，前後都縮：為前縮和後縮規定乙個臨界條件。當只滿足前縮的臨界條件時，前縮，同理，滿足後縮的臨界條件時，後縮。當滿足前縮後縮的臨界條件時，前後都縮

>

lang
="en"
>
charset
="utf-8"
>
>
title
>
head
>
>
*.beforepage,.nextpage
ulli
.all
style
>
>
class
="all"
>
class
="beforepage"
>
>
class
="pagenum"
>
ul>
class
="nextpage"
>
>
div>
>
/*    * 要求：前縮:1....26,27,28,29,30  後縮:1,2,3,4,5...30  中縮1...15,16,17,18,19...30
* 前縮的臨界條件為16，後縮的臨界條件為22
* */
var maxnum =30;
var currentnum =1;
var nextpage = document.
getelementsbyclassname
("nextpage")[
0];var beforepage = document.
getelementsbyclassname
("beforepage")[
0]var pagenum = document.
getelementsbyclassname
("pagenum")[
0];var lilist = document.
getelementsbyclassname
("lilist");
pagenum.innerhtml =
createpagesnum()
;    nextpage.
onclick
=function()
pagenum.innerhtml =
createpagesnum()
;};    beforepage.
onclick
=function()
pagenum.innerhtml =
createpagesnum()
;};function
createpagesnum()
else
if(currentnum<
22&& i==currentnum+5)
else
else
str +=liele
}}        console.
log(str)
return str
}script
>
body
>
html
>

JS簡單原生分頁

html部分隨便寫即可 不同需求寫不同樣式 html 這裡簡單些乙個ul標籤用來寫入內容 odd呢代表我們分頁要寫入的a標籤頁數 這裡後台我用到了node來書寫，不過原理是相通的，用其他後端語言也是可以實現的。node const express require express 建立乙個伺服器 co...

Thinkphp 實現簡單資料分頁

thinkphp框架中自帶分頁類page.class.php，在thinkphp library think目錄下面 在控制器中先導入這個分頁類 use think page 匯入分頁類後台 n m tablename condition id uid count n where condition...

原生 js 寫分頁

這段 是用原生 js 寫的乙個分頁的效果 doctype html html lang en head meta charset utf 8 title document title style ul ul li div ul background style head body div id di...