<!DOCTYPE html>
<html>
<head>
<title>分页</title>
<link rel="stylesheet" type="text/css" href="./css/page.css"></style>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/index.js"></script>
</head>
<body>
<div class="">
<div class="container" id="container" style="min-width:400px;min-height: 600px;">
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
// 创建一个分页的实例对象，利用对象中的方法进行分页
var pageone = new PageInit(\'qA\',\'../test3.json\');
var pageInit = pageone.createPage();
$(\'#container\').html(pageInit);
pageone.init(\'../test3.json\');
pageone.operator();
})
</script>
</body>
</html>
index.js文件内容
// 本例仅仅实现了页面跳转向后台传递数据，后台根据具体参数返回数据我们显示在页面上
function PageInit(className,url){
var publicVar={} ;
var tempClassName = className;
var tempUrl = url;
var totalItem;
publicVar.init = function(tempUrl){
var parInit = {
\'page\':1,
\'pagesize\':10
}
this.reloadReplies(parInit);
}
publicVar.createPage = function(){
var html = `
<div class=${tempClassName}>
<div class="data-area"></div>
<div class="center">
<table class="pageinitial" >
<tr>
<td>
<select name="pageItemNum" class ="rows" >
<option value="10">10</option>
<option value="15">15</option>
<option value="25">25</option>
<option value="50">50</option>
</select>
</td>
<td class="division"> | </td>
<td>
<a href="javascript:void(0)" class="page-first">
</a>
</td>
<td>
<a href="javascript:void(0)" class="page-prev">
</a>
</td>
<td class="division"> | </td>
<td>
page <input class="page" value="1" style="width:30px;display:inline-block;text-align:center" readonly/>
</td>
<td>
of <span class="page-total"></span>
</td>
<td class="division"> | </td>
<td>
<a class="page-next" href="javascript:void(0)">
</a>
</td>
<td>
<a href="javascript:void(0)" class="page-last">
</a>
</td>
</tr>
</table>
</div>
</div>`
return html;
};
// 绑定标签的点击函数
publicVar.operator = function(tempUrl){
var _self = this;
$(\'.\'+tempClassName+\' .page-first\').click(function(e){
e.preventDefault();
pageParams = _self.curPage(tempClassName);
if(pageParams.page==maxPage){
$(\'.\'+tempClassName+\' .page-next\').removeClass(\'page-disable\');
$(\'.\'+tempClassName+\' .page-last\').removeClass(\'page-disable\');
_self.aAbled(\'.\'+tempClassName+\' .page-next\');
_self.aAbled(\'.\'+tempClassName+\' .page-last\');
}
if(pageParams.page>1) {
pageParams.page = 1;
$(\'.\'+tempClassName+\' .page\').val(pageParams.page);
$(\'.\'+tempClassName+\' .page-total\').html(maxPage);
$(\'.\'+tempClassName+\' .page-prev\').addClass(\'page-disable\');
$(\'.\'+tempClassName+\' .page-first\').addClass(\'page-disable\');
_self.aDisabled(\'.\'+tempClassName+\' .page-prev\');
_self.aDisabled(\'.\'+tempClassName+\' .page-first\');
_self.pagefresh(pageParams,tempUrl);
}
});
$(\'.\'+tempClassName+\' .page-prev\').click(function(e){
e.preventDefault();
pageParams = _self.curPage(tempClassName);
maxPage = Math.ceil(totalItem/pageParams.pagesize);
if(pageParams.page==maxPage){
$(\'.\'+tempClassName+\' .page-next\').removeClass(\'page-disable\');
$(\'.\'+tempClassName+\' .page-last\').removeClass(\'page-disable\');
_self.aAbled(\'.\'+tempClassName+\' .page-next\');
_self.aAbled(\'.\'+tempClassName+\' .page-last\');
}
if(pageParams.page>1){
pageParams.page = pageParams.page-1;
if(pageParams.page==1){
$(\'.\'+tempClassName+\' .page-prev\').addClass(\'page-disable\');
$(\'.\'+tempClassName+\' .page-first\').addClass(\'page-disable\');
_self.aDisabled(\'.\'+tempClassName+\' .page-prev\');
_self.aDisabled(\'.\'+tempClassName+\' .page-first\');
}
$(\'.\'+tempClassName+\' .page\').val(pageParams.page);
$(\'.\'+tempClassName+\' .page-total\').html(maxPage);
_self.pagefresh(pageParams,tempUrl);
}
});
$(\'.\'+tempClassName+\' .page-next\').click(function(e){
e.preventDefault();
pageParams = _self.curPage(tempClassName);
maxPage = Math.ceil(totalItem/pageParams.pagesize);
if(pageParams.page==1){
$(\'.\'+tempClassName+\' .page-prev\').removeClass(\'page-disable\');
$(\'.\'+tempClassName+\' .page-first\').removeClass(\'page-disable\');
_self.aAbled(\'.\'+tempClassName+\' .page-prev\');
_self.aAbled(\'.\'+tempClassName+\' .page-first\');
}
if(pageParams.page<maxPage){
pageParams.page = pageParams.page-1+2;
if(pageParams.page==maxPage){
$(\'.\'+tempClassName+\' .page-next\').addClass(\'page-disable\');
$(\'.\'+tempClassName+\' .page-last\').addClass(\'page-disable\');
_self.aDisabled(\'.\'+tempClassName+\' .page-next\');
_self.aDisabled(\'.\'+tempClassName+\' .page-last\');
}
$(\'.\'+tempClassName+\' .page\').val(pageParams.page);
$(\'.\'+tempClassName+\' .page-total\').html(maxPage);
_self.pagefresh(pageParams,tempUrl);
}
});
$(\'.\'+tempClassName+\' .page-last\').click(function(e){
e.preventDefault();
pageParams = _self.curPage(tempClassName);
maxPage = Math.ceil(totalItem/pageParams.pagesize);
if(pageParams.page==1){
$(\'.\'+tempClassName+\' .page-prev\').removeClass(\'page-disable\');
$(\'.\'+tempClassName+\' .page-first\').removeClass(\'page-disable\');
_self.aAbled(\'.\'+tempClassName+\' .page-prev\');
_self.aAbled(\'.\'+tempClassName+\' .page-first\');
}
if(pageParams.page<maxPage){
maxPage = Math.ceil(totalItem/pageParams.pagesize);
pageParams.page = maxPage;
$(\'.\'+tempClassName+\' .page\').val(maxPage);
$(\'.\'+tempClassName+\' .page-total\').html(maxPage);
$(\'.\'+tempClassName+\' .page-next\').addClass(\'page-disable\');
$(\'.\'+tempClassName+\' .page-last\').addClass(\'page-disable\');
_self.aDisabled(\'.\'+tempClassName+\' .page-next\');
_self.aDisabled(\'.\'+tempClassName+\' .page-last\');
_self.pagefresh(pageParams,tempUrl);
}
});
$(\'.\'+tempClassName+\' .rows\').change(function(e){
pageParams = _self.curPage(tempClassName);
maxPage = Math.ceil(totalItem/pageParams.pagesize);
$(\'.\'+tempClassName+\' .page-total\').html(maxPage);
$(\'.\'+tempClassName+\' .page\').val(\'1\');
pageParams.page = $(\'.\'+tempClassName+\' .page\').val();
$(\'.\'+tempClassName+\' .page-prev\').addClass(\'page-disable\');
$(\'.\'+tempClassName+\' .page-first\').addClass(\'page-disable\');
_self.aDisabled(\'.\'+tempClassName+\' .page-prev\');
_self.aDisabled(\'.\'+tempClassName+\' .page-first\');
if(maxPage==1){
$(\'.\'+tempClassName+\' .page-next\').addClass(\'page-disable\');
$(\'.\'+tempClassName+\' .page-last\').addClass(\'page-disable\');
_self.aDisabled(\'.\'+tempClassName+\' .page-next\');
_self.aDisabled(\'.\'+tempClassName+\' .page-last\');
}else{
$(\'.\'+tempClassName+\' .page-next\').removeClass(\'page-disable\');
$(\'.\'+tempClassName+\' .page-last\').removeClass(\'page-disable\');
_self.aAbled(\'.\'+tempClassName+\' .page-next\');
_self.aAbled(\'.\'+tempClassName+\' .page-last\');
}
_self.pagefresh(pageParams,tempUrl);
});
};
// 设置标签是否可以进行点击
publicVar.aDisabled = function(tempClassName) {
$(tempClassName).attr(\'disabled\', true);
$(tempClassName).css(\'pointer-events\', \'none\');
};
publicVar.aAbled = function(tempClassName) {
$(tempClassName).attr(\'disabled\', false);
$(tempClassName).css(\'pointer-events\', \'auto\');
};
// 获取当前页面信息页码页数和itemID
publicVar.curPage = function (tempClassName){
var rtn ={};
rtn.pagesize = $(\'.\'+tempClassName+\' .rows\').val();
rtn.page = $(\'.\'+tempClassName+\' .page\').val();
return rtn;
};
// 得到参数后刷新，可以根据不同的tempClassName来局部刷新不同的列表
publicVar.pagefresh = function (params,tempUrl){
this.reloadReplies(params,tempUrl);
};
publicVar.reloadReplies = function(pars){
_self = this;
var htmlItem =\'\';
var lenItem = \'\';
$.ajax({
url:tempUrl,
params:pars,
async: false,
success:function(data){
totalItem = data.total;
if(totalItem==0){
maxPageItem = 1;
}else{
maxPageItem = Math.ceil(totalItem/pars.pagesize);
}
if(pars.page==1){
$(\'.\'+tempClassName+\' .page-prev\').addClass(\'page-disable\');
$(\'.\'+tempClassName+\' .page-first\').addClass(\'page-disable\');
_self.aDisabled(\'.\'+tempClassName+\' .page-prev\');
_self.aDisabled(\'.\'+tempClassName+\' .page-first\');
}
if(pars.page==maxPageItem){
$(\'.\'+tempClassName+\' .page-next\').addClass(\'page-disable\');
$(\'.\'+tempClassName+\' .page-last\').addClass(\'page-disable\');
_self.aDisabled(\'.\'+tempClassName+\' .page-next\');
_self.aDisabled(\'.\'+tempClassName+\' .page-last\');
}else{
$(\'.\'+tempClassName+\' .page-next\').removeClass(\'page-disable\');
$(\'.\'+tempClassName+\' .page-last\').removeClass(\'page-disable\');
_self.aAbled(\'.\'+tempClassName+\' .page-next\');
_self.aAbled(\'.\'+tempClassName+\' .page-last\');
}
$(\'.\'+tempClassName+\' .page-total\').html(maxPageItem);
$(\'.\'+tempClassName+\' .page\').val(pars.page);
lenItem = data.List.length;
if(lenItem>0){
// data.rows.postReplys = convertTime(data.rows.postReplys);
htmlItem = _self.fn(data.List);
}
$(\'.\'+tempClassName+\' .data-area\').html(htmlItem);
}
});
};
// publicVar.createListItem = function(){
// }
publicVar.fn = function(item){
var html=\'\';
for(var i=0;i<item.length;i++){
html+= \'\
<div class="reply-item">\
<div class="user-portrait">\
<div class="portrait"><img src=\'+item[i].headIcon+\'></div>\
</div>\
<div class="reply-detail">\
<div class="reply-user">\'+item[i].Name+\'</div>\
<div class="reply-content">\'+item[i].reply_content+\'</div>\
<div class="reply-last">\
<div class="reply-time">\'+item[i].reply_time+\'</div>\
<div class="reply-delete"><div style="color: #0011ff;width:50px;cursor:pointer" onclick="openDeleteReplyDialog()">delete</div></div>\
</div>\
</div>\
</div>\
\'
}
return html;
}
return publicVar;
}
