基于jquery的分页组件
这种组件网上有很多,试过各种插件,用起来总有不爽的地方,所以闲时自己写了个,用于学习,如果用在项目上,可能还需要完善下,使用方法如下:
1.引入jquery库文件
2 引入page.js
3 引入page.css
分页条的样式可以在page.css里设置,我在里面用css3写了简单的样式,谷歌chrome浏览器下运行效果图如下:
目前ie不支持css3的效果渲染,so ,ie下效果会不一样,如果项目在ie中运行,修改page.css文件即可
page. js代码如下:
/**
pageTool v1.0
Copyright (c) 2012 jqx128 http://write.blog.csdn.net
Date:2012-07-23
config 配置选项 参数说明:
pageSize:总记录
limit:每页记录数
pageNumLength:分页数字长度
showPageNum:是否显示分页数字
query:查询函数
refresh:是否刷新分页 true 是 false否
*/
(function($) {
$.fn.extend({
page : function(config) {
config = $.extend({
//默认配置
pageNumLength:4,
showPageNum: true,
limit: 10,
refresh:false,
query:function(start,limit){
alert('未指定查询函数');
}
},config||{});
var temp = this;
temp.attr('paged','true');
//初始化
var query ;
if (config.query != null
&& typeof (config.query) != "undefined") {
query = config.query;
}
this.pageNumLength;
// 是否显示分页数字
this.showPageNum = true;
if (config.showPageNum != null
&& typeof (config.showPageNum) != "undefined") {
temp.showPageNum = config.showPageNum;
}
if (config.pageNumLength != null
&& typeof (config.pageNumLength) != "undefined") {
temp.pageNumLength = config.pageNumLength * 1 - 1;
}
//是否有刷新的分页
temp.refresh ;
if (config.refresh != null
&& typeof (config.refresh) != "undefined") {
temp.refresh = config.refresh;
}
// 总记录数
this.pageSize = 0;
if (config.pageSize != null && typeof (config.pageSize) != "undefined") {
temp.pageSize = config.pageSize;
}
// 分页开始位置
this.start = 0;
if (config.start != null && typeof (config.start) != "undefined") {
temp.start = config.start;
}
// 每页记录数
this.limit;
if (config.limit != null && typeof (config.limit) != "undefined") {
temp.limit = config.limit;
}
// 当前页
this.currentPage = 1;
// 总页数
this.pageCount = parseInt((temp.pageSize*1 + temp.limit*1 - 1) / temp.limit*1);
// 分页条对象数组
this.pageBar = [];
this.render = function() {
temp.pageBar = [];
var firstPage = "<input type='button' class='pageBtn' name= 'firstPage' value='首 页'/>";
var prePage = "<input type='button' class='pageBtn' name='prePage' value='上一页'/>";
var turnPage = "<input type='text' class='turnPage' value='"
+ temp.currentPage + "' name='turnPage' />/"
+ temp.pageCount + "页 " + temp.pageSize + "条记录";
var lastPage = "<input type='button' class='pageBtn' name='lastPage' value='尾 页'/>";
var nextPage = "<input type='button' class='pageBtn' name='nextPage' value='下一页'/>";
temp.pageBar.push(firstPage + prePage);
temp.pageBar.push("<b name='pageNums' ></b>");
temp.pageBar.push(nextPage + lastPage + turnPage);
temp.html(
"<div name='hasRecord' class='page'>"
+ temp.pageBar.join("") + "</div><div name='noRecord' class='msg'>无记录</div>");
temp.find("input[name='prePage']").click(function() {
if (temp.currentPage != 1) {
temp.queryData(temp.currentPage * 1 - 1);
}
});
temp.find("input[name='nextPage']").click(function() {
if (temp.currentPage != temp.pageCount) {
temp.queryData(temp.currentPage * 1 + 1);
}
});
temp.find("input[name='firstPage']").click(function() {
if (temp.currentPage != 1) {
temp.queryData(1);
}
});
temp.find("input[name='lastPage']").click(function() {
if (temp.currentPage != temp.pageCount) {
temp.queryData(temp.pageCount);
}
});
temp.find("input[name='prePage']").css('class', 'disabled');
temp.find("input[name='firstPage']").css('class', 'disabled');
// 跳转输入框回车事件
temp.find("input[name='turnPage']").keydown(function(event) {
if (event.keyCode == 13) {
var turnIndex =temp.find("input[name='turnPage']").val();
if (turnIndex > 0 && turnIndex <= temp.pageCount) {
temp.queryData(parseInt(turnIndex));
temp.find("input[name='turnPage']").blur();
}
}
});
if (temp.pageSize == 0) {// 判断是否有记录
temp.find("div[name='hasRecord']").hide();
temp.find("div[name='noRecord']").show();
} else {
temp.find("div[name='hasRecord']").show();
temp.find("div[name='noRecord']").hide();
temp.genericPageNum();
}
}
/**
* 查询数据 startIndex:页数
*/
this.queryData = function(startIndex) {
if(temp.refresh){//是否刷新
var isContinue = temp.setPageSize(temp.attr('pageSize'));
if(isContinue){
temp.exeQuery(startIndex);
}
}else{
temp.exeQuery(startIndex);
}
}
this.exeQuery = function(startIndex){
temp.currentPage = startIndex;
// 当前页是第一页,禁用“首页”、“上一页”;
if (temp.currentPage == 1) {
temp.find("input[name='prePage']").attr('class', 'disabled');
temp.find("input[name='firstPage']").attr('class', 'disabled');
} else {
temp.find("input[name='prePage']").attr('class', 'pageBtn');
temp.find("input[name='firstPage']").attr('class', 'pageBtn');
}
// 当前页是最后一页,禁用“尾页”、“下一页”
if (temp.currentPage == temp.pageCount) {
temp.find("input[name='nextPage']").attr('class', 'disabled');
temp.find("input[name='lastPage']").attr('class', 'disabled');
} else {
temp.find("input[name='nextPage']").attr('class', 'pageBtn');
temp.find("input[name='lastPage']").attr('class', 'pageBtn');
}
temp.find("input[name='turnPage']").val(temp.currentPage);
query((startIndex - 1) * temp.limit, temp.limit);
temp.genericPageNum();
}
// 初始化分页数字栏
this.genericPageNum = function() {
if (!temp.showPageNum) {
return false;
}
var pageNums = [];
var indexUp = parseInt(temp.currentPage) + temp.pageNumLength * 1;
var startIndex;
// 判断分页数字循环起始点和结束点
if (indexUp <= temp.pageCount) {// 分页数字最后一位小于总页数
if (temp.currentPage == 1) {
startIndex = 1;
indexUp = parseInt(temp.currentPage) + temp.pageNumLength * 1;
} else {// 分页数字排到页尾
startIndex = temp.currentPage * 1 - 1;
indexUp = parseInt(temp.currentPage)
+ (temp.pageNumLength * 1 - 1);
}
} else {
if (temp.currentPage == 1) {
startIndex = 1;
indexUp = temp.pageCount;
} else {
startIndex = temp.currentPage * 1 - 1;
indexUp = temp.pageCount;
}
}
for ( var i = startIndex; i <= indexUp; i++) {
var chooseClass = 'notChoosed';
if (i == temp.currentPage) {// 当前选中页
chooseClass = 'choosed';
}
if (i == indexUp) {
if (indexUp != temp.pageCount) {
pageNums.push("<a name='pageNum' class='"
+ chooseClass + "' value='" + i + "' index='end'>["
+ i + "]</a>");
} else {// 最后一页
pageNums.push("<a name='pageNum' class='"
+ chooseClass + "' value='" + i
+ "' index='last'>[" + i + "]</a>");
}
} else if (i == temp.currentPage) {
pageNums.push("<a name='pageNum' class='"
+ chooseClass + "' value='" + i + "' index='first'>["
+ i + "]</a>");
} else {
pageNums.push("<a name='pageNum' class='"
+ chooseClass + "' value='" + i + "' index=''>[" + i
+ "]</a>");
}
}
temp.find("b[name='pageNums']").html(pageNums.join(""));
// 分页数字点击事件
temp.find("a[name='pageNum']").unbind('click').bind(
'click',
function() {
$("a[name='pageNum']").attr('class',
'notChoosed');
$(this).attr('class', 'choosed');
temp.queryData($(this).attr('value'));
});
}
// 变量get、set方法
temp.setPageSize = function(data) {
// 查询页数与之前不一致,重新初始化分页条(数据库记录更改)
if (temp.pageSize != data) {
this.pageSize = data;
this.pageCount = parseInt((this.pageSize*1 + this.limit*1 - 1)
/ this.limit*1);
this.render();
this.queryData(1);
return false;
}else{
return true;
}
}
this.getPageSize = function() {
return this.pageSize;
}
this.setLimit = function(v) {
this.limit = v;
}
this.getLimit = function() {
return this.limit;
}
this.render();
}
})
})(jQuery);
page.css
.pageBtn{
background-color:#005757;
color:#fff;
font-size:12px;
margin:0 3px 0 3px;
cursor:pointer;
border-radius: 15px 5px;
}
.disabled{
background-color:#d0d0d0;
color:#FCFCFC;
font-size:12px;
margin:0 3px 0 3px;
cursor:pointer;
border-radius: 15px 5px;
}
.turnPage{
display:left;
width:20px;
height:10px;
font-size:12px;
text-align:center;
}
.page{
font-size:12px;
display:block;
}
.msg{
font-size:12px;
margin:0 5px 0 5px;
text-align:center;
}
.choosed{
margin:0 2px 0 2px;
}
.notChoosed{
cursor:pointer;
background-color:#005757;
color:#fff;
margin:0 2px 0 2px;
}
demo.html:
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>pageTest.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="page.css">
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript" src="page.js"></script>
<script type="text/javascript">
var pageSize;
var list;
var limit = 10;
function query(start, limit) {//你的查询函数
$.ajax({
url:'',
type:'post',
success:function(msg){//查询返回后设置分页总条数
$("#pageBar").attr('pageSize',msg.pageSize);
if($("#pageBar").attr('paged')==null){
$("#pageBar").page({
pageSize:pageSize,
refresh:true,
query:query
});
}
}
});
}
</script>
</head>
<body>
<div id="pageBar"></div>
</body>
</html>