jquery插件封装
HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.pageInit
{
padding: 5px 10px;
border: 1px solid #ff9600;
text-decoration: none;
color: #ff6500;
margin-left: 10px;
}
.pageSelected
{
padding: 5px 10px;
border: 1px solid #ff6500;
text-decoration: none;
color: #ff6500;
background: #ffbe94;
margin-left: 10px;
}
</style>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/JScript1.js" type="text/javascript"></script>
<script>
$(function () {
console.log($("table tbody tr").length);
//类级别 ，通过jQuery访问（即$）
//$.simplePaging({ table: $("table"), pageSize: 5, currentPage: 0 });
//对象级别，通过对象访问（即$("table")）
$("table").simplePaging({ pageSize: 6, currentPage: 1 });
});
</script>
</head>
<body>
<table>
<thead>
<tr>
<td>
第一列
</td>
<td>
第二列
</td>
<td>
第三列
</td>
<td>
第四列
</td>
<td>
第五列
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
1
</td>
<td>
1
</td>
<td>
1
</td>
<td>
1
</td>
</tr>
<tr>
<td>
2
</td>
<td>
2
</td>
<td>
2
</td>
<td>
2
</td>
<td>
2
</td>
</tr>
<tr>
<td>
3
</td>
<td>
3
</td>
<td>
3
</td>
<td>
3
</td>
<td>
3
</td>
</tr>
<tr>
<td>
4
</td>
<td>
4
</td>
<td>
4
</td>
<td>
4
</td>
<td>
4
</td>
</tr>
<tr>
<td>
5
</td>
<td>
5
</td>
<td>
5
</td>
<td>
5
</td>
<td>
5
</td>
</tr>
<tr>
<td>
6
</td>
<td>
6
</td>
<td>
6
</td>
<td>
6
</td>
<td>
6
</td>
</tr>
<tr>
<td>
7
</td>
<td>
7
</td>
<td>
7
</td>
<td>
7
</td>
<td>
7
</td>
</tr>
<tr>
<td>
8
</td>
<td>
8
</td>
<td>
8
</td>
<td>
8
</td>
<td>
8
</td>
</tr>
<tr>
<td>
9
</td>
<td>
9
</td>
<td>
9
</td>
<td>
9
</td>
<td>
9
</td>
</tr>
<tr>
<td>
11
</td>
<td>
11
</td>
<td>
11
</td>
<td>
11
</td>
<td>
11
</td>
</tr>
<tr>
<td>
13
</td>
<td>
13
</td>
<td>
13
</td>
<td>
13
</td>
<td>
13
</td>
</tr>
<tr>
<td>
23
</td>
<td>
23
</td>
<td>
23
</td>
<td>
23
</td>
<td>
23
</td>
</tr>
<tr>
<td>
33
</td>
<td>
33
</td>
<td>
33
</td>
<td>
33
</td>
<td>
33
</td>
</tr>
<tr>
<td>
43
</td>
<td>
43
</td>
<td>
43
</td>
<td>
43
</td>
<td>
43
</td>
</tr>
<tr>
<td>
53
</td>
<td>
53
</td>
<td>
53
</td>
<td>
53
</td>
<td>
53
</td>
</tr>
<tr>
<td>
63
</td>
<td>
63
</td>
<td>
63
</td>
<td>
63
</td>
<td>
63
</td>
</tr>
<tr>
<td>
73
</td>
<td>
73
</td>
<td>
73
</td>
<td>
73
</td>
<td>
73
</td>
</tr>
<tr>
<td>
83
</td>
<td>
83
</td>
<td>
83
</td>
<td>
83
</td>
<td>
83
</td>
</tr>
<tr>
<td>
93
</td>
<td>
93
</td>
<td>
93
</td>
<td>
93
</td>
<td>
93
</td>
</tr>
<tr>
<td>
113
</td>
<td>
113
</td>
<td>
113
</td>
<td>
113
</td>
<td>
113
</td>
</tr>
<tr>
<td>
123
</td>
<td>
123
</td>
<td>
123
</td>
<td>
123
</td>
<td>
123
</td>
</tr>
</tbody>
</table>
</body>
</html>
jQuery插件（文件名：JScript.js）
/** * 插件内部方法，外部无法访问，要求：table的绘制需要规范，即table需要采用如下格式: * <table> * <thead> * </thead> * <tbody> * </tbody> * </table> * 说明：本分页函数仅对tbody中的行进行分页显示 * * @param {} table table对象 。 必须参数 * @param {} pageSize 每页显示的行数 。必选参数 * @currentPage 当前页，索引值从0开始，默认值为0,即0代表第一页。 可选参数 */ (function ($) { ////类级别 ，通过jQuery访问（即$），访问方式如：$.simplePaging({ table: $("table"), pageSize: 5, currentPage: 0 }); // var defaults = { // mytable: null, // pageSize: 5, // currentPage: 0 // }; // $.extend({ // simplePaging: function (options) { // $.extend(defaults, options); //使用jQuery.extend 覆盖插件默认参数 // return paging(options.mytable, options.pageSize, options.currentPage); // } // }); /*对象级别，通过对象访问（即$("table")） 访问方式如：$("table").simplePaging({ pageSize: 6, currentPage: 1 });*/ var defaults = { pageSize: 5, currentPage: 0 }; $.fn.simplePaging = function (options) { var opts = $.extend({}, defaults, options); //使用jQuery.extend 覆盖插件默认参数 return this.each(function () { //这里的this 就是 jQuery对象 //遍历所有的要高亮的dom,当调用 highLight()插件的是一个集合的时候。 var $this = $(this); //获取当前dom 的 jQuery对象，这里的this是当前循环的dom //根据参数来设置 dom的样式 paging($this, opts.pageSize, opts.currentPage); }); }; //插件内部方法，外部无法访问 function paging(table, pageSize, currentPage) { var $table = $(table); //表格对象 if (currentPage == null || currentPage < 1) { currentPage = 0; } var sumRows = $table.find('tbody tr').length; //总行数 var sumPages = Math.ceil(sumRows / pageSize); //总页数 if (sumPages == currentPage) { currentPage--; } //默认所有行都隐藏，然后根据分页显示 $table.find('tbody tr').hide().slice(currentPage * pageSize, (currentPage + 1) * pageSize).show(); //避免多次调用产生重复的页码 $table.next("div[tablePagingDiv]").remove(); if (sumPages > 1) { $table.bind('paging', function () { //默认所有行都隐藏，然后根据分页显示 $table.find('tbody tr').hide().slice(currentPage * pageSize, (currentPage + 1) * pageSize).show(); }); //页码div var $pager = $('<div tablePagingDiv="" style="height:40px;line-height:40px;"></div>'); for (var pageIndex = 0; pageIndex < sumPages; pageIndex++) { $('<a href="#"><span>' + (pageIndex + 1) + '</span></a>').bind('click', { 'newPage': pageIndex }, function (event) { currentPage = event.data['newPage']; $(this).addClass('pageSelected').siblings().removeClass('pageSelected'); //为每一个要显示的页数上添加触发分页函数 $table.trigger('paging'); }).appendTo($pager); $pager.append(" "); } //添加初始化css $('a', $pager).addClass('pageInit'); $('a:eq(' + currentPage + ')', $pager).addClass('pageSelected').siblings().removeClass('pageSelected'); $pager.insertAfter($table); //在table上触发paging事件 $table.trigger('paging'); } } })(jQuery);
