好用的分頁(yè)控件有好多，但似乎自己實(shí)現(xiàn)和封裝一個(gè)比較方便，以后修改也方便。

大概的想法是創(chuàng)建一個(gè)page.js文件，把所需的函數(shù)封裝到window的page對(duì)象中。需要使用這個(gè)控件的時(shí)候，引用page.js文件，然后調(diào)用它里面的方法來(lái)初始化、更新和顯示控件。控件可以根據(jù)返回?cái)?shù)據(jù)的結(jié)果判斷要不要顯示總頁(yè)數(shù)和“末頁(yè)”按鈕。

效果如下：

有總頁(yè)數(shù)的情況：

沒(méi)總頁(yè)數(shù)的情況：

具體代碼：

page.js文件：

/*** 分頁(yè)控件：封裝了翻頁(yè)所需的參數(shù)、操作函數(shù)* 分頁(yè)控件容器用“page”類(lèi)標(biāo)識(shí)，比如：<div class="pageDiv page"></div>* @author: XuJijun */ (function(_win) {"use strict";//請(qǐng)求參數(shù)，保存了當(dāng)前頁(yè)數(shù)var pParam = {pageNo: 1, pageSize: 10, params: null, totalPage: 999};//指向搜索函數(shù)，用于翻頁(yè)的時(shí)候回調(diào)搜索函數(shù)var search;var _p = {// 初始化調(diào)用init : function(obj, args) {return (function() {//console.log(obj);//console.log(args);_p.fillHtml(obj, args);_p.bindEvent(obj, args);})();},// 填充htmlfillHtml : function(obj, args) {var html = "<a href='javascript:;' id='firstPage'>首頁(yè)</a>?"+ "<a href='javascript:;' id='previousPage'>上一頁(yè)</a>?"+ "第<input type='number' id='pageNo' min='1' max='999' value='1'/>頁(yè)<span id='totalPage'>（共<span id='pageCount'>999</span>頁(yè)）</span>"+ "<a href='javascript:;' id='nextPage'>下一頁(yè)</a>?"+ "<a href='javascript:;' id='lastPage'>末頁(yè)</a>";$(".page").html(html);},//綁定事件bindEvent: function (obj, args) {$("#firstPage").on("click", function() {pParam.pageNo = 1;search();});$("#lastPage").on("click", function(){pParam.pageNo = pParam.totalPage;search();});$("#nextPage").on("click", function() {if (pParam.pageNo == pParam.totalPage) {alert("已經(jīng)是最后一頁(yè)了！");return;}pParam.pageNo++;search();});$("#previousPage").on("click", function() {if (pParam.pageNo == 1) {alert("已經(jīng)是第一頁(yè)了！");return;}pParam.pageNo--;search();});// 頁(yè)數(shù)控件失去焦點(diǎn)：$("#pageNo").blur(function() {var pn = Number($("#pageNo").val());if (pn < 1) {pn = 1;$("#pageNo").val(pn);} else if (pn > pParam.totalPage) {pn = pParam.totalPage;$("#pageNo").val(pn);}pParam.pageNo = pn;search();});// 頁(yè)數(shù)回車(chē)：$("#pageNo").keyup(function(event) {if (event.which != 13) {return;}var pn = Number($("#pageNo").val());if (pn < 1) {pn = 1;$("#pageNo").val(pn);} else if (pn > pParam.totalPage) {pn = pParam.totalPage;$("#pageNo").val(pn);}pParam.pageNo = pn;search();});}};_win["page"] = {/*** 初始化，創(chuàng)建分頁(yè)控件* @param options：每頁(yè)記錄數(shù)、搜索函數(shù)：{pageSize: 30, searchFunction: search}*/createPage: function(options){if(options.pageSize!=undefined){pParam.pageSize = options.pageSize;}search = options.searchFunction;_p.init(this, pParam);},/*** 把pageNo, pageSize和用戶填寫(xiě)的查詢條件build進(jìn)pageParam中。* 開(kāi)始ajax查詢數(shù)據(jù)前調(diào)用。*/buildParams: function(params){pParam.params = params;return pParam;},/*** 重設(shè)pageNo為1。* 重新開(kāi)始查詢的時(shí)候調(diào)用。*/resetPageNo: function() {pParam.pageNo = 1;},/*** 更新分頁(yè)控件中的信息* @param data*/updatePage: function(data){if(data.totalPage==0){$("#totalPage").hide();$("#lastPage").hide();}else{pParam.totalPage = data.totalPage;$("#pageNo").attr("max", data.totalPage);$("#pageCount").html(data.totalPage);}$("#pageNo").val(data.pageNumber);},};})(window);

使用方法：

簡(jiǎn)單幾步：

1、html中放置一個(gè)class為“page”的容器，以容納翻頁(yè)按鈕：

<div class="pageDiv page" style='display:block; text-align:right;'></div>

還有開(kāi)始查找按鈕：

<button type="button" οnclick="goSearch()">開(kāi)始查找</button>
2、調(diào)用page.createPage()函數(shù)初始化，告訴page：每頁(yè)記錄數(shù)、用于搜索函數(shù)

$(function() {page.createPage({pageSize: 30, searchFunction: search});});
3、用于搜索的函數(shù)中，調(diào)用page.buildParams()函數(shù)保存當(dāng)前的PageNo

function search() {//把pageNo, pageSize和用戶填寫(xiě)的查詢條件build進(jìn)pageParam中var pageParam = page.buildParams($("form").serializeObject());sys.ajax("/servlet/userOpLog/search", {params : pageParam,callback : pageQueryCallback});}
4、開(kāi)始查找的函數(shù)中，調(diào)用page.resetPageNo()重設(shè)pageNo為1

//開(kāi)始查找function goSearch() {page.resetPageNo();search();}
5、ajax的callback函數(shù)中，調(diào)用page.updatePage()來(lái)更新分頁(yè)控件的內(nèi)容

function pageQueryCallback(result) {var data = result.data;page.updatePage(data);var html = template('opLogListTpl', data);$("#result").html(html);}

總結(jié)

以上是生活随笔為你收集整理的简单的html数据分页控件封装的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。