專案資料查詢頁，因為可能同時存在多個列表查詢，並且資料量較大，需要用到分頁，這時候自己可以寫乙個簡單的分頁元件
最基本的功能，比如資料有5頁，1，2，3，4，5 點選哪個就查詢哪一頁的資料，點選5，就查詢第5頁的資料
類似<前一頁，>後一頁的翻頁功能
如果資料有230條，每頁10條資料，那麼一共有23頁；
但是頁面需要把 1 - 23 頁碼全部顯示出來嗎，這樣很長，也影響美觀，所以要設計頁面顯示方式
將js引入也頁面即可
/*
分頁物件定義js邏輯
create 2020-04-26
author narule
*///分頁元件物件定義
function pagecomponents (id,pagesize,outrequst)
// 分頁元件構造方法和公共函式定義
pagecomponents.prototype = else
this.setpage();
}}, //頁面跳轉
gopage : function(num)
}, //向前跳轉一頁
beforepage : function()
}, //向後跳轉一頁
afterpage : function()
}, //設定被點選頁面高亮
changeactivetag : function(oldpagenum,newpagenum)
}else if(oldpagenum < newpagenum)else
//需要重置翻頁
this.setpage();}}
} //$(oid).class.remove('active');
//$(nid).class.add('active');
document.getelementbyid(this.idahead + newpagenum).classlist.add('active');
}, setpage : function ()else
this.pagebody = this.pagebody + '' + abody + ''
}if(this.pagebody == "")else if(this.totalpage > 1);
document.getelementbyid(this.pageid).innerhtml = this.pagebody;
},}/****************************
下面map物件構建及清空等方法
推薦在本地初始化分頁時使用
*/var pagemap = new map(); //用於存放分頁物件
/*外部通過id呼叫物件方法*/
function gopage(id,num)
function beforepage(id)
function afterpage(id)
/* 分頁元件清空body */
function pagemapinit());
}/*****************************/
//存放到map方便後面獲取此物件 呼叫物件方法
document.getelementbyid(this.idahead + oldpagenum).classlist.remove('active'); 表示移除a標籤 active class
document.getelementbyid(this.idahead + newpagenum).classlist.add('active'); 表示新增a標籤 active class 高亮顯示
html頁面中 分頁標籤的樣式設定
/*
分頁*/
ul.pagination
ul.pagination li
ul.pagination li a
ul.pagination li a.active
ul.pagination li a:hover:not(.active)
js頁面分頁
分頁相關 let pageutil pageutil.pageindex 1 當前頁數 pageutil.pagerows 0 每頁記錄數 pageutil.pagecount 0 總頁數 pageutil.list 要分頁的list資料 pageutil.curlist 當前頁顯示的資料 初始分頁...
JS前端分頁
因專案需求 需要前端乙個純js分頁 上網找了好多例子，終於實現該功能 以下直接上 html js 查詢資料介面 返回json var dataobj function search logicid,moid datatype json success function data else 分頁 fu...
js分頁實現，前端實現。
主要是借鑑了網上乙個例子，自己重新加了樣式，新增了跳轉，修改了一些小地方，用於和大家一起分享，前端分頁的技巧，的資料是我已經寫好了，其實大家也可以前端渲染 然後再分頁，都是可以的。其實分頁最關鍵是這兩句 var startrow currentpage 1 pagesize 1 currentpag...