當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

html 前端分页代码怎么写,前端js写分页

發布時間：2023/12/31 HTML 25 豆豆

生活随笔收集整理的這篇文章主要介紹了 html 前端分页代码怎么写,前端js写分页小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

一個朋友要寫分頁問我怎么寫我就給寫了一個demo感興趣的可以參考下

一共三個文件 page.js page.html index.json

這三個文件要放在同一個目錄下這里面有ajax請求所以必須放在項目下

page.html

Document

margin:0;

padding:10px;

}

ul,li{

list-style:none;

}

li{

border-bottom:1px solid #ccc;

}

.sc{

float:right;

}

.page_item {

text-align:center;

line-height:20px;

font-size:14px;

float:left;

list-style:none;

border-width:0px;

background-color: #cccccc;

border-radius:5px;

margin-left:3px;

min-width:20px;

cursor:pointer;

}

.page_item.current {

background: rgb(69, 140, 204);

}

.floot ul {

float:right;

}

page.js

/**

* Created by prettyRain on 2018/11/22.

//分頁對象存放：當前頁、總頁數、當前頁數據、每頁顯示幾天

function PageBean(currentPage){

this.currentPage = currentPage;

this.list = [];

this.totalPage ;

this.config = {

pageSize:6,

obj:window.document.querySelector("#content"),

flootpages:document.querySelector("#flootpages")

}

PageBean.prototype = {

//拼接數據

clientPage : function(currentPage){

if(!!currentPage){

this.currentPage = currentPage;

}

this.list = [];

this.serverPage(function(that){

var list = that.list;

//拼接當頁數據

var str = '';

for(i in list){

str += '

+''+list[i].firstName+''

+''+list[i].middleName+''

+'收藏|移除'

}

that.config.obj.innerHTML = str;

//拼接頁碼

var pagestr = '';

//上一頁

if(parseInt(that.currentPage) > 1){

pagestr += '

＜上一頁'

}

//中間頁數

var startPage = parseInt(that.currentPage-2) > 1 ? parseInt(that.currentPage-2) : 1;

var endPage = parseInt(that.totalpages) - parseInt(that.currentPage) > 3 ? (parseInt(that.currentPage) + 3) : parseInt(that.totalpages);

for(var i = startPage; i <= endPage; i ++){

if(parseInt(that.currentPage) == i){

pagestr += '

'+i+'';

}else{

pagestr += '

'+i+'';

}

//下一頁

if(parseInt(that.currentPage) < parseInt(that.totalpages)){

pagestr += '

＜下一頁';

}

that.config.flootpages.innerHTML = pagestr;

});

//請求數據

serverPage : function(fn){

var httpRequest ;

var this_ = this;

if (window.XMLHttpRequest)

{

httpRequest=new XMLHttpRequest();

}else if (window.ActiveXObject)

{

httpRequest=new ActiveXObject("Microsoft.XMLHTTP");

}

if (httpRequest!=null)

{

httpRequest.onreadystatechange=function(data){

if(httpRequest.readyState == 4 && httpRequest.status == 200){

var resultJson = JSON.parse(data.currentTarget.responseText);

//計算出總頁數

this_.totalpages = resultJson.programmers.length%parseInt(this_.config.pageSize) == 0 ? resultJson.programmers.length/parseInt(this_.config.pageSize) : parseInt(resultJson.programmers.length/parseInt(this_.config.pageSize))+1;

//取出當前頁要顯示的數據

var startNum = (parseInt(this_.currentPage)-1)*parseInt(this_.config.pageSize);

var endNum = parseInt(this_.currentPage)*parseInt(this_.config.pageSize);

for(var i = startNum; i < endNum; i++){

this_.list.push(resultJson.programmers[i]);

}

//執行回調

fn&&fn(this_);

}

};

httpRequest.open("GET","../demo/index.json",true);

httpRequest.send(null);

}

// 初始化數據

var pb = new PageBean(1);

function toPage(currentPage){

pb.clientPage(currentPage);

}

//執行分頁

toPage();

index.json

{

"programmers": [

{ "firstName": "楷書", "middleName":"十肆卷靳綏東if奇偶大四積分及時凍結佛", "lastName": "佩奇撰寫" },

{ "firstName": "行書", "middleName":"十五卷激發ISO積分iOS水電費水電費", "lastName": "小豬撰寫" },

{ "firstName": "草書", "middleName":"十六卷恐怕佛教撒旦教覅偶圣誕節", "lastName": "法師撰寫" },

{ "firstName": "隸書", "middleName":"十七卷就看見噢時代峰峻搜ifJOJO", "lastName": "無名氏撰寫" },

{ "firstName": "證書", "middleName":"十八卷副書記愛哦放假啊搜和金佛額外", "lastName": "晴子撰寫" },

{ "firstName": "協書", "middleName":"十九卷發到手機哦if驕傲餓死of加爾文", "lastName": "安華撰寫" },

{ "firstName": "協2書", "middleName":"十0卷大家佛大四級佛ID身份", "lastName": "安華撰寫2" },

{ "firstName": "隸書", "middleName":"十三卷積分掃飛機上的圣誕節方式", "lastName": "王簡撰寫" },