bootstrap 分页实践

最新推荐文章于 2022-06-07 16:30:41 发布

jimmyBay

最新推荐文章于 2022-06-07 16:30:41 发布

阅读量817

点赞数 1

分类专栏： JavaWeb的学习总结

本文链接：https://blog.csdn.net/shiyiqijialimin/article/details/53056530

版权

本文分享了作者在实现自定义Bootstrap分页过程中的经验，包括遇到的页签控制算法等逻辑问题，通过学习他人代码并进行实践，提供了一次深入理解分页原理的机会。

摘要由CSDN通过智能技术生成

平时自己做的都是表格的分页，通过简单的属性配置，分页也就出来了，这次呢，需要自己去写分页，才发现，分页还是有很多逻辑要想明白的，比如说页签的控制算法等，今天看了别人的代码，自己也小尝试了一把，在此分享给大家。

<div id="dPage" style="margin-top: 680px;">
				<ul id="d_Page" class="pagination"
					style="right: 0; position: absolute;padding-right:50px;">
				</ul>
			</div>
			<div id="dUnPage" style="display: none;" class="lb_fy_right_msg">
				<span>当前页无数据</span>
			</div>

var dCurrentPage = 1;//当前页数
var dPageSize = 12;//每页显示8条数据
var dTotalCount = 0;//总共条数
var dTotalPage = 0;//总共页数
var dcurgroup=0;

var dTableData = [];

var totalCount; //总记录数
var startPage; // 每页开始的记录条数
var endPage; // 每页结束的记录条数
var pn = 1; //页码
var m;
var pageLiSize = 5; //页码数长度
var pageSize = 1; //每页记录条数
var groupLength; //组数
var pageTotal = 0;
var pageurl;
var pagedata = [];


$(function() {
	initDatecontrol();
	initContent(type,"","","","");
	})
	
function initDatecontrol(){
	$("#startyear").datetimepicker({
		format: 'yyyy',
		weekStart: 1,
		autoclose: true,
		startView: 4,
		minView: 4,
		forceParse: false,
		language: 'zh-CN'
	});
	$("#endyear").datetimepicker({
		format: 'yyyy',
		weekStart: 1,
		autoclose: true,
		startView: 4,
		minView: 4,
		forceParse: false,
		language: 'zh-CN'
	});
}
	
	
/**
 * 初始化内容
 */ 
function initContent(type,startyear,endyear,ddescription,dname) {

	$.ajax({
		type: "POST",
		async:false,
	     data: {
			type: type,
			startyear:startyear,
			endyear:endyear,
			dname:dname,
			keyword:ddescription
		},
		dataType: 'JSON',
		url: rootpath + "/atservice/atdocument/selectByType",
		success: function(json) {
			debugger;
			var records = json.data;
			//计算总页
			dTableData =records;
			dPage();
//			var html="";
//			for(var i in records){
//				var ar = rootpath + '/plugins/documents' + records[i].thfiletype;
//				if(records[i].thfiletype == "" || records[i].thfiletype == null ){
//					ar=rootpath + "/img/cnbg.png";
//				}			
//				html +='<div id='+i+' class="picture"  οnmοuseοver="showDetailinfo(\''+records[i].dname+'\',\''+records[i].dpath+'\',\''+records[i].ddescription+'\',\''+records[i].dyear+'\',\''+i+'\')" οnmοuseleave="displayinfo(\''+i+'\')"> '
//					 +'<img src='+ar+'> '
//					 +'<br>'+records[i].dname +''
//					 +'<div class="mengban" id="mengban'+i+'" style="display:none;">'
//					 +'<div class="content">'
//					 +'<span style="width: 50%; position: absolute; top: 0px; left: 0px;">名称：</span>'
//					 +'<span id="dname'+i+'" style="position: absolute; top: 0px; width: 70%; left: 50px;"></span>'
//					 +'</div>'
//					 +'<div class&