js對象實現(xiàn)數(shù)據(jù)分頁效果
更新時間：2021年09月17日 10:23:34 作者：fanfan_h
這篇文章主要為大家詳細(xì)介紹了js對象實現(xiàn)數(shù)據(jù)分頁效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js對象實現(xiàn)數(shù)據(jù)分頁效果的具體代碼，供大家參考，具體內(nèi)容如下
實現(xiàn)數(shù)據(jù)分頁要清楚這個的方面的設(shè)計：
1.先模擬建立一個后臺數(shù)據(jù)庫，如下：
var peoson=[
{
"id":"1",
" name":"鞠婧祎",
"sex":"女",
"age":"25",
"class":"八班",
"habby":"跳舞",
"score":"40",
"addess":"陜西西安長安區(qū)"
},
{
"id":"2",
" name":"關(guān)曉彤",
"sex":"女",
"age":"20",
"class":"八班",
"habby":"跳舞",
"score":"40",
"addess":"陜西西安長安區(qū)"
},
{
"id":"3",
" name":"趙麗穎",
"sex":"女",
"age":"26",
"class":"八班",
"habby":"跳舞",
"score":"40",
"addess":"陜西西安長安區(qū)"
},
{
"id":"4",
" name":"薛之謙",
"sex":"男",
"age":"37",
"class":"八班",
"habby":"跳舞",
"score":"40",
"addess":"陜西西安長安區(qū)"
}
]
2.設(shè)置每頁的數(shù)據(jù)量，當(dāng)前頁數(shù)以及總頁數(shù)
用函數(shù)動態(tài)設(shè)置總頁數(shù)，根據(jù)總的數(shù)據(jù)量除以每頁數(shù)據(jù)量來計算；
用函數(shù)動態(tài)設(shè)置每頁里的數(shù)據(jù)是由總數(shù)據(jù)中的哪幾條；
Allpage: function () {
this.allpage = Math.ceil(this.Message.length / this.perpage);
console.log(this.Message.length);
console.log(this.allpage);
},
Nowpagenum:function(n){
var first=(n-1)*this.perpage; //0
var last=n*this.perpage ; //10
this.nowpagenum =this.Message.slice(first,last);
},
3.動態(tài)創(chuàng)建dom元素，給最大塊添加子元素，用來存放每一條數(shù)據(jù)
Creatnews:function() {
this.list.innerHTML = "";
for (var i = 0; i < this.perpage; i++) {
var page_list = document.createElement("div");
page_list.className = "pagelist";
for (var key in this.nowpagenum[i]) {
var per_child = document.createElement("div");
per_child.className = "perchild";
page_list.appendChild(per_child);
per_child.innerHTML = this.nowpagenum[i][key];
//console.log(this.nowpagenum[i]);
}
this.list.appendChild(page_list);
}
},
4.創(chuàng)建列表下面的頁數(shù)，進(jìn)行前縮進(jìn)，后縮進(jìn)和前后縮進(jìn)
假設(shè)總頁數(shù)為
如果當(dāng)前頁數(shù)大于5頁會進(jìn)行前縮進(jìn)，前面的頁數(shù)從2到當(dāng)前頁數(shù)減一的頁數(shù)縮進(jìn)；
如果當(dāng)前頁數(shù)小于16時都會進(jìn)行后縮進(jìn)
介于兩者之間的頁數(shù)會進(jìn)行前后縮進(jìn)。
Page_ma:function(current,totle){
var str="";
for(var i=1;i <=totle;i++){
if(i==2 && current-3>i ){ //ǰ���� current>5
i=current-1;
str+="<li>...</li>";
}
else if(i==current+4 && current+4<totle){
i=totle-1;
str+="<li>...</li>"; //������ current<16
}
else{
if(current==i){
str+="<li class='minilist' style='background: pink'>"+i+"</li>" ;
}
else{
str+="<li class='minilist'>"+i+"</li>";
}
}
}
this .pageshu.innerHTML= str;
},
5.點擊頁數(shù)時，會跳轉(zhuǎn)到當(dāng)前頁數(shù)的數(shù)據(jù)，并進(jìn)行相應(yīng)的縮進(jìn)
Pageclick:function(){
var mini_list=document.getElementsByClassName ("minilist");
for(var k=0;k <mini_list.length;k++){
mini_list[k].onclick=function(){
Fenye.nowpage=parseInt (this.innerHTML );
// console.log(this.innerHTML); //mini_list[k] ������ı�
Fenye.Page_ma(Fenye.nowpage,Fenye.allpage);
Fenye.Pageclick();
Fenye.Creatnews ();
Fenye.Nowpagenum (Fenye.nowpage);
}
6.點擊上下頁，以及設(shè)置跳轉(zhuǎn)的頁數(shù)時，會跳轉(zhuǎn)到當(dāng)前頁數(shù)的數(shù)據(jù)，并進(jìn)行相應(yīng)的縮進(jìn)
Clickevent:function(){
Fenye. back.onclick =function(){
Fenye.nowpage--;
if(Fenye.nowpage<2){
Fenye.nowpage=1;
}
Fenye.Page_ma(Fenye.nowpage,Fenye.allpage);
Fenye.Pageclick();
Fenye.Creatnews ();
Fenye.Nowpagenum (Fenye.nowpage);
};
Fenye.go.onclick =function(){
if(Fenye.nowpage>=Fenye.allpage){
Fenye.nowpage=Fenye.allpage;
}
Fenye.nowpage++;
Fenye.Page_ma(Fenye.nowpage,Fenye.allpage);
Fenye.Pageclick();
Fenye.Creatnews ();
Fenye.Nowpagenum (Fenye.nowpage);
};
Fenye.tiao.onclick =function(){
var put=document.getElementById ("in_put");
Fenye.nowpage = parseInt (put.value ) ;
if(put.value>=Fenye.allpage){
Fenye.nowpage = parseInt (put.value );
}
Fenye.Page_ma(Fenye.nowpage,Fenye.allpage);
Fenye.Pageclick();
Fenye.Creatnews ();
Fenye.Nowpagenum (Fenye.nowpage);
}
}
html和css部分
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/message1.js " type="text/javascript "></script>
<script src="js/pagenews.js " type="text/javascript "></script>
<style>
*{
margin:0;
padding:0;
}
li{
list-style: none;
}
.block{
position: relative;
width:1200px;
height:600px;
margin:auto;
border:1px solid darkblue;
}
.totle {
width:100%;
height:40px;
display: flex;
flex-direction: row;
flex:1;
background: #b0ffd8;
text-align: center;
color: #5c5a5c;
font-size: 18px;
line-height: 40px;
}
.tot_1 {
flex: 1;
}
.tot_2{
flex:2.5;
}
.list{
width:1200px;
height:auto;
}
.pagelist{
width:100%;
height:35px;
border-bottom: 1px solid silver;
display: flex;
flex-direction: row;
text-align: center;
}
.perchild:nth-child(1) {
flex:1;
}
.perchild:nth-child(2) {
flex:1;
}
.perchild:nth-child(3) {
flex:1;
}
.perchild:nth-child(4) {
flex:1;
}
.perchild:nth-child(5) {
flex:1;
}
.perchild:nth-child(6) {
flex:1;
}
.perchild:nth-child(7) {
flex:1;
}
.perchild:nth-child(8) {
flex:2.5;
background: pink ;
}
.footer{
position: absolute;
bottom:5px;
left:10px;
}
#pageshu> li{
width:35px;
height:35px;
line-height: 35px;
display: inline-block;
text-align: center;
border:1px solid gray;
}
#back, #go{
width:60px;
height:35px;
line-height: 35px;
border:1px solid black;
display: inline-block;
text-align: center;
}
#foot_li>li:nth-child(2), #foot_li>li:nth-child(4), #foot_li>li:nth-child(5),#foot_li>li:nth-child(6){
display: inline-block;
}
#foot_li>li:nth-child(4)>input{
width:30px;
height:20px;
outline: none;
}
#foot_li>li:nth-child(5)>button{
background: #000bff;
color: #fff;
}
</style>
</head>
<body>
<div class="block">
<div class="totle">
<div class="tot_1">學(xué)號</div>
<div class="tot_1">姓名</div>
<div class="tot_1">性別</div>
<div class="tot_1">年齡</div>
<div class="tot_1">班級</div>
<div class="tot_1">愛好</div>
<div class="tot_1">學(xué)分</div>
<div class="tot_2">家庭住址</div>
</div>
<div class="list">
</div>
<div class="footer">
<ul id="foot_li">
<li id="back">上一頁</li>
<li>
<ul id="pageshu">
</ul>
</li>
<li id="go">下一頁</li>
<li>跳轉(zhuǎn)到<input id="in_put" type="text"/> </li>
<li><button id="tiao">跳轉(zhuǎn)</button></li>
<li>總頁數(shù):<span id="tot"></span></li>
</ul>
</div>
</div>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了JavaScript常用8種數(shù)組去重代碼實例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-09-09
本文總結(jié)了"異步模式"編程的4種方法，理解它們可以讓你寫出結(jié)構(gòu)更合理、性能更出色、維護(hù)更方便的Javascript程序2013-01-01
這篇文章主要介紹了javascript中如何快速獲取數(shù)組最后一個值問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
es6函數(shù)之尾調(diào)用優(yōu)化實例分析
這篇文章主要介紹了es6函數(shù)之尾調(diào)用優(yōu)化,結(jié)合實例形式分析了es6函數(shù)尾調(diào)用優(yōu)化相關(guān)功能、原理、實現(xiàn)方法及操作注意事項,需要的朋友可以參考下2020-04-04
JavaScript函數(shù)調(diào)用經(jīng)典實例代碼
JavaScript提供了4種函數(shù)調(diào)用,一般形式的函數(shù)調(diào)用、作為對象的方法調(diào)用、使用 call 和 apply 動態(tài)調(diào)用、使用 new 間接調(diào)用,下面這篇文章主要給大家介紹了關(guān)于JavaScript函數(shù)調(diào)用的相關(guān)資料,需要的朋友可以參考下2021-12-12
利用javascript實現(xiàn)全部刪或清空所選的操作
這篇文章主要介紹了利用javascript實現(xiàn)全部刪或清空所選的操作,需要的朋友可以參考下2014-05-05
如何在JavaScript中使用map()迭代數(shù)組詳細(xì)步驟
在JavaScript中循環(huán)迭代數(shù)組的方法有很多種,下面這篇文章主要給大家介紹了關(guān)于如何在JavaScript中使用map()迭代數(shù)組的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02
這篇文章主要介紹了js實現(xiàn)表單項的全選、反選及刪除操作,結(jié)合實例形式分析了基于dedecms后臺使用js實現(xiàn)表單項的全選、反選及刪除相關(guān)操作技巧,需要的朋友可以參考下2020-06-06
JavaScript實現(xiàn)微信紅包算法及問題解決方法
這篇文章主要介紹了JavaScript實現(xiàn)微信紅包算法及遇到的問題解決方法,需要的朋友可以參考下2018-04-04
webuploader實現(xiàn)上傳圖片到服務(wù)器功能
這篇文章主要為大家詳細(xì)介紹了webuploader實現(xiàn)上傳圖片到服務(wù)器功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-08-08