妹子UI之自定义分页控件

妹子UI，http://amazeui.org，在这儿顺便帮他打下广告，我个人觉得比Bootstrap漂亮，于是，我就选择了基于它的UI写出来自己的分页控件。

paginator.js的内容如下：

(function ($) {$.fn.paginator = function (options) {//this指向当前的选择器var config = {url: "",pageParent: "",totalBars: -1,limit: -1,offset: 1,callback: null}//合并参数var opts = $.extend(config, options);opts.totalBars = Math.ceil(opts.totalBars / opts.limit);//计算按钮的总个数//获取offset参数var queryString = function (url) {var offset = (url.split("?")[1]).split("=")[1];return parseInt(offset);}//ajax核心方法，用于分页的数据操作var ajaxCore = function (offset, fn) {$.ajax({"url": opts.url,"data": {"offset": offset,"limit": opts.limit},"dataType": "JSON","method": "POST","success": fn});}//重新装配分页按钮var pageCore = function (offset) {if (opts.offset == offset) {return;} //如果是当前页面，那么就什么事都不用干了！else {ajaxCore(offset, opts.callback);$(opts.pageParent).empty();//否则，清空所有的节点，重新向DOM插入新的分页按钮var output = "";var nextBar = offset == opts.totalBars ? "<li class=\"am-disabled\"><a yxhref=\"javascript:;\">»</a></li>" : "<li><a yxhref=\"" + opts.url + (offset + 1) + "\">»</a></li>";var preBar = offset == 1 ? "<li class=\"am-disabled\"><a yxhref=\"javascript:;\">«</a></li>" : "<li><a yxhref=\"" + opts.url + (offset - 1) + "\">«</a></li>";//组装向上一个节点和下一页节点if (opts.totalBars > 7) {if (offset < 5) {output += preBar;for (var i = 1; i <= 5; i++) {if (i == offset) {output += "<li class=\"am-active\"><a yxhref=\"" + opts.url + offset + "\">" + offset + "</a></li>";} else {output += "<li><a yxhref=\"" + opts.url + i + "\">" + i + "</a></li>";}}output += "<li><span>...</span></li>";output += "<li><a yxhref=\"" + opts.url + (opts.totalBars) + "\">" + (opts.totalBars) + "</a></li>" + nextBar;} else if (offset >= 5 && offset <= opts.totalBars - 4) {//当页面大于7个的时候，那么在第五个和倒数第五个时，执行output += preBar;output += "<li><a yxhref=\"" + opts.url + 1 + "\">" + 1 + "</a></li>";//第一个output += "<li><span>...</span></li>"; //省略号output += "<li><a yxhref=\"" + opts.url + (offset - 1) + "\">" + (offset - 1) + "</a></li>";output += "<li class=\"am-active\"><a  yxhref=\"" + opts.url + offset + "\">" + offset + "</a></li>";output += "<li><a yxhref=\"" + opts.url + (offset + 1) + "\">" + (offset + 1) + "</a></li>";output += "<li><span>...</span></li>"; //省略号;output += "<li><a yxhref=\"" + opts.url + (opts.totalBars) + "\">" + (opts.totalBars) + "</a></li>"; //尾页output += nextBar;} else if (offset > opts.totalBars - 4 && offset <= opts.totalBars) {//当页面位于倒数第四个时候output += preBar;output += "<li><a yxhref=\"" + opts.url + 1 + "\">" + 1 + "</a></li>" + "<li><span>...</span></li>";for (var j = 4; j >= 0; j--) {if (opts.totalBars - j == offset) {output += "<li class=\"am-active\"><a yxhref=\"" + opts.url + (opts.totalBars - j) + "\">" + (opts.totalBars - j) + "</a></li>";} else {output += "<li><a yxhref=\"" + opts.url + (opts.totalBars - j) + "\">" + (opts.totalBars - j) + "</a></li>";}}output += nextBar;} else {console.log("分页数据出错！");return;}} else {output += preBar;for (var i = 1; i <= opts.totalBars; i++) {if (i == offset) {output += "<li class=\"am-active\"><a yxhref=\"" + opts.url + offset + "\">" + offset+ "</a></li>";} else {output += "<li><a yxhref=\"" + opts.url + i + "\">" + i+ "</a></li>";}}output += nextBar;}$(opts.pageParent).append(output);opts.offset = offset; //将偏移量赋值给config里面的offset}}//清理函数，防止多绑定事件和重新计算分页var clear = function () {$(opts.pageParent).empty().undelegate();}//初始化装配分页按钮var init = function (fn) {if (typeof (fn) != "function") {console.log("将不能正确的执行回调函数");} else {opts.callback = fn;}clear();ajaxCore(1, opts.callback);//执行初始化ajax方法var preBar = "<li class=\"am-disabled\"><a yxhref=\"javascript:;\">«</a></li>";//上一页,（禁用的效果）//如果只有一页，那么禁用下一页var nextBar = opts.totalBars > 1 ? "<li><a yxhref=\"" + opts.url + 2 + "\">»</a></li>" : "<li class=\"am-disabled\"><a yxhref=\"javascript:;\">»</a></li>";//最后一页var output = "<li class=\"am-active\"><a yxhref=\"" + opts.url + 1 + "\">1</a></li>";if (opts.totalBars <= 7) {for (var i = 1; i < opts.totalBars; i++) {output += "<li><a yxhref=\"" + opts.url + (i + 1) + "\">" + (i + 1) + "</a></li>";}} else {for (var j = 1; j < 5; j++) {output += "<li><a yxhref=\"" + opts.url + (j + 1) + "\">" + (j + 1) + "</a></li>";}output += "<li><span>...</span></li>";output += "<li><a yxhref=\"" + opts.url + (opts.totalBars) + "\">" + (opts.totalBars) + "</a></li>";}$(opts.pageParent).delegate("a","click", function () {var offset = queryString($(this).attr("yxhref"));console.log("ok");pageCore(offset);});$(opts.pageParent).append(preBar + output + nextBar);};init(opts.callback);//初始化分页引擎}
}(window.jQuery))

调用方法如下:

 $("#paginator").paginator({url: "/Service/Main/LogPage?offset=",pageParent: "#paginator",totalBars: total,limit:limit,offset: 1,callback: function (data) {//清空DOM节点}});

由于我设计的时候以Ajax分页来考虑的，所以在callback中直接写你要进行的ajax返回之后的操作，这个参数和ajax的参数data是一样的。

提醒：url需要挂一个offset参数，需要事先知道有多少条数据，在html中只需要一个父节点，即

 <ul id="paginator" class="am-pagination am-fr"></ul>

如果你操作正常，应该会有正确的结果。

妹子UI之自定义分页控件相关推荐

也发一个自定义分页控件
分页控件有页面选择10 20 50显示,跳转到第几页,上页,下页功能.如图代码为: using System; using System.Web.UI; using System.Web.UI.We ...
适用于ASP.NET的自定义分页控件
前段时间的项目中需要使用到分页控件,在网上找了不少,最终还是自己动手写一个,比较简单,后续功能以后再实现,现把代码及思路写下来,望大家批评指正.分页控件的分页形式大多分三种,一种是用URL传值,通过给 ...
.net 服务器端自定义分页控件简单示例
使用效果如图: 先将控件添加到工具箱将控件拖入到页面会自动生成如下代码 <pager:pager ID="Pager1" runat="server" ...
winform自定义分页控件
1.控件代码: public partial class PagerControl : UserControl {#region 构造函数public PagerControl() {Initiali ...
QT 自定义分页控件
Qt 自定义页码控件一.效果展示二.头文件 #ifndef PAGECONTROL_H #define PAGECONTROL_H #include <QList> #include ...
C#自定义用户控件之分页
形形色色的分页控件很多,有些可满足我们的要求,但有些却不一定,下面是我在工作当中遇到的问题而随手写了个能满足某些功能的自定义分页控件: 控件源代码: <%@ Control Language=& ...
使用amaze ui的分页样式封装一个通用的JS分页控件
作为一名码农,天天百度.偶尔谷歌,所有代码全靠copy,用第三方插件,偶尔也想着造造轮子,毕竟自己的骨肉总归比较亲. 今天有点空闲时间,想起我们公司之前套的页面的分页插件上还有bug,而写那个分页插件 ...
[置顶] 分步实现具有分页功能的自定义DataList控件【附源代码】
一.控件也是类 [效果] [操作步骤] 1. 新建网站Web 2. 添加类CustomDataList.cs(系统会提示你把类建在App_Code文件夹中),代码如下: using System; ...
【开源】QuickPager ASP.NET2.0分页控件V2.0.0.3 【增加了使用说明】
================================ 欢迎转载,但是请注明出处.本文出自博客园 .谢谢合作! ================================ 最新版本:V ...

妹子UI之自定义分页控件

妹子UI之自定义分页控件相关推荐

最新文章

热门文章