用flexigrid实现分页显示 二
之前写过一篇用flexigrid实现分页显示 一，现在继续改进。
由于分页是一个非常常见的功能，因此需要一个可以重用，尽可能减少重复工作的JavaScript对象。在之前的第一篇中，是我的第一次探索，但是还没有做到实现一个重用的对象。本篇，将介绍一个可以重用的对象。
由于每个分页功能获取的数据不一样，所以下面几个部分是不可重用的：
1. 后台REST API
负责接受请求，解析参数，实现分页算法，返回目标页的记录和相关信息
2. 前台JavaScript控制代码
调用哪个REST API, 发送什么参数，解析REST API返回的结果并转换成flexigrid可以接受的数据格式
fexligrid UI 控制逻辑可以重用
可以重用的其实只有一个，就是如何控制flexigrid来帮助我们显示数据，包括中英文的控制，分页状态的显示，以及当用户切换分页的时候需要通过事件通知 step 2的JavaScript代码向step 1发出新的分页请求
好，实现的界面和第一篇是一样的，只不过signTable被换成了更通用的pageTable。先看一下如何使用pageTable对象。
首先，配置pageTable
// provides some common functions on top of flexigrid for simplifying web front-end development// If some web page use one same grid, add it here, they can resuse these codesdefine(["jquery", "flexigrid", "flexigrid.pack"], function ($) { 'use strict'; return {// config grid's basic structures, columnts and eventsconfig: function ( tableId, //table id config, //the config object which defines the flexigrid locale, //"en" or "cn" onChangePage, //event handler when page is changed, the arg is one of these: "pageSize", "reload", "next", "prev", "last" and "first" onCheck, //event handler when user checks/unchecks the checkbox of one row onClick, //event handler when user clicks one row, two args, the row and cell objects afterRenderPage, //event handler after the page is rendered eventHolder //the holder object of onChangePage and onSelectDisplay methods) { this.tableId = tableId; this.config = config; this.config.usepager = true; this.locale = locale; this.onChangePage = onChangePage; this.onCheck = onCheck; this.onClick = onClick; this.eventHolder = eventHolder; if (this.locale === "cn") {this.t1 = "显示 {0} 到 {1}, 总数: {2} 设备";this.t2 = "页面 <input id=\"pageIndexInput\" type=\"number\" min=\"1\" style=\"width:40px;\" value=\"{0}\"> 到 <span>{1}</span>"; } else {this.t1 = "from {0} to {1}, total: {2} signs";this.t2 = "Page <input id=\"pageIndexInput\" type=\"number\" min=\"1\" style=\"width:40px;\" value=\"{0}\"> to <span>{1}</span>"; } $("#" + this.tableId).flexigrid(this.config);},onNext: function (event) { var ob = event.data; ob.onChangePage("next", ob.eventHolder);},onPrev: function (event) { var ob = event.data; ob.onChangePage("prev", ob.eventHolder);},onLast: function (event) { var ob = event.data; ob.onChangePage("last", ob.eventHolder);},onFirst: function (event) { var ob = event.data; ob.onChangePage("first", ob.eventHolder);},onReload: function (event) { var ob = event.data; var pageIndex = $("#pageIndexInput").val(); if (pageIndex !== "") {ob.pageIndex = pageIndex; } ob.onChangePage("reload", ob.eventHolder);},onChangePageSize: function (event) { var ob = event.data; ob.pageSize = parseInt($(this).val()); ob.onChangePage("pageSize", ob.eventHolder);},// fill in Chinese or English words according to this.locale// fill in page number according to the total pages and current page index// enable/disable buttons in page barupdatePagebar: function() { var innerHtml, i, j, pageSize = parseInt($("select[name=rp]").val()); i = this.pageSize * (this.pageIndex - 1) + 1; j = i + this.pageSize - 1; if (j > this.maxCount) {j = this.maxCount; } if (j === 0) {i = 0; } innerHtml = jQuery.validator.format(this.t1, i, j, this.maxCount); $($(".pDiv2").children()[10]).children(0).html(innerHtml); innerHtml = jQuery.validator.format(this.t2, this.pageIndex, this.maxPageCount); $(".pcontrol").html(innerHtml); if (this.pageIndex === 1) {if (this.maxPageCount === 1) { $(".pPrev").removeClass("pButton"); $(".pFirst").removeClass("pButton"); $(".pNext").removeClass("pButton"); $(".pLast").removeClass("pButton");} else { $(".pPrev").removeClass("pButton"); $(".pFirst").removeClass("pButton"); $(".pNext").addClass("pButton"); $(".pLast").addClass("pButton");} } else {if (this.pageIndex === this.maxPageCount) { $(".pNext").removeClass("pButton"); $(".pLast").removeClass("pButton"); $(".pPrev").addClass("pButton"); $(".pFirst").addClass("pButton");} else { $(".pNext").addClass("pButton"); $(".pLast").addClass("pButton"); $(".pPrev").addClass("pButton"); $(".pFirst").addClass("pButton"); } } // just register them at the first time if (!this.hasPageBarEvents) {$(".pNext").on("click", this, this.onNext);$(".pFirst").on("click", this, this.onFirst);$(".pPrev").on("click", this, this.onPrev);$(".pLast").on("click", this, this.onLast);$(".pReload").on("click", this, this.onReload);$("select[name=rp]").on("change", this, this.onChangePageSize);this.hasPageBarEvents = true; } $(".pDiv2 .pGroup select").width(60);},// return row array that contains all checked rows(JQuery object)getCheckedRows: function() { var rows = []; $('.row_class').each(function () { if ($(this).is(':checked')) {rows.push($(this)); }} ); return rows;},setData: function(pageSize, pageIndex, maxPageCount, maxCount, pageData) { this.pageSize = pageSize; this.pageIndex = pageIndex; this.pageData = pageData; this.maxPageCount = maxPageCount; this.maxCount = maxCount; $("#" + this.tableId).flexAddData(this.pageData); $("#" + this.tableId + " tbody tr td div input").on("click", this.eventHandler, this.onSelect); this.updatePagebar();} };});