写的jquery分页插件AmSetPager
2013-04-14 20:47
316 查看
第一次做的插件，早写好了，后来发现一个jquery插件模板，就拿过来套。名字叫jquery.boilerplate.js。我的理解不是很深，也不太理解太多效率问题。
本来我是一个做asp.net开发的，可是公司好些个人包括美工没太会js啊。项目很多js改来改去搞得我都头大了。萌发了写插件的想法，于是照葫芦画瓢写啊，写插件的过程也学了js的面向对象。对js，还有一些效率问题有了更深了解。以前有个项目单个页面写过600多行的js文件。全是按功能面向过程写的。乱的不堪回首啊
好吧先是说一下插件吧。
插件叫AmSetPager，首先是看一下样子：
此处下载：点击下载
我这个插件好像使用有些另类，是调用数据展示容器的元素$("#DataContent").AmSetPager({...});在参数中配置分页容器元素ID。写完插件后看别的插件都是调用分页元素ID
贴下源码：
说一下样式（.pager就是分页元素class）：
有三种方式，一个是页面中数据容器有全部数据，这时就是mode:'static'。还有就是ajax按分页方式取数据时，mode:'ajax'，还有根据url传参分页mode:'url'（我感觉这时估计不会用到吧）。
首先静态的：
html:
js代码：
这里也可以设置callback，和下面类似
截图：
ajax的：
html:
后台获取实例数据：
js代码：
截图：
url的：
没什么可说的，js代码：
urlparameter为传的参数，也必须设置每页显示，和数据总条数。点击页码3，url地址栏为 ：test.htm?ss=1&ee=2&p=3
插件写的可能有点臃肿，很多地方也不合理。希望大家下载试试，提提意见，让一个菜鸟能成长，谢啦
本来我是一个做asp.net开发的，可是公司好些个人包括美工没太会js啊。项目很多js改来改去搞得我都头大了。萌发了写插件的想法，于是照葫芦画瓢写啊，写插件的过程也学了js的面向对象。对js，还有一些效率问题有了更深了解。以前有个项目单个页面写过600多行的js文件。全是按功能面向过程写的。乱的不堪回首啊
好吧先是说一下插件吧。
插件叫AmSetPager，首先是看一下样子：
此处下载：点击下载
我这个插件好像使用有些另类，是调用数据展示容器的元素$("#DataContent").AmSetPager({...});在参数中配置分页容器元素ID。写完插件后看别的插件都是调用分页元素ID
贴下源码：
;(function ( $, window, document, undefined ) {
// Create the defaults once
var pluginName = "AmSetPager",
defaults = {
pagerName: "pager", //分页的容器（默认为pager）
viewCount: 5, //可显示多少条数据
dataCount: 0, //如果后台取数据，总数多少（静态的不用）
selectClass: "selectno", //选中的样式
listCount:10, //显示多少个分页码（不包括前一页，后一页）
enablePrevNext:true, //允许显示前一页后一页
enableFirst:true, //允许只有一页的情况下显示页码
template:"default", //模板（现只有一个，default）
mode:"static", //"url" or "ajax"
urlparameter:"", //url参数,不用写页码参数！后面aa=1&bb=2...
callback:null //回调函数（ajax取数据或者静态也可以使用）
};
// The actual plugin constructor
function Plugin( element, options ) {
this.element = element;
this.options = $.extend( {}, defaults, options );
this._name = pluginName;
this.init();
}
//获取url参数
var getQueryString = function (name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return undefined;
}
//静态模板数据展示
var Bind_StaticData = function ($content, minnum, maxnum) {
if (minnum > 0) {
$content.children(":gt(" + (minnum - 1) + "):lt(" + maxnum + ")").css("display", "");//chrome下使用block布局错乱，因此使用空
} else {
$content.children(":lt(" + maxnum + ")").css("display", "");
}
$content.children(":lt(" + (minnum) + ")").css("display", "none");
$content.children(":gt(" + (maxnum - 1) + ")").css("display", "none");
}
//格式化成a元素
var FormatStr = function(pageNo,pageText,m,p) {
var href = m=='url'?location.pathname+"?"+p+"&p="+pageNo:"javascript:void(0);";
if (typeof (pageText) == "number") {
return "<a href='"+href+"' >" + pageText + "</a>";
}
return "<a href='"+href+"' i='" + pageNo + "'>" + pageText + "</a>";
}
//选中状态a元素
var FormatStrIndex = function(pageNo,seclass){
return "<span class='"+seclass+"'>" + pageNo + "</span>";
}
//private
//分页主要行为逻辑部分
//默认模板初始化页码集合
var InitDefaultList = function(_pageIndex,pageCount){
if(this.options.listCount<5)
throw new Error("listCount must be lager than 5"); //listCount>5
var pageIndex = parseFloat(_pageIndex); //转化为number
var ns = [];
var numList = new Array(this.options.listCount);
if (pageIndex >= this.options.listCount) {
numList[0] = 1;
numList[1] = "…";
var infront = 0;
var inback = 0;
var inflag = Math.floor((this.options.listCount-2)/2);
if(this.options.listCount%2==0){
infront = inflag-1;
inback = inflag;
}else{
infront = inflag;
inback = inflag;
}
if (pageIndex + inback >= pageCount) {
for (i = pageCount - (this.options.listCount-3); i < pageCount + 1; i++) {
ns.push(i);
}
for (j = 0; j <= (this.options.listCount-3); j++) {
numList[j + 2] = ns[j];
}
}
for (i = pageIndex - infront; i <= pageIndex + inback; i++) {
ns.push(i);
}
for (j = 0; j < (this.options.listCount-2); j++) {
numList[j + 2] = ns[j];
}
} else {
if (pageCount >= this.options.listCount) {
for (i = 0; i < this.options.listCount; i++) {
numList[i] = i+1;
}
} else {
for (i = 0; i < pageCount; i++) {
numList[i] = i+1;
}
}
}
return numList;
}
//生成页码
var InitPager = function (pageIndex, pageCount) {
$("#"+this.options.pagerName).html('');
if(!this.options.enableFirst&&pageCount<=1){
return null;
}
var array = [];
var $con = $("#"+this.options.pagerName);
switch(this.options.template){ //选择模板
case 'default':array = InitDefaultList.call(this,pageIndex,pageCount);break;
default:array = InitDefaultList.call(this,pageIndex,pageCount);
}
var arr_len = array.length;
if(!array instanceof Array){
throw new Error("is not array");
}
if(arr_len!=this.options.listCount){
throw new Error("array.length error:"+arr_len);
}
if(pageIndex>1&&this.options.enablePrevNext){
$con.append(FormatStr(pageIndex-1,'上一页',this.options.mode,this.options.urlparameter));
}
for(var i=0;i<arr_len;i++){
if(typeof array[i]=='undefined'){
continue;
}
if(pageIndex==array[i]){
$con.append(FormatStrIndex(array[i],this.options.selectClass));
}else if(typeof array[i]=='number'){
$con.append(FormatStr(array[i],array[i],this.options.mode,this.options.urlparameter));
}else{
$con.append(array[i]);
}
}
if(pageIndex<pageCount&&this.options.enablePrevNext){
$con.append(FormatStr(pageIndex+1,'下一页',this.options.mode,this.options.urlparameter));
}
}
Plugin.prototype = {
//初始化
init: function () {
var that = this;
var options = that.options;
var $thisbase = $(that.element);
var $content;
if ($thisbase.is(':has(tbody)')) {
$content = $thisbase.children('tbody');
}
else{
$content=$thisbase;
}
var count = options.mode=='static'?$content.children().length:options.dataCount;
var eachcount = options.viewCount;
var totalpage = Math.ceil(count / eachcount);
var $pager = $("#"+options.pagerName);
if(options.mode=='url'){
var urlindex = getQueryString("p");
if(isNaN(urlindex)){
InitPager.call(that, 1, totalpage);
}else{
urlindex = parseFloat(urlindex);//要转换成数字
InitPager.call(that, urlindex > totalpage ? totalpage : urlindex, totalpage);
}
} else {
InitPager.call(that, 1, totalpage);
if(options.mode=='static'&&typeof options.callback!='function'){
Bind_StaticData($content,0,eachcount);
}else{
options.callback($content,1,options.viewCount);
}
$pager.bind("click",function(e){ //click事件
if(e.target.tagName!='A') return;
var $this = $(e.target);
$this.removeAttr("href").siblings().attr("href", "javascript:void(0);");//..
var indexnum = parseFloat($this.html())==$this.html()?parseFloat($this.html()):parseFloat($this.attr('i'));
var maxnum = (indexnum * eachcount);
var minnum = (indexnum - 1) * eachcount;
if(options.mode!='static'&&options.mode!='ajax'){
throw new Error("mode must be selected:static,url,ajax");
}
if(options.mode=='static'&&typeof options.callback!='function'){
InitPager.call(that, indexnum, totalpage);
Bind_StaticData($content,minnum, maxnum);
}else{
InitPager.call(that, indexnum, totalpage);
options.callback($content,indexnum,options.viewCount);
}
});
}
}
};
$.fn[pluginName] = function ( options ) {
return this.each(function () {
if (!$.data(this, "plugin_" + pluginName)) {
$.data(this, "plugin_" + pluginName, new Plugin( this, options ));
}
});
};
})( jQuery, window, document );说一下样式（.pager就是分页元素class）：
<style type="text/css">
.pager a{ text-decoration: none; border: 1px solid #e7ecf0;color: #15B;}
.pager a:hover{ background-color:#E6EBEF}
.pager a,.pager span{display: inline-block;padding: 0.1em 0.4em;margin-right: 5px; margin-bottom: 5px;}
.selectno{background: #26B;color: #fff;border: 1px solid #AAE;}
</style>有三种方式，一个是页面中数据容器有全部数据，这时就是mode:'static'。还有就是ajax按分页方式取数据时，mode:'ajax'，还有根据url传参分页mode:'url'（我感觉这时估计不会用到吧）。
首先静态的：
html:
<table id="tablepager" border="0" cellpadding="0" cellspacing="0">
<tr><td><p>1aaaaaaaaaaaaaaaaaaaaaa</p></td></tr>
<tr><td><p>2aaaaaaaaaaaaaaaaaaaaaa</p></td></tr>
<tr><td><p>3aaaaaaaaaaaaaaaaaaaaaa</p></td></tr>
<tr><td><p>4aaaaaaaaaaaaaaaaaaaaaa</p></td></tr>
<tr><td><p>5aaaaaaaaaaaaaaaaaaaaaa</p></td></tr>
<tr><td><p>6aaaaaaaaaaaaaaaaaaaaaa</p></td></tr>
<tr><td><p>7aaaaaaaaaaaaaaaaaaaaaa</p></td></tr>
<tr><td><p>8aaaaaaaaaaaaaaaaaaaaaa</p></td></tr>
<tr><td><p>9aaaaaaaaaaaaaaaaaaaaaa</p></td></tr>
</table>
<div id="pager" class="pager"></div>js代码：
$(function(){
$("#tablepager").AmSetPager({"viewCount":2,"mode":"static","listCount":6});
})这里也可以设置callback，和下面类似
截图：
ajax的：
html:
<table id="tablepager" border="0" cellpadding="0" cellspacing="0">
</table>
<div id="pager" class="pager"></div>后台获取实例数据：
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
int index = int.Parse(context.Request.QueryString["index"]);
int viewCount = int.Parse(context.Request.QueryString["viewCount"]);
List<string> list = new List<string>();
for (int i = 1; i <= viewCount; i++)
{
list.Add(index + "_" + i + "....................");
}
JavaScriptSerializer ser = new JavaScriptSerializer();
context.Response.Write(ser.Serialize(list));
context.Response.End();
}js代码：
<script type="text/javascript">
$(function () {
$("#tablepager").AmSetPager({ "viewCount": 3, "mode": "ajax", "dataCount": 30, "listCount": 6, "callback": function (ev, indexnum, viewCount) {//callback中三个参数分别为：数据容器对象，当前页，显示几条数据
$.getJSON("Handler1.ashx", { "index": indexnum, "viewCount": viewCount }, function (data) {
ev.html('');
for (var i = 0; i < data.length; i++) {
ev.append("<tr><td>" + data[i] + "</td></tr>");
}
});
}
});
})
</script>截图：
url的：
没什么可说的，js代码：
$(function(){
$("#tablepager").AmPager({"viewCount":5,"dataCount":50,"mode":"url","listCount":6,"urlparameter":"ss=1&ee=2"});
})urlparameter为传的参数，也必须设置每页显示，和数据总条数。点击页码3，url地址栏为 ：test.htm?ss=1&ee=2&p=3
插件写的可能有点臃肿，很多地方也不合理。希望大家下载试试，提提意见，让一个菜鸟能成长，谢啦
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- [JQuery]分页插件jQuery pager plugin功能扩展
- php + jquery ui插件 + jquery pager插件 实现新闻的 标签分类 + 无刷新分页
- ibatis+jquery pager插件分页总结
- jquery分页插件AmSetPager(自写)
- [JQuery]分页插件jQuery pager plugin功能扩展
- PHP、Smarty与jQuery Ajax 分页插件jquery.pager.js的使用
- jquery分页插件AmSetPager(自写)
- 【分页】Jquery分页排序插件 jPList
- JQuery------分页插件下载地址
- ajax获取json数据使用jquery分页插件显示
- jquery分页插件jpaginate不兼容ie的问题
- jquery.pagination.js分页插件的运用
- 快速掌握jquery分页插件jqPaginator的使用方法
- 自己做的jQuery分页插件jPage
- 自定义Jquery分页插件
- Bootstrap 静态分页 和 jquery_pagination插件 动态分页
- Jquery的DataTable插件AJAX服务器分页的的学习心得
- jquery分页滑动插件（鼠标可控制上下滑动）
- 利用JQuery写一个简单的分页插件
- 20 个 jQuery 分页插件和教程，附带实例