Html 分页自动控制、分页自动生成、分页数量可控制
2016-08-13 13:26
281 查看
/**
* 对页面进行分页
* @param obj 页码标签对象
* @param pageCount number 总页面数
* @param pageSize number 分页大小
* @param currentPage number 当前页
*/
function PagingManage(obj, pageCount, pageSize, currentPage) {
if (obj) {
var dataCount = pageCount; //数据总数
var pagesize = pageSize;//单页数量
var currentpage = currentPage;//当前页面
var pageNum;//分页总数
var showPageNum = 6;//显示多少个页码
var pagehtml = "";
var divId = "" + obj.attr('id');
//计算分页总数
if (dataCount % pagesize == 0) {
pageNum = parseInt(dataCount / pagesize);
} else {
pageNum = parseInt(dataCount / pagesize) + 1;
}
console.log('dataCount:' + dataCount + '<>pageSize:' + pagesize + '<>currentPage:' + currentpage);
console.log('pageNum:' + pageNum + '<>showPageNum:' + showPageNum + '<>divId:' + divId);
//只有一页内容
if (pageNum <= 1) {
pagehtml = "";
}
//大于一页内容
if (pageNum > 1) {
if (currentpage > 1) {
pagehtml += '<li><a href="javascript:void(0);" onclick="switchPage(\'' + divId + '\',' + (currentpage - 1) + ')">上一页</a></li>';
}
var startPage = 1;
//计算页码开始位置
if (showPageNum > pageNum) {//如果要显示的页码大于总的页码数
console.log('showPageNum > pageNum');
startPage = 1
} else {//如果要显示的页码小于总的页码数
if (currentpage - (showPageNum / 2) <= 0) {//如果当前页面
startPage = 1;
console.log('currentpage - (showPageNum / 2) < 0');
} else if (currentpage + (showPageNum / 2) >= pageNum) {
startPage = pageNum - showPageNum;
console.log('currentpage + (showPageNum / 2) > pageNum');
} else {
startPage = currentpage - (showPageNum / 2);
}
}
startPage = parseInt(startPage);
console.log('startPage:' + startPage);
for (var i = startPage; i < (startPage + showPageNum); i++) {
//如果要输出的页面大于总的页面数,则退出
if (i > pageNum) {
break;
}
if (i == currentpage) {
pagehtml += '<li class="active"><a href="javascript:void(0);" onclick="switchPage(\'' + divId + '\',' + i + ')">' + i + '</a></li>';
} else {
pagehtml += '<li><a href="javascript:void(0);" onclick="switchPage(\'' + divId + '\',' + i + ')">' + i + '</a></li>';
}
}
if (currentpage < pageNum) {
pagehtml += '<li><a href="javascript:void(0);" onclick="switchPage(\'' + divId + '\',' + (currentpage + 1) + ')">下一页</a></li>';
}
}
obj.html(pagehtml);
}
script type="text/javascript"
src="/js/PagingManage.js"></script>
* 对页面进行分页
* @param obj 页码标签对象
* @param pageCount number 总页面数
* @param pageSize number 分页大小
* @param currentPage number 当前页
*/
function PagingManage(obj, pageCount, pageSize, currentPage) {
if (obj) {
var dataCount = pageCount; //数据总数
var pagesize = pageSize;//单页数量
var currentpage = currentPage;//当前页面
var pageNum;//分页总数
var showPageNum = 6;//显示多少个页码
var pagehtml = "";
var divId = "" + obj.attr('id');
//计算分页总数
if (dataCount % pagesize == 0) {
pageNum = parseInt(dataCount / pagesize);
} else {
pageNum = parseInt(dataCount / pagesize) + 1;
}
console.log('dataCount:' + dataCount + '<>pageSize:' + pagesize + '<>currentPage:' + currentpage);
console.log('pageNum:' + pageNum + '<>showPageNum:' + showPageNum + '<>divId:' + divId);
//只有一页内容
if (pageNum <= 1) {
pagehtml = "";
}
//大于一页内容
if (pageNum > 1) {
if (currentpage > 1) {
pagehtml += '<li><a href="javascript:void(0);" onclick="switchPage(\'' + divId + '\',' + (currentpage - 1) + ')">上一页</a></li>';
}
var startPage = 1;
//计算页码开始位置
if (showPageNum > pageNum) {//如果要显示的页码大于总的页码数
console.log('showPageNum > pageNum');
startPage = 1
} else {//如果要显示的页码小于总的页码数
if (currentpage - (showPageNum / 2) <= 0) {//如果当前页面
startPage = 1;
console.log('currentpage - (showPageNum / 2) < 0');
} else if (currentpage + (showPageNum / 2) >= pageNum) {
startPage = pageNum - showPageNum;
console.log('currentpage + (showPageNum / 2) > pageNum');
} else {
startPage = currentpage - (showPageNum / 2);
}
}
startPage = parseInt(startPage);
console.log('startPage:' + startPage);
for (var i = startPage; i < (startPage + showPageNum); i++) {
//如果要输出的页面大于总的页面数,则退出
if (i > pageNum) {
break;
}
if (i == currentpage) {
pagehtml += '<li class="active"><a href="javascript:void(0);" onclick="switchPage(\'' + divId + '\',' + i + ')">' + i + '</a></li>';
} else {
pagehtml += '<li><a href="javascript:void(0);" onclick="switchPage(\'' + divId + '\',' + i + ')">' + i + '</a></li>';
}
}
if (currentpage < pageNum) {
pagehtml += '<li><a href="javascript:void(0);" onclick="switchPage(\'' + divId + '\',' + (currentpage + 1) + ')">下一页</a></li>';
}
}
obj.html(pagehtml);
}
在Html中导入js文件
script type="text/javascript"
src="/js/PagingManage.js"></script>
设定分页放置的位置
<div id="complete" class="pagination"></div> 在页面尾部js代码块中执行,该方法执行结束即可生成分页示例图,点击试试看
<script type="text/javascript">
$(function () { PagingManage($('#complete'),100, 10, 1); });
/** * 响应动态生成的分页按钮的的点击事件 * @param divId * @param page */ function switchPage(divId, page) {
alert('to do...');}
</script>
相关文章推荐
- 关于HTML静态页面(含自动分页)生成的可行性方案
- asp.net2.0自动根据用户自定义字数生成带分页的静态(HTML)页
- 关于HTML静态页面(含自动分页)生成的可行性方案
- asp.net2.0自动根据用户自定义字数生成带分页的静态(HTML)页 v1.5 beta
- asp.net2.0自动根据用户自定义字数生成带分页的静态(HTML)页
- yii中自动生成curd,怎样控制分页条数
- asp.net2.0自动根据用户自定义字数生成带分页的静态(HTML)页
- ASP.NET 中如何对生成的 HTML 内容流进行控制?
- 1.15 程序控制自动根据xml生成新表
- 打印HTML页面时的分页控制
- JS自动生成动态HTML验证码页面
- 自动生成sqlloader的控制文件
- asp分页生成html的程序脚本代码
- java web应用中自动生成文章html页面的实现
- OPhone/Android的学习(2)—从分析Eclipse自动生成的代码到以XML控制UI
- 自动生成HTML页面的功能
- 循序渐进Python3(十三) --2-- django之form表单(自动生成html标签和自定制提示信息)
- C#版生成HTML分页标签
- 在数据绑定 DataGridView 控件时控制是否自动生成列
- 生成列表页分页的HTML静态页