【jquery模仿net控件】简单分页控件1.0，附上gridview使用测试
前言
最近项目需求需要用到jquery的分页功能，所以就自己模仿着其它地方的写了一个，现在配合着原来写的gridview一起使用看看效果。
我们项目有个地方有点痛苦，他不能返回数据的总记录数，这个bug不修复我这边都只能动态附初始值，另外首页尾页等因为刚刚写起皆暂时未实现，
等后面点调整后，有必要便一起发出来。
截图
分页代码使用示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://HdhCmsTestw3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://HdhCmsTestw3.org/1999/xhtml">
<head>
<title></title>
<link href="css/pagination.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="js/Pagination.js" type="text/javascript"></script>
<script src="http://HdhCmsTestcnblogs测试数据/03GridView/js/GridViewBase.js" type="text/javascript"></script>
<script src="http://HdhCmsTestcnblogs测试数据/03GridView/js/GridColum.js" type="text/javascript"></script>
<script src="http://HdhCmsTestcnblogs测试数据/03GridView/js/GridRow.js" type="text/javascript"></script>
<script src="http://HdhCmsTestcnblogs测试数据/03GridView/js/GridView.js" type="text/javascript"></script>
<script type="text/javascript">
// initGrid
var gridDataBind = function (data) {
var tb = $("#tb" );
var grid = new GridView();
grid.style = {
'70%'
};
grid.attribute = {
className: 'infolist_hr'
};
grid.parentEl = tb;
grid.dataSource = data;
grid.colModel = [{
'th': { 'title': '<input type="checkbox" class="th_select" />', 'attribute': { 'className': 'common' } },
'td': { 'template': '<input type="checkbox" class="td_select" />', 'style': { 'width': '2%' }, 'attribute': { 'className': 'common indentten' } }
}, {
'th': { 'title': '标题', 'attribute': { 'className': 'common' } },
'td': { 'template': '{%title%}', 'style': { 'width': '40%' }, 'attribute': { 'className': 'common indentten' } }
}, {
'th': { 'title': '来源', 'attribute': { 'className': 'common' } },
'td': { 'template': '{%from%}', 'style': { 'width': '20%' }, 'attribute': { 'className': 'common indentten' } }
}, {
'th': { 'title': '时间', 'attribute': { 'className': 'common' } },
'td': { 'template': '{%created%}', 'style': { 'width': '15%' }, 'attribute': { 'className': 'common indentten' } }
}, {
'th': { 'title': '', 'attribute': { 'className': 'common' } },
'td': { 'template': '<span class="edit" style="cursor: pointer;" >编辑</span> <span class="delete" style="cursor: pointer;" >删除</span>', 'style': { 'width': '13%' }, 'attribute': { 'className': 'common indentten' } }
}];
grid.render();
};
var bind = function (start, limit) {
if (! start) {
start = 0 ;
}
if (! limit) {
limit = 9 ;
}
var url = "http://113.142.30.139/tpw-webapp/rest/proxy/news_ln_statistics?jsonp=?&start=" + start + "&limit=" + limit;
var tb = $("#tb" );
tb.html( "数据正在加载......" );
$.getJSON(url, function (data) {
tb.html( "" );
if (data && typeof (data) == 'string' ) {
data = eval('(' + data + ')' );
} // if
if (data.data) {
data = data.data;
}
gridDataBind(data);
}); // $.getJSON(
};
var pageChanged = function (page) {
var start = page.pageIndex * page.cfg.pageSize;
var limit = page.cfg.pageSize;
bind(start, limit);
return false ;
};
var initPage = function () {
var page = $('#page' );
var url = "http://113.142.30.139/tpw-webapp/rest/proxy/news_ln_statistics" ;
var page = new Pagination({
parentEl: page,
pageChanged: pageChanged
});
page.allRow = 100 ;
page.render();
};
$(document).ready( function () {
bind();
initPage();
}); // $(document)
</script>
</head>
<body>
<div id="tb">
</div>
<div id="page">
</div>
</body>
</html>
分页控件代码
var Pagination = function (_cfg) {
var sender = this ;
this .cfg = {
parentEl: $( 'body' ),
pageSize: 10 ,
pageNum: 7, // 每页放几个显示的1,2,3,4
pageEdge: 2 ,
linkTo: '#' ,
linkText: 'pageno' ,
preText: '上一页' ,
nextText: '下一页' ,
ellipseText: "..." ,
pageChaged: function () { return false ; }
};
if (_cfg) {
$.each(_cfg, function (key, value) {
sender.cfg[key] = value;
});
}
this .pageIndex = 0 ;
this .allRow = 0 ;
this .totalPage = 0 ;
this .el = null ;
this .visible = false ;
this .prePage = null ;
this .nextPage = null ;
this .numPage = null ;
};
Pagination.prototype.render = function () {
this .onInit();
this .preRender();
};
Pagination.prototype.preRender = function () {
var scope = this ;
var prePage = this .prePage;
var nextPage = this .nextPage;
var numPage = this .numPage;
var total = this .totalPage;
var index = this .pageIndex;
prePage.attr( 'class', 'prev' );
if (index == 0 ) {
prePage.attr( 'class', 'current prev' );
}
nextPage.attr( 'class', 'next' );
if (index == total - 1 ) {
nextPage.attr( 'class', 'current next' );
}
$.each(numPage, function (i, item) {
item.removeAttr( 'class' );
if (scope.pageIndex == parseInt(item.html()) - 1 ) {
item.attr( 'class', 'current' );
}
});
};
Pagination.prototype.onInit = function () {
this .init();
this .initHtml();
this .eventBind();
};
Pagination.prototype.init = function () {
var cfg = this .cfg;
var totalPage = this .totalPage;
var allRow = this .allRow;
var pageSize = cfg.pageSize;
this .totalPage = allRow % pageSize == 0 ? allRow / pageSize : allRow / pageSize + 1 ;
this .totalPage = parseInt( this .totalPage);
if (totalPage <= 1 ) {
this .visible = false ;
}
};
Pagination.prototype.getNumPage = function () {
var cfg = this .cfg;
var pageSize = cfg.pageSize;
var index = this .pageIndex;
var totalPage = this .totalPage;
var pageNum = cfg.pageNum;
var limit = pageNum / 2 ;
var _limit = parseInt(limit);
limit = limit > _limit ? _limit + 1 : _limit;
var numPage = [];
var numArr = [];
for ( var i = 0; i < pageNum; i++ ) {
if (index < limit) {
numArr.push(i + 1 );
} else if (totalPage - index <= limit) {
numArr.push(totalPage - pageNum + i + 1 );
} else {
numArr.push(index - limit + i + 2 );
}
}
var elStr = '' ;
var linkTo = cfg.linkTo;
if (linkTo == '#' ) {
for ( var i = 0, len = numArr.length; i < len; i++ ) {
var tempEl = $('<a href="#">' + numArr[i].toString() + '</a>' );
numPage.push(tempEl)
}
} else {
var linkText = cfg.linkText;
var sign = '?' ;
if (linkTo.indexOf('?') != -1 ) {
sign = '&' ;
}
for ( var i = 0, len = numArr.length; i < len; i++ ) {
var tempEl = $('<a href="' + linkTo + sign + linkText + '=' + i.toString() + '">' + numArr[i].toString() + '</a>' );
numPage.push(tempEl);
}
}
return numPage;
};
Pagination.prototype.initHtml = function () {
var cfg = this .cfg;
var pageInfo = $('<div class="pagination"></div>' );
var linkTo = cfg.linkTo;
var _pre = '<a href="#" class="prev">上一页</a>' ;
var _nex = '<a href="#" class="next">下一页</a>' ;
if (linkTo != '#' ) {
var linkText = cfg.linkText;
var sign = '?' ;
if (linkTo.indexOf('?') != -1 ) {
sign = '&' ;
}
_pre = '<a href="' + linkTo + sign + linkText + '=' + (parseInt( this .pageIndex) - 1) + '" class="prev">上一页</a>' ;
_nex = '<a href="' + linkTo + sign + linkText + '=' + (parseInt( this .pageIndex) + 1) + '" class="next">下一页</a>' ;
}
var prePage = $(_pre);
var nextPage = $(_nex);
var numPage = this .getNumPage();
pageInfo.append(prePage);
$.each(numPage, function (i, item) {
pageInfo.append(item);
});
pageInfo.append(nextPage);
this .el = pageInfo;
this .prePage = prePage;
this .nextPage = nextPage;
this .numPage = numPage;
cfg.parentEl.append(pageInfo);
};
Pagination.prototype.eventBind = function (func) {
var scope = this ;
var cfg = this .cfg;
var prePage = this .prePage;
var nextPage = this .nextPage;
var numPage = this .numPage;
prePage.unbind( 'click' );
prePage.bind( 'click', function (e) {
if (scope.pageIndex != 0 ) {
scope.pageIndex = scope.pageIndex - 1 ;
scope.pageChanged();
}
});
$.each(numPage, function (i, item) {
item.unbind( 'click' );
item.bind( 'click', function (e) {
if (scope.pageIndex != parseInt(item.html()) - 1 ) {
scope.pageIndex = parseInt(item.html()) - 1 ;
scope.pageChanged();
}
});
});
nextPage.unbind( 'click' );
nextPage.bind( 'click', function (e) {
if (scope.pageIndex != scope.totalPage - 1 ) {
scope.pageIndex = scope.pageIndex + 1 ;
scope.pageChanged();
}
});
};
Pagination.prototype.pageChanged = function () {
var scope = this ;
var cfg = this .cfg;
scope.el.remove();
var pageChaged = cfg.pageChanged;
if (pageChaged && typeof (pageChaged) == 'function' ) {
pageChaged( this );
}
this .render();
// alert(this.pageIndex);
};
后续
由于各方面皆不完整，此处便不作详细说明，有必要的话，以后整理后会形成API，但是可能没有必要，因为代码总的来说还是很水的......
在学习吧......
分类: Web前端
作者： Leo_wl
出处： http://HdhCmsTestcnblogs测试数据/Leo_wl/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
版权信息查看更多关于【jquery模仿net控件】简单分页控件1.0，附上gridview使用测试的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did48861