jQuery自定义分页
Html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery自定义分页</title> <link type="text/css" href="css/page.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery.min.js"></script> </head> <body> <div class="page" id="Page"></div> <script type="text/javascript" src="js/page.js"></script> <script type="text/javascript"> P.initMathod({ params: { elemId: '#Page', total: '100', pageSize: '10' }, requestFunction: function() { // P.config.total = parseInt(Math.random() * 10 + 85);//此处模拟总记录变化 //TODO ajax异步请求过程,异步获取到的数据总条数赋值给 P.config.total //列表渲染自行处理 console.log(JSON.stringify(P.config)); } }); </script> </body> </html>
Js:
/** * 自定义分页(封装实现) * @type {Page} */ P = new Page(); //分页对象 function Page(){ this.config = {elemId:'#page',pageIndex:'1',total:'0',pageNum:'7',pageSize:'10'};//默认参数 this.version = '1.0';//分页版本 this.requestFunction = null;//分页版本 //初始化参数 this.initMathod = function(obj){ $.extend(this.config,obj.params);//默认参数 + 用户自定义参数 this.requestFunction = obj.requestFunction; this.renderPage(); }; //渲染分页 this.renderPage = function(){ this.requestFunction(); this.pageHtml(); //分页绑定事件 $(P.config.elemId).on('click','a',function(){ var flag = $(this).parent().hasClass('disabled'); if(flag){ return false; } var pageIndex = $(this).data('pageindex'); P.config.pageIndex = pageIndex; P.requestFunction(); P.pageHtml(); }); }; //分页合成 this.pageHtml = function(){ var data = this.config; if(parseInt(data.total) <= 0){ return false; } var elemId = data.elemId; var pageNum = isBlank(data.pageNum) ? 7 : parseInt(data.pageNum);//可显示页码个数 var pageSize = isBlank(data.pageSize) ? 10 : parseInt(data.pageSize);//可显示页码个数 var total = parseInt(data.total);//总记录数 var pageTotal = total%pageSize != 0 ? parseInt(total/pageSize) + 1 : parseInt(total/pageSize);//总页数 var pageIndex = pageTotal < parseInt(data.pageIndex) ? pageTotal : parseInt(data.pageIndex);//当前页 var j = pageTotal < pageNum ? pageTotal : pageNum;//如果总页数小于可见页码,则显示页码为总页数 var k = pageIndex < parseInt((j/2) + 1) ? -1 * (pageIndex - 1) : pageIndex > (pageTotal - parseInt(j/2)) ? -1 * (j - (pageTotal - pageIndex) - 1) : -1 * parseInt((j/2));//遍历初始值 var pageHtml = ''; if(pageIndex <= 0 || pageIndex == 1){ pageHtml += '首页' + '上一页'; }else{ pageHtml += '首页' + '上一页'; } for(var i = k;i < (k + j);i++){ if(pageTotal == (pageIndex + i - 1))break; if(i == 0){ pageHtml += ''+ pageIndex +''; }else{ pageHtml += ''+ (pageIndex + i) +''; } } if(pageTotal == 1 || pageTotal <= pageIndex){ pageHtml += '下一页' + '末页'; }else{ pageHtml += '下一页' + '末页'; } pageHtml += '' $(elemId).html(''); $(elemId).html(pageHtml); }; } function isBlank(str){ if(str == undefined || str == null || str.trim() == ''){ return true; } return false; }
Css:
#Page { margin: 0px auto 30px; width: 430px; } #Page ul { padding: 0; min-width: 450px; } #Page ul::after { content: ''; display: block; clear: both; } #Page ul li { float: left; width: auto; min-width: 32px; height: 30px; line-height: 30px; list-style: none; } #Page a { color: #aaa; font-family: "微软雅黑"; padding: 0 10px; text-decoration: none; display: block; text-align: center; border: 1px solid #ccc; border-left: none; } #Page ul li:first-child a { border-left: 1px solid #ccc; } #Page ul li a:hover { background-color: #9f1f1c; } #Page ul li a:hover { color: white; } #Page .disabled a:hover { background-color: white; cursor: not-allowed; color: #aaa; } #Page .active a { background-color: #9f1f1c; color: white; }