好用的分頁控件有好多，但似乎自己實現和封裝一個比較方便，以后修改也方便。

大概的想法是創建一個page.js文件，把所需的函數封裝到window的page對象中。需要使用這個控件的時候，引用page.js文件，然后調用它里面的方法來初始化、更新和顯示控件。控件可以根據返回數據的結果判斷要不要顯示總頁數和“末頁”按鈕。

效果如下：

有總頁數的情況：

沒總頁數的情況：

具體代碼：

page.js文件：

/*** 分頁控件：封裝了翻頁所需的參數、操作函數* 分頁控件容器用“page”類標識，比如：<div class="pageDiv page"></div>* @author: XuJijun */ (function(_win) {"use strict";//請求參數，保存了當前頁數var pParam = {pageNo: 1, pageSize: 10, params: null, totalPage: 999};//指向搜索函數，用于翻頁的時候回調搜索函數var search;var _p = {// 初始化調用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'>首頁</a>?"+ "<a href='javascript:;' id='previousPage'>上一頁</a>?"+ "第<input type='number' id='pageNo' min='1' max='999' value='1'/>頁<span id='totalPage'>（共<span id='pageCount'>999</span>頁）</span>"+ "<a href='javascript:;' id='nextPage'>下一頁</a>?"+ "<a href='javascript:;' id='lastPage'>末頁</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("已經是最后一頁了！");return;}pParam.pageNo++;search();});$("#previousPage").on("click", function() {if (pParam.pageNo == 1) {alert("已經是第一頁了！");return;}pParam.pageNo--;search();});// 頁數控件失去焦點：$("#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();});// 頁數回車：$("#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"] = {/*** 初始化，創建分頁控件* @param options：每頁記錄數、搜索函數：{pageSize: 30, searchFunction: search}*/createPage: function(options){if(options.pageSize!=undefined){pParam.pageSize = options.pageSize;}search = options.searchFunction;_p.init(this, pParam);},/*** 把pageNo, pageSize和用戶填寫的查詢條件build進pageParam中。* 開始ajax查詢數據前調用。*/buildParams: function(params){pParam.params = params;return pParam;},/*** 重設pageNo為1。* 重新開始查詢的時候調用。*/resetPageNo: function() {pParam.pageNo = 1;},/*** 更新分頁控件中的信息* @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);

使用方法：

簡單幾步：

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

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

還有開始查找按鈕：

<button type="button" οnclick="goSearch()">開始查找</button>
2、調用page.createPage()函數初始化，告訴page：每頁記錄數、用于搜索函數

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

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

//開始查找function goSearch() {page.resetPageNo();search();}
5、ajax的callback函數中，調用page.updatePage()來更新分頁控件的內容

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。