Pager

/**
* JavScript分页控件
*
* @param config 配置参数
* prefix:控件名称的前缀,用以区分页面上有多个需要分页的table的情况.例如:上一页链接id为,previousLinkId,则在配置了prefix参数是其id应为prefix_previousLinkId.
* toFirstLinkId:转到第一页的链接id
* previousLinkId:转到上一页的链接id
* toNextLinkId:转到下一页的链接id
* toLastLinkId:转到最后一页的链接id
* rowCountSpanId:显示总行数的span的id
* pageIndexSpanId:显示当前页的span的id
* pageCountSpanId:显示总页数的span的id
* dataTableId:table的id
* columnCount:表格的列数,用以在没有数据时显示提示时使用.没有传入时会自动计算列数.如果表头比较复杂例如存在多行表头的情况下建议手动设置列数
* sortCfg:排序配置,接受的是一个对象,类似于下面的结构.columnNames表示个列的列名,不需要排序的列则传入null,数组长度必须与columnCount保持一致.
* defaultColumn表示默认使用哪一列排序,allowNotSort表示是否允许任何列都不进行排序的状态.
* sortShitSequence表示当allowNotSort为true时点击表头时排序方式的变换序列,长度为3.
* defaultDirection表示默认的排序是升序还是降序其中notsort表示未排序的状态,只有allowNotSort为true是才生效.
* {
* columnNames : ["aa", null, "bb"],
* defaultColumn : "aa",
* allowNotSort : false,
* sortShitSequence : ["desc", "asc", "notsort"],
* defaultDirection : "asc" ("desc", "notsort")
* }
* 如果存在sortCfg时dataFetcher必须结构5个参数function(pageSize, pageIndex, sortColumn, sortDirection, fnCallBack),sortColumn表示当前排序的列名,
* sortDirection表示排序是升序还是降序.
* nullPrompt:没有数据时的提示信息
* dataFetcher:查询数据时调用的回调函数,该函数签名为function(pageSize, pageIndex, fnCallBack).其中pageSize为每页行数,pageIndex为查询的页索引以0为起始值,
* fnCallBack为查询后填充数据时调用的函数在dataFetcher获取到数据时必须回调该函数.fnCallBack接受一个参数,参数结构符合以下结构
* {
* pageIndex: Number当前页索引,以0为起始值
* rowCount: 数据的总行数
* pageSize: 每页行数(可选)
* data: 查询数据,没有数据可传入undefined,null或者长度为0的数组
* }
* rowInterpreter:解析每一行时调用的回调函数.该函数应接受一个参数,该参数为从服务端返回的数据中的一行记录.该函数调用后返回一行(包括tr)的HTML代码或者JQuery对象或者DOM对象.
* pageSize:每一页的行数,不传时默认值为10
* pageSizeSelectorId:选择页尺寸大小的控件的id
* queryOnInit:初始化时立刻进行一次查询,默认为true
* tableRendered:查询成功后调用的回调函数,该函数的this指针为Paginator,接受一个参数为从dataFetcher中返回的对象.
*
* 以上参数中只有dataFetcher和rowInterpreter为必传参数,其他为可选参数
*/
var Paginator = function(config)
{
this.dataFetcher = config.dataFetcher;
this.rowInterpreter = config.rowInterpreter;

this._checkConfig(config, "prefix");
this._checkConfig(config, "toFirstLinkId");
this._checkConfig(config, "previousLinkId");
this._checkConfig(config, "toNextLinkId");
this._checkConfig(config, "toLastLinkId");
this._checkConfig(config, "rowCountSpanId");
this._checkConfig(config, "pageIndexSpanId");
this._checkConfig(config, "pageCountSpanId");
this._checkConfig(config, "dataTableId");
this._checkConfig(config, "columnCount");
this._checkConfig(config, "sortCfg");
this._checkConfig(config, "nullPrompt");
this._checkConfig(config, "pageSize");
this._checkConfig(config, "pageSizeSelectorId");
this._checkConfig(config, "queryOnInit");
this._checkConfig(config, "tableRendered");

this.init();
};

/**
* 升序排列的名称
*/
Paginator.prototype.SORT_ASC = "asc";

/**
* 降序排列的名称
*/
Paginator.prototype.SORT_DESC = "desc";

/**
* 不进行排序排列的名称
*/
Paginator.prototype.NOT_SORT = "notsort";

/**
* 表头元素用来保存列名得属性名称
*/
Paginator.prototype.SORT_COLUMN_ATTR_NAME = "sortColumnName";

/**
* 分页控件的id前缀
*/
Paginator.prototype.prefix = undefined;

/**
* 每页行数
*/
Paginator.prototype.pageSize = 10;

/**
* 当前页索引,0为起始值
*/
Paginator.prototype.pageIndex = 0;

/**
* 总行数
*/
Paginator.prototype.rowCount = -1;

/**
* 总页数
*/
Paginator.prototype.pageCount = -1;

/**
* 初始化时是否进行一次查询
*/
Paginator.prototype.queryOnInit = true;

/**
* 转向第一页的链接id
*/
Paginator.prototype.toFirstLinkId = "toFirstPage";

/**
* 转向上一页的链接id
*/
Paginator.prototype.previousLinkId = "toPreviousPage";

/**
* 转向下一页的链接id
*/
Paginator.prototype.toNextLinkId = "toNextPage";

/**
* 转向最后一页的链接id
*/
Paginator.prototype.toLastLinkId = "toLastPage";

/**
* 显示总行数的span id
*/
Paginator.prototype.rowCountSpanId = "rowCountSpan";

/**
* 页数的选择控件
*/
Paginator.prototype.pageSizeSelectorId = "pageSizeSelector";

/**
* 显示页索引的span id,显示时页索引以1为起始值
*/
Paginator.prototype.pageIndexSpanId = "pageIndexSpan";

/**
* 显示总页数的span id
*/
Paginator.prototype.pageCountSpanId = "pageCountSpan";

/**
* table的id
*/
Paginator.prototype.dataTableId = "dataTable";

/**
* 表格列数
*/
Paginator.prototype.columnCount = -1;

/**
* 列排序配置
*/
Paginator.prototype.sortCfg = null;

/**
* 当前排序的列名
*/
Paginator.prototype._sortColumnName = "";

/**
* 当前排序的方向
*/
Paginator.prototype._sortDirection = "";

/**
* 没有数据时的提示信息
*/
Paginator.prototype.nullPrompt = "";

/**
* 查询数据时调用的回调函数
*/
Paginator.prototype.dataFetcher = null;

/**
* 解析每一行时调用的回调函数
*/
Paginator.prototype.rowInterpreter = null;

/**
* dataFetcher调用填充函数时传入的参数
*/
Paginator.prototype.data = null;

/**
* 查询成功后调用的回调函数
*/
Paginator.prototype.tableRendered = null;

/**
* 私有函数,如果配置参数的属性存在则配置属性
*
* @param {Object} config 配置参数
* @param {String} attrName 属性名称
*/
Paginator.prototype._checkConfig = function(config, attrName)
{
if (config[attrName] != undefined && config[attrName] != null)
{
this[attrName] = config[attrName];
}
};

/**
* 私有属性,转向第一页的链接对象
*/
Paginator.prototype._toFistLink = null;

/**
* 私有属性,转向上一页的链接对象
*/
Paginator.prototype._toPreviousLink = null;

/**
* 私有属性,转向下一页的链接对象
*/
Paginator.prototype._toNextLink = null;

/**
* 私有属性,转向最后一页的链接对象
*/
Paginator.prototype._toLastLink = null;

/**
* 私有属性,显示总行数的span对象
*/
Paginator.prototype._rowCountSpan = null;

/**
* 私有属性,显示当前页索引的span对象
*/
Paginator.prototype._pageIndexSpan = null;

/**
* 私有属性,显示总页数的span对象
*/
Paginator.prototype._pageCountSpan = null;

/**
* 私有属性,datable对象
*/
Paginator.prototype._dataTable = null;

/**
* 当前是否正在刷新中
*/
Paginator.prototype.refreshing = false;

/**
* DataFetcher调用后的回调函数
* @param {Object} data 返回的数据.符合以下结构
* {
* pageIndex: Number当前页索引,以0为起始值
* rowCount: 数据的总行数
* pageSize: 每页行数(可选)
* data: 查询数据,没有数据可传入undefined,null或者长度为0的数组
* }
*/
Paginator.prototype._dataFetcherCallback = function(data)
{
arguments.callee.paginator.refreshing = false;
arguments.callee.paginator.fillData(data);
};

/**
* 调用DataFetcher
* @param {Number} pageSize 页行数
* @param {Number} pageIndex 页索引
*/
Paginator.prototype._callDataFetcher = function(pageSize, pageIndex)
{
if (this.refreshing)
{
return;
}

this.refreshing = true;
var len = this._dataTable.find("tbody").length;
if(len >0 ){
this._dataTable.find("tbody").empty();
}
else{
this._dataTable.find("ul").empty();
}
this._rowCountSpan.text(0);
this._pageIndexSpan.text(0);
this._pageCountSpan.text(0);
this._dataFetcherCallback.paginator = this;

if (!this._sortColumnName || !this._sortDirection)
{
this.dataFetcher(pageSize, pageIndex, this._dataFetcherCallback);
}
else
{
if (this._sortColumnName == Paginator.prototype.NOT_SORT)
{
this.dataFetcher(pageSize, pageIndex, null, null, this._dataFetcherCallback);
}
else
{
this.dataFetcher(pageSize, pageIndex, this._sortColumnName, this._sortDirection, this._dataFetcherCallback);
}
}
};

/**
* 换页链接的事件函数
* @param {Object} e jQuery事件对象
*/
Paginator.prototype._linkClickEventFunc = function(e)
{
var $link = $(this), paginator = e.data;
e.preventDefault();
e.stopPropagation();
if (!$link.hasClass("disable"))
{
if (this == paginator._toFistLink.get(0))
{
paginator._callDataFetcher(paginator.pageSize, 0);
}
else if (this == paginator._toPreviousLink.get(0))
{
paginator._callDataFetcher(paginator.pageSize, paginator.pageIndex - 1);
}
else if (this == paginator._toNextLink.get(0))
{
paginator._callDataFetcher(paginator.pageSize, paginator.pageIndex + 1);
}
else if (this == paginator._toLastLink.get(0))
{
paginator._callDataFetcher(paginator.pageSize, (paginator.pageCount > 0) ? (paginator.pageCount - 1) : 2147483647);
}
}
};

/**
* 私有函数,初始化换页链接
*
* @param {Object} $link 链接的jQuery对象
*/
Paginator.prototype._initLinkClickEvent = function($link)
{
$link.bind("click", this, this._linkClickEventFunc);
};

/**
* 私有函数,初始化页行数控制控件
*
* @param {Object} $ctrl 控件的jQuery对象
*/
Paginator.prototype._initLinkChangeEvent = function($ctrl)
{
var $this = this;
$ctrl.change(function(e)
{
e.preventDefault();
e.stopPropagation();
if ($ctrl == $this._pageSizeSelector)
{
$this.pageSize = parseInt($ctrl.val(), 10);
$this._callDataFetcher($this.pageSize, $this.pageIndex);
}
});
};

/**
* 点击排序表头的事件
* @param {Object} e 事件对象
*/
Paginator.prototype._clickSortColumnHeader = function(e)
{
var paginator = e.data.paginator, clickColumn = $(this),
clickOld = clickColumn.attr(Paginator.prototype.SORT_COLUMN_ATTR_NAME) == paginator._sortColumnName;

paginator._sortColumnName = clickOld ? paginator._sortColumnName : clickColumn.attr(Paginator.prototype.SORT_COLUMN_ATTR_NAME);
paginator._dataTable.find("thead tr th[" + Paginator.prototype.SORT_COLUMN_ATTR_NAME + "] span.order").hide();

var newAnchor = clickColumn.children("span.order");

newAnchor.removeClass(Paginator.prototype.SORT_ASC).removeClass(Paginator.prototype.SORT_DESC);

if (clickOld)
{
if (paginator.sortCfg.allowNotSort)
{
var index = 0, sortShitSequence = paginator.sortCfg.sortShitSequence;

for (var i = 0; i < sortShitSequence.length; ++i)
{
if (sortShitSequence[i] == paginator._sortDirection)
{
index = i;
break;
}
}

paginator._sortDirection = sortShitSequence[(index == sortShitSequence.length - 1) ? 0 : ++index];
}
else
{
paginator._sortDirection = (paginator._sortDirection == Paginator.prototype.SORT_ASC ? Paginator.prototype.SORT_DESC : Paginator.prototype.SORT_ASC);
}
}
else
{
paginator._sortDirection = Paginator.prototype.SORT_ASC;
}

if (paginator._sortDirection != Paginator.prototype.NOT_SORT)
{
newAnchor.addClass(paginator._sortDirection).css("display", "");
}

paginator.refreshCurrent();
};

/**
* 初始化函数,通常不需要手动调用
*/
Paginator.prototype.init = function()
{
if (this.prefix)
{
this._toFistLink = $("#" + this.prefix + "_" + this.toFirstLinkId);
this._toPreviousLink = $("#" + this.prefix + "_" + this.previousLinkId);
this._toNextLink = $("#" + this.prefix + "_" + this.toNextLinkId);
this._toLastLink = $("#" + this.prefix + "_" + this.toLastLinkId);
this._rowCountSpan = $("#" + this.prefix + "_" + this.rowCountSpanId);
this._pageIndexSpan = $("#" + this.prefix + "_" + this.pageIndexSpanId);
this._pageCountSpan = $("#" + this.prefix + "_" + this.pageCountSpanId);
this._dataTable = $("#" + this.prefix + "_" + this.dataTableId);
this._pageSizeSelector = $("#" + this.prefix + "_" + this.pageSizeSelectorId);
}
else
{
this._toFistLink = $("#" + this.toFirstLinkId);
this._toPreviousLink = $("#" + this.previousLinkId);
this._toNextLink = $("#" + this.toNextLinkId);
this._toLastLink = $("#" + this.toLastLinkId);
this._rowCountSpan = $("#" + this.rowCountSpanId);
this._pageIndexSpan = $("#" + this.pageIndexSpanId);
this._pageCountSpan = $("#" + this.pageCountSpanId);
this._dataTable = $("#" + this.dataTableId);
this._pageSizeSelector = $("#" + this.pageSizeSelectorId);
}

var headThs = this._dataTable.find("thead tr th");
if (this.columnCount <= 0)
{
this.columnCount = headThs.size();
}

if (this.sortCfg && this.sortCfg.columnNames && this.sortCfg.columnNames.length == this.columnCount)
{
var $this = this;
headThs.each(function(index, domEle)
{
if ($this.sortCfg.columnNames[index] && $this.sortCfg.columnNames[index] != "")
{
$(domEle).attr($this.SORT_COLUMN_ATTR_NAME, $this.sortCfg.columnNames[index]).append($("<span class='order'></span>").hide())
.css("cursor", "pointer").bind("click",{paginator: $this}, $this._clickSortColumnHeader);

if (!$this._sortColumnName)
{
$this._sortColumnName = $this.sortCfg.columnNames[index];
}
}
});

if (headThs.filter("[" + this.SORT_COLUMN_ATTR_NAME + "]").size() > 0)
{
if (this.sortCfg.defaultColumn && this.sortCfg.defaultColumn != "")
{
this._sortColumnName = this.sortCfg.defaultColumn;
}
if (this.sortCfg.defaultDirection && this.sortCfg.defaultDirection != "")
{
this._sortDirection = this.sortCfg.defaultDirection;
}
else
{
this._sortDirection = this.SORT_ASC;
}

if (this._sortDirection != Paginator.prototype.NOT_SORT)
{
headThs.filter("[" + this.SORT_COLUMN_ATTR_NAME + "='" + this._sortColumnName + "']").children("span.order").addClass(this._sortDirection).css("display", "");
}
}
}

this._initLinkClickEvent(this._toFistLink);
this._initLinkClickEvent(this._toPreviousLink);
this._initLinkClickEvent(this._toNextLink);
this._initLinkClickEvent(this._toLastLink);
this._initLinkChangeEvent(this._pageSizeSelector);

if (this.queryOnInit)
{
this._callDataFetcher(this.pageSize, 0);
}
};

/**
* 在dataFetcher中调用的填充数据函数
* @param {Object} data 数据对象
*/
Paginator.prototype.fillData = function(data)
{
this.data = data;
this.pageIndex = data.pageIndex;
this.rowCount = data.rowCount > 0 ? data.rowCount : 0;
if (data.pageSize && data.pageSize > 0)
{
this.pageSize = data.pageSize;
this._pageSizeSelector.val(data.pageSize);
}

this.pageCount = parseInt(this.rowCount / this.pageSize) + ((this.rowCount % this.pageSize > 0) ? 1 : 0);
if (this.pageIndex <= 0)
{
this._toFistLink.addClass("disable");
this._toPreviousLink.addClass("disable");
}
else
{
this._toFistLink.removeClass("disable");
this._toPreviousLink.removeClass("disable");
}

if (this.pageIndex >= (this.pageCount - 1))
{
this._toNextLink.addClass("disable");
this._toLastLink.addClass("disable");
}
else
{
this._toNextLink.removeClass("disable");
this._toLastLink.removeClass("disable");
}

this._rowCountSpan.text(this.rowCount);

if (this.pageCount > 0)
{
this._pageIndexSpan.text(this.pageIndex + 1);
}
else
{
this._pageIndexSpan.text(0);
}

this._pageCountSpan.text(this.pageCount);

var len = this._dataTable.find("tbody").length;
if(len > 0){
$tbody = this._dataTable.find("tbody");
}
else{
$tbody = this._dataTable.find("ul");
}

if (data.data && data.data.length > 0)
{
for (var i = 0; i < data.data.length; ++i)
{
$tbody.append(this.rowInterpreter(data.data[i]));
}
}
else if (this.nullPrompt && this.nullPrompt.length > 0)
{
$tbody.append("<tr><td style=\"text-align: center;\" colspan=\"" + this.columnCount + "\">" + this.nullPrompt + "</td></tr>");
}

initDataGrid(this._dataTable.attr("id"));

if (this.tableRendered)
{
this.tableRendered(data);
}
};

/**
* 刷新列表
*/
Paginator.prototype.refresh = function()
{
this._callDataFetcher(this.pageSize, 0);
};

/**
* 重新查询当前页
*/
Paginator.prototype.refreshCurrent = function()
{
this._callDataFetcher(this.pageSize, this.pageIndex);
};