【jquery模仿net控件】简单分页控件1.0，附上gridview使用测试
2013-06-24 10:59
716 查看
前言
最近项目需求需要用到jquery的分页功能，所以就自己模仿着其它地方的写了一个，现在配合着原来写的gridview一起使用看看效果。我们项目有个地方有点痛苦，他不能返回数据的总记录数，这个bug不修复我这边都只能动态附初始值，另外首页尾页等因为刚刚写起皆暂时未实现，
等后面点调整后，有必要便一起发出来。
截图
分页代码使用示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.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://www.cnblogs.com/03GridView/js/GridViewBase.js" type="text/javascript"></script>
<script src="http://www.cnblogs.com/03GridView/js/GridColum.js" type="text/javascript"></script>
<script src="http://www.cnblogs.com/03GridView/js/GridRow.js" type="text/javascript"></script>
<script src="http://www.cnblogs.com/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 = {
width: '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，但是可能没有必要，因为代码总的来说还是很水的......在学习吧......
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 【jquery模仿net控件】简单分页控件1.0，附上gridview使用测试
- 【jquery模仿net控件】简单分页控件1.0，附上gridview使用测试
- 【jquery模仿net控件】初步GridView模型实现，及其简单应用
- 【jquery模仿net控件】初步GridView模型实现，及其简单应用
- 使用JQuery 做仿asp.net 中的gridview 控件编辑效果
- 使用JQuery 做仿asp.net 中的gridview 控件编辑效果
- 【jquery模仿net控件】简单的dropdownlist与datalist
- net 简单图表控件 (介绍测试示例使用部分) [c/s桌面应用程序控件] II
- ASP.NET WebForm 分页控件 AspNetPager 使用的简单示例
- 【jquery模仿net控件】简单的datalist控件更新，及其简单应用
- 【jquery模仿net控件】简单的dropdownlist与datalist
- asp.net中使用分页控件，并绑定数据到GridView或Repeater
- 【jquery模仿net控件】简单的datalist控件更新，及其简单应用
- 在ASP.NET中使用ObjectDataSource数据控件和GridView显示数据(2)
- 如何使用 Visual C# .NET 对 DataGrid Windows 控件执行分页
- VS2012使用验证控件出现[ASP.NET]WebForms UnobtrusiveValidationMode 需要 'jquery' 的 ScriptResourceMapping。請加入 ScriptResourceMapping 命名的 jquery (區分大小寫)。的解决办法。
- 简单实用的分页控件 AspNetPager.dll 的使用方法
- VB.NET 中 使用 ListView 控件的简单例子
- 实例详解jQuery结合GridView控件的使用方法
- ASP.NET数据绑定GridView控件使用技巧