前言

使用$.fn.pagination.defaults重写默认值对象下载该插件翻译源码

该分页控件允许用户导航页面的数据。它支持页面导航和页面长度选择的选项设置。用户可以在分页控件上添加自定义按钮,以增强其功能。

源码

/**
* jQuery EasyUI 1.3.2
*
*翻译:qq 1364386878
*/
(function ($) {
//创建工具条
function buildToolbar(target) {
var pagination = $.data(target, "pagination");
var opts = pagination.options;
var bb = pagination.bb = {};
var tb = $(target).addClass("pagination").html("<table cellspacing=\"0\" cellpadding=\"0\" border=\"0\"><tr></tr></table>");
var tr = tb.find("tr"); function getpaginationbar(name) {
var pagination = opts.nav[name];//获取按钮组 var a = $("<a href=\"javascript:void(0)\"></a>").appendTo(tr);
a.wrap("<td></td>");
a.linkbutton({
iconCls: pagination.iconCls,
plain: true
}).unbind(".pagination").bind("click.pagination", function () {
pagination.handler.call(target);
});
return a;
};
if (opts.showPageList) {
var ps = $("<select class=\"pagination-page-list\"></select>");
ps.bind("change", function () {
opts.pageSize = parseInt($(this).val());
opts.onChangePageSize.call(target, opts.pageSize);
_select(target, opts.pageNumber);
});
for (var i = 0; i < opts.pageList.length; i++) {
$("<option></option>").text(opts.pageList[i]).appendTo(ps);
}
$("<td></td>").append(ps).appendTo(tr);
$("<td><div class=\"pagination-btn-separator\"></div></td>").appendTo(tr);
}
bb.first = getpaginationbar("first");
bb.prev = getpaginationbar("prev");
$("<td><div class=\"pagination-btn-separator\"></div></td>").appendTo(tr);
$("<span style=\"padding-left:6px;\"></span>").html(opts.beforePageText).appendTo(tr).wrap("<td></td>");
bb.num = $("<input class=\"pagination-num\" type=\"text\" value=\"1\" size=\"2\">").appendTo(tr).wrap("<td></td>");
bb.num.unbind(".pagination").bind("keydown.pagination",
function (e) {
if (e.keyCode == 13) {
var page = parseInt($(this).val()) || 1;
_select(target, page);//选择一个新页面 page索引
return false;
}
});
bb.after = $("<span style=\"padding-right:6px;\"></span>").appendTo(tr).wrap("<td></td>");
$("<td><div class=\"pagination-btn-separator\"></div></td>").appendTo(tr);
bb.next = getpaginationbar("next");
bb.last = getpaginationbar("last");
if (opts.showRefresh) {
$("<td><div class=\"pagination-btn-separator\"></div></td>").appendTo(tr);
bb.refresh = getpaginationbar("refresh");
}
if (opts.buttons) {
$("<td><div class=\"pagination-btn-separator\"></div></td>").appendTo(tr);
for (var i = 0; i < opts.buttons.length; i++) {
var btnopts = opts.buttons[i]; if (btnopts == "-") {
$("<td><div class=\"pagination-btn-separator\"></div></td>").appendTo(tr);
} else {
var td = $("<td></td>").appendTo(tr);
$("<a href=\"javascript:void(0)\"></a>").appendTo(td).linkbutton($.extend(btnopts, { plain: true })).bind("click", eval(btnopts.handler || function () {
}));
}
}
}
$("<div class=\"pagination-info\"></div>").appendTo(tb);
$("<div style=\"clear:both;\"></div>").appendTo(tb);
};
//选择一个新页面
function _select(target, page) {
var opts = $.data(target, "pagination").options;
var pageCount = Math.ceil(opts.total / opts.pageSize) || 1;
opts.pageNumber = page;
if (opts.pageNumber < 1) {
opts.pageNumber = 1;
}
if (opts.pageNumber > pageCount) {
opts.pageNumber = pageCount;
}
_refresh(target, { pageNumber: opts.pageNumber });
opts.onSelectPage.call(target, opts.pageNumber, opts.pageSize);
};
//刷新并显示分页栏信息
function _refresh(target, options) {
var opts = $.data(target, "pagination").options;
var bb = $.data(target, "pagination").bb; $.extend(opts, options || {});
var ps = $(target).find("select.pagination-page-list");
if (ps.length) {
ps.val(opts.pageSize + "");
opts.pageSize = parseInt(ps.val());
}
var pageCount = Math.ceil(opts.total / opts.pageSize) || 1;
bb.num.val(opts.pageNumber);
bb.after.html(opts.afterPageText.replace(/{pages}/, pageCount));
var pinfo = opts.displayMsg;
pinfo = pinfo.replace(/{from}/, opts.total == 0 ? 0 : opts.pageSize * (opts.pageNumber - 1) + 1);
pinfo = pinfo.replace(/{to}/, Math.min(opts.pageSize * (opts.pageNumber), opts.total));
pinfo = pinfo.replace(/{total}/, opts.total);
$(target).find("div.pagination-info").html(pinfo);
bb.first.add(bb.prev).linkbutton({ disabled: (opts.pageNumber == 1) });
bb.next.add(bb.last).linkbutton({ disabled: (opts.pageNumber == pageCount) });
_loading(target, opts.loading);
};
//提醒分页控件正在加载中
function _loading(target, Msg) {
var opts = $.data(target, "pagination").options;
var bb = $.data(target, "pagination").bb;
opts.loading = Msg;
if (opts.showRefresh) {
if (opts.loading) {
bb.refresh.linkbutton({ iconCls: "pagination-loading" });
} else {
bb.refresh.linkbutton({ iconCls: "pagination-load" });
}
}
};
//实例化
$.fn.pagination = function (options, param) {
if (typeof options == "string") {
return $.fn.pagination.methods[options](this, param);
}
options = options || {};
return this.each(function () {
var opts;
var state = $.data(this, "pagination");
if (state) {
opts = $.extend(state.options, options);
} else {
opts = $.extend({}, $.fn.pagination.defaults, $.fn.pagination.parseOptions(this), options);
$.data(this, "pagination", { options: opts });
}
buildToolbar(this);
_refresh(this);
});
};
//默认方法
$.fn.pagination.methods = {
//返回参数对象
options: function (jq) {
return $.data(jq[0], "pagination").options;
},
//提醒分页控件正在加载中
loading: function (jq) {
return jq.each(function () {
_loading(this, true);
});
},
//提醒分页控件加载完成
loaded: function (jq) {
return jq.each(function () {
_loading(this, false);
});
},
//刷新并显示分页栏信息
refresh: function (jq, options) {
return jq.each(function () {
_refresh(this, options);
});
},
//选择一个新页面,页面索引从1开始
select: function (jq, page) {
return jq.each(function () {
_select(this, page);
});
}
};
//解析器配置
$.fn.pagination.parseOptions = function (target) {
var t = $(target);
return $.extend({}, $.parser.parseOptions(target, [{ total: "number", pageSize: "number", pageNumber: "number" },
{ loading: "boolean", showPageList: "boolean", showRefresh: "boolean" }]),
{ pageList: (t.attr("pageList") ? eval(t.attr("pageList")) : undefined) });
};
//默认属性 事件
$.fn.pagination.defaults = {
total: 1,//总记录数,在分页控件创建时初始的值
pageSize: 10,//页面大小
pageNumber: 1,//在分页控件创建的时候显示的页数
pageList: [10, 20, 30, 50],//用户可以改变页面大小。pageList属性定义了页面导航展示的页码
loading: false,//定义数据是否正在载入
//自定义按钮,每个按钮都有2个属性:
//iconCls:显示背景图片的CSS类ID handler:当按钮被点击时调用的一个句柄函数
buttons: null,
showPageList: true,//定义是否显示页面导航列表
showRefresh: true,//定义是否显示刷新按钮
//用户选择一个新页面的时候触发。回调函数包含2个参数:
//pageNumber:新的页数。 pageSize: 页面大小(每页显示的条数)。
onSelectPage: function (pageNumber, pageSize) {
},
//在点击刷新按钮刷新之前触发,返回false可以取消刷新动作
onBeforeRefresh: function (pageNumber, pageSize) {
},
//刷新之后触发
onRefresh: function (pageNumber, pageSize) {
},
//在页面更改页面大小的时候触发
onChangePageSize: function (pageSize) {
},
//定义是否显示刷新按钮
beforePageText: "Page",
//定义是否显示刷新按钮
afterPageText: "of {pages}",
//显示页面信息
displayMsg: "Displaying {from} to {to} of {total} items", nav: {
first: {
iconCls: "pagination-first", handler: function () {
var opts = $(this).pagination("options");
if (opts.pageNumber > 1) {
$(this).pagination("select", 1);
}
}
}, prev: {
iconCls: "pagination-prev", handler: function () {
var opts = $(this).pagination("options");
if (opts.pageNumber > 1) {
$(this).pagination("select", opts.pageNumber - 1);
}
}
}, next: {
iconCls: "pagination-next", handler: function () {
var opts = $(this).pagination("options");
var pageCount = Math.ceil(opts.total / opts.pageSize);
if (opts.pageNumber < pageCount) {
$(this).pagination("select", opts.pageNumber + 1);
}
}
}, last: {
iconCls: "pagination-last", handler: function () {
var opts = $(this).pagination("options");
var pageCount = Math.ceil(opts.total / opts.pageSize);
if (opts.pageNumber < pageCount) {
$(this).pagination("select", pageCount);
}
}
}, refresh: {
iconCls: "pagination-refresh", handler: function () {
var opts = $(this).pagination("options");
if (opts.onBeforeRefresh.call(this, opts.pageNumber, opts.pageSize) != false) {
$(this).pagination("select", opts.pageNumber);
opts.onRefresh.call(this, opts.pageNumber, opts.pageSize);
}
}
}
}
};
})(jQuery);

示例代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic Pagination - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery-1.8.0.min.js"></script>
<script src="../../plugins2/jquery.parser.js"></script>
<script src="../../plugins2/jquery.linkbutton.js"></script>
<script src="../../plugins2/jquery.pagination.js"></script>
</head>
<body>
<h2>Basic Pagination</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>The user can change page number and page size on page bar.</div>
</div>
<div style="margin:10px 0;"></div>
<div class="easyui-pagination" data-options="total:114" style="border:1px solid #ddd;"></div>
</body>
</html>

插件效果

easyui源码翻译1.32--Pagination(分页)的更多相关文章

  1. easyui源码翻译1.32+API翻译全篇导航 (提供下载源码)

    前言 EasyUI每个组件都会有 属性.方法.事件 属性 所有的属性都定义在jQuery.fn.{plugin}.defaults里面.例如,对话框属性定义在jQuery.fn.dialog.defa ...

  2. easyui源码翻译1.32--datagrid(数据表格)

    前言 此前网上有easyui1.25的源码  应该算是比较老的版本  之后又经历了1.26 . 1.3. 1.31. 1.32 .1.33.1.34  1.33开始支持css3 算是又一个转折  但是 ...

  3. easyui源码翻译1.32--EasyLoader(简单加载)

    前言 扩展自$.fn.datebox.defaults,使用$.fn.datetimebox.defaults重写默认值对象.下载该插件翻译源码 源码 /** * jQuery EasyUI 1.3. ...

  4. easyui源码翻译1.32--panel(面板)

    前言 昨天发布了表格datagrid的翻译源码 ,easyui的许多插件有依赖关系  比如datagrid 的渲染需要panel.resizable.linkbutton.pagination   今 ...

  5. easyui源码翻译1.32--ComboGrid(数据表格下拉框)

    前言 扩展自$.fn.combo.defaults和$.fn.datagrid.defaults.使用$.fn.combogrid.defaults重写默认值对象.下载该插件翻译源码 数据表格下拉框结 ...

  6. easyui源码翻译1.32--PropertyGrid(属性表格)

    前言 继承自$.fn.datagrid.defaults.使用$.fn.propertygrid.defaults重写默认值对象.下载该插件翻译源码 属性表格提供The propertygrid pr ...

  7. easyui源码翻译1.32--TreeGrid(树形表格)

    前言 扩展自$.fn.datagrid.defaults.使用$.fn.treegrid.defaults重写默认值对象.下载该插件翻译源码 树形表格用于显示分层数据表格.它是基于数据表格.组合树控件 ...

  8. easyui源码翻译1.32--Draggable(拖动)

    前言 使用$.fn.draggable.defaults重写默认值对象.下载该插件翻译源码 源码 /** * jQuery EasyUI 1.3.2 * *翻译:qq 1364386878 --拖动 ...

  9. easyui源码翻译1.32--Droppable(放置)

    前言 使用$.fn.droppable.defaults重写默认值对象.下载该插件翻译源码 源码 /** * jQuery EasyUI 1.3.2 * *翻译:lbq --放置 拉伸 */ (fun ...

随机推荐

  1. linux+asp.net core+nginx四层负载均衡

    Linux Disibutaion:Ubuntu 16.04.1 LTS Web Server:Nginx.Kestrel 关于如何在linux中部署asp.net core我这里不再详细介绍,可以参 ...

  2. Linq DataTable Group By 分组显示人员明细

    实现功能:       多个字段分组源码样例: 原始数据: 分组后的输出结果: 源代码: public static void PrintPersons() { //准备数据 DataTable dt ...

  3. HW--自守数

    package testcase; import huawei.Demo; import junit.framework.TestCase;//加入测试框架,不需要写Main函数 public cla ...

  4. 日志记录类LogHelper

    开源日志log4net使用起来很方便,但是项目中不让用,所以自己重写了一个类,用来记录日志,比较简单. 1.首先是可以把日志分成多个类型,分别记录到不同的文件中 /// <summary> ...

  5. ###《Effective STL》--Chapter4

    点击查看Evernote原文. #@author: gr #@date: 2014-09-14 #@email: forgerui@gmail.com Chapter4 迭代器 Topic 26: i ...

  6. Apache配置多个监听端口

    以前做PC上的,都是配置一个端口,整一大堆的虚拟目录: 在 \conf\extra下找到httpd-vhosts.conf这个配置文件,想下面这样配置就行,监听80端口,访问相应的ServerName ...

  7. Java实战之03Spring-04Spring的数据库访问

    四.Spring的数据库访问 1.DAO模式 /** * 抽取的一个类 * @author zhy * */ public class JdbcDaoSupport { private QueryRu ...

  8. Java实战之03Spring-01Spring概述

    一.Spring概述 1.Spring是什么? Spring是分层的Java SE/EE应用 full-stack轻量级开源框架,以IoC(Inverse Of Control:反转控制)和AOP(A ...

  9. 2017 google Round C APAC Test 题解

    题解参考网上的答案,以及我自己的想法. 主要参考网站:http://codeforces.com/blog/entry/47181,http://codeforces.com/blog/entry/4 ...

  10. 建立IP6隧道

    某站点又开始全站Free了,是否还在为在家上不了IPv6站点而苦恼呢?本教程适用于路由后的windows设备,即ip地址为内网地址通过本教程设置,可实现windows设备获得ipv6地址,以访问IPv ...