📄 jquery.jpage.js
字号:
/**
* jpage for jQuery分页插件
* 功能：指定页数内静态分页，超过指定页数后ajax请求下一组静态分页
* @author 陈健
* @version 1.0 beta 5
* @date 2008-07-08
* @param config 插件配置
*/
jQuery.fn.jpage = function(config){
init("#"+this.attr("id"),config);
/**
* 初始化，主程序
* @param t 容器的ID，带#号
* @param config 插件配置
*/
function init(t,config){
//公有变量
if(!t) return;
var dataStore = config.dataStore; //数据
var totalRecord = config.totalRecord > 0 ? config.totalRecord : 0; //总记录数
if(totalRecord == 0){
$(t).css("text-align","center");
$(t).css("line-height","50px");
$(t).html("很遗憾，没有检索到任何记录！");
return;
}
var openCookies = config.openCookies != null ? config.openCookies : true;
var configPage = config.perPage > 0 ? config.perPage : 10;
var perPage = !openCookies || $.cookie(t+"_perPage") == null ? configPage : parseInt($.cookie(t+"_perPage"));//每页显示记录数
var proxyUrl = config.proxyUrl != null ? config.proxyUrl : 'GetDataServer.aspx'; //数据代理地址
var groupSize = config.groupSize; //组大小
var barPosition = config.barPosition == null || config.barPosition == ""? 'bottom' : config.barPosition; //工具条位置
var ajaxParam = config.ajaxParam; //ajax的请求参数
var showMode = config.showMode == null || config.showMode == '' ? 'full' : config.showMode; //显示模式
var themeName = config.themeName == null || config.themeName == '' ? 'default' : config.themeName; //主题名称
var dataBefore = config.dataBefore == null ? '' : config.dataBefore;
var dataAfter = config.dataAfter == null ? '' : config.dataAfter;
//私有变量
var totalPage = Math.ceil(totalRecord/perPage); //总页数
var currentPage = !openCookies || $.cookie(t+"_currentPage") == null ? 1 : parseInt($.cookie(t+"_currentPage"));//当前页码
var startRecord; //每页起始记录
var endRecord; //每页结束记录
var gpStartPage; //组开始页
var gpEndPage; //组结束页
var gpStartRecord = 1; //组开始记录
var gpEndRecord; //组结束记录
//数据容器
var container = '<div class="'+themeName+'_pgContainer"></div>'
//添加工具条
var toolbar = '<table width="100%" border="0" cellpadding="0" cellspacing="0" class="'+themeName+'_pgToolbar"><tr><td>';
toolbar += '<table border="0" cellspadding="0" cellspacing="0" class="'+themeName+'_pgPanel"><tr>';
if(showMode == 'full'){
toolbar += '<td valign="middle"><select class="'+themeName+'_pgPerPage" title="每页显示条数">';
if(config.perPage>0)
toolbar += '<option value="'+config.perPage+'">'+config.perPage+'</option>';
toolbar += '<option value="10">10</option>';
toolbar += '<option value="20">20</option>';
toolbar += '<option value="25">25</option>';
toolbar += '<option value="30">30</option>';
toolbar += '<option value="40">40</option>';
toolbar += '<option value="60">60</option>';
toolbar += '<option value="80">80</option>';
toolbar += '<option value="100">100</option>';
toolbar += '</select> </td>';
toolbar += '<td valign="middle"><div class="'+themeName+'_separator"></div></td>';
}
toolbar += '<td valign="middle"><div class="'+themeName+'_pgBtn '+themeName+'_pgFirst" title="首页"></div></td>';
toolbar += '<td valign="middle"><div class="'+themeName+'_pgBtn '+themeName+'_pgPrev" title="上页"></div></td>';
if(showMode == 'full'){
toolbar += '<td valign="middle" width="10" align="left"><div class="'+themeName+'_separator"></div></td>';
toolbar += '<td valign="middle">第 <input class="'+themeName+'_pgCurrentPage" type="text" value="' + currentPage + '" title="页码" /> 页 / 共 <span class="'+themeName+'_pgTotalPage">' + totalPage + '</span> 页</td>';
toolbar += '<td valign="middle" width="10" align="right"><div class="'+themeName+'_separator"></div></td>';
}else if(showMode == 'normal'){
toolbar += '<td valign="middle"><div class="'+themeName+'_separator"></div></td>';
toolbar += '<td valign="middle"> <input class="'+themeName+'_pgCurrentPage" type="text" value="' + currentPage + '" title="页码" /> / <span class="'+themeName+'_pgTotalPage">' + totalPage + '</span> 页</td>';
toolbar += '<td valign="middle"><div class="'+themeName+'_separator"></div></td>';
}
toolbar += '<td valign="middle"><div class="'+themeName+'_pgBtn '+themeName+'_pgNext" title="下页"></div></td>';
toolbar += '<td valign="middle"><div class="'+themeName+'_pgBtn '+themeName+'_pgLast" title="尾页"></div></td>';
if(groupSize){
toolbar += '<td valign="middle"><div class="'+themeName+'_separator"></div></td>';
toolbar += '<td valign="middle"><div class="'+themeName+'_pgBtn '+themeName+'_pgRefresh" title="刷新"></div></td>';
}
if(showMode == 'full'){
toolbar += '<td valign="middle" width="10" align="left"><div class="'+themeName+'_separator"></div></td>';
toolbar += '<td valign="middle" class="'+themeName+'_pgSearchInfo">检索到 ' + totalRecord + ' 条记录，显示第 <span class="'+themeName+'_pgStartRecord">' + startRecord + '</span> 条 - 第 <span class="'+themeName+'_pgEndRecord">' + endRecord + '</span> 条记录</td>';
}
toolbar += '</td></tr></table>';
toolbar += '</td></tr></table>';
if(configPage<totalRecord)
switch(barPosition){
case 'top':
$(t).html(toolbar+container);
break;
case 'bottom':
$(t).html(container+toolbar);
break;
default:
$(t).html(toolbar+container+toolbar);
}
else
$(t).html(container);
var btnRefresh = $(t+" ."+themeName+"_pgRefresh"); //刷新按钮
var btnNext =$(t+" ."+themeName+"_pgNext"); //下一页按钮
var btnPrev = $(t+" ."+themeName+"_pgPrev"); //上一页按钮
var btnFirst = $(t+" ."+themeName+"_pgFirst"); //首页按钮
var btnLast = $(t+" ."+themeName+"_pgLast"); //末页按钮
var btnGo = $(t+" ."+themeName+"_pgNext,"+t+" ."+themeName+"_pgLast");
var btnBack = $(t+" ."+themeName+"_pgPrev,"+t+" ."+themeName+"_pgFirst");
var btn = $(t+" ."+themeName+"_pgFirst,"+t+" ."+themeName+"_pgPrev,"+t+" ."+themeName+"_pgNext,"+t+" ."+themeName+"_pgLast");
var mask;
var valCurrentPage = $(t+" ."+themeName+"_pgCurrentPage");
var valStartRecord = $(t+" ."+themeName+"_pgStartRecord");
var valEndRecord =$(t+" ."+themeName+"_pgEndRecord");
var valContainer = $(t+" ."+themeName+"_pgContainer");
var valPerPage = $(t+" ."+themeName+"_pgPerPage");
var valTotalPage = $(t+" ."+themeName+"_pgTotalPage");
$(t+" ."+themeName+"_pgPerPage").attr("value",perPage);
getGroupStartEnd();
getStartEnd();
if(dataStore==null || perPage!=configPage)
getRemoteData();
else{
getStartEnd();
loadData();
refresh();
}
//刷新按钮监听
btnRefresh.bind("mousedown",pressHandler).bind("mouseup",unpressHandler).bind("mouseout",unpressHandler);
//刷新工具栏
refresh();
//按钮监听
btnNext.click(
function(){
if(currentPage < totalPage){
if(!dataStore || currentPage == gpEndPage){
currentPage += 1;
getGroupStartEnd();
getStartEnd();
getRemoteData();
}else{
currentPage += 1;
getStartEnd();
loadData();
refresh();
}
}
}
);
btnPrev.click(
function(){
if(currentPage > 1){
if(!dataStore || currentPage == gpStartPage){
currentPage -= 1;
getGroupStartEnd();
getStartEnd();
getRemoteData();
}else{
currentPage -= 1;
getStartEnd();
loadData();
refresh();
}
}
}
);
btnFirst.click(
function(){
if(!dataStore || currentPage > 1){
if(gpStartPage > 1){
currentPage = 1;
getGroupStartEnd();
getStartEnd();
getRemoteData();
}else{
currentPage = 1;
getStartEnd();
loadData();
refresh();
}
}
}
);
btnLast.click(
function(){
if(!dataStore || currentPage < totalPage){
if(gpEndPage > 0 && gpEndPage < totalPage){
currentPage = totalPage;
getGroupStartEnd();
getStartEnd();
getRemoteData();
}else{
currentPage = totalPage;
getStartEnd();
loadData();
refresh();
}
}
}
);
btnRefresh.click(
function(){
getGroupStartEnd();
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -