1.paging.js
function Paging(paramsObj, callback) {
this.pageSize = paramsObj.pageSize || 10; //每页条数(不设置时,默认为10
this.pageIndex = paramsObj.pageIndex || 1; //当前页码
this.totalCount = paramsObj.totalCount || 0; //总记录数
this.totalPage = Math.ceil(paramsObj.totalCount / paramsObj.pageSize) || 0; //总页数
this.prevPage = paramsObj.prevPage || '<'; //上一页(不设置时,默认为:<)
this.nextPage = paramsObj.nextPage || '>'; //下一页(不设置时,默认为:>)
this.firstPage = paramsObj.firstPage || '<<'; //首页(不设置时,默认为:<<)
this.lastPage = paramsObj.lastPage || '>>'; //末页(不设置时,默认为:>>)
this.degeCount = paramsObj.degeCount || 3; //当前页前后两边可显示的页码个数(不设置时,默认为3)
this.ellipsis = paramsObj.ellipsis; //是否显示省略号不可点击按钮(true:显示,false:不显示)
this.ellipsisBtn = (paramsObj.ellipsis == true || paramsObj.ellipsis == null) ? '<li><span class="ellipsis">…</span></li>' : '';
var that = this;
$('#page_size').val(this.pageSize);
callback && callback(this.pageIndex, this.pageSize); //立即执行回调函数
// 生成分页DOM结构
this.initPage = function (totalCount, totalPage, pageIndex) {
this.totalCount = totalCount;
this.totalPage = totalPage;
this.pageIndex = pageIndex;
var degeCount = this.degeCount;
var pageHtml = ''; //总的DOM结构
var tmpHtmlPrev = ''; //省略号按钮前面的DOM
var tmpHtmlNext = ''; //省略号按钮后面的DOM
var headHtml = ''; //首页和上一页按钮的DOM
var endHtml = ''; //末页和下一页按钮的DOM
if(pageIndex - degeCount >= degeCount-1 && totalPage - pageIndex >= degeCount+1){ //前后都需要省略号按钮
headHtml = '<li><a id="first_page" href="javascript:;">'+this.firstPage+'</a></li>'+
'<li><a id="prev_page" href="javascript:;">'+this.prevPage+'</a></li>';
endHtml = '<li><a id="next_page" href="javascript:;">'+this.nextPage+'</a></li>'+
'<li><a id="last_page" href="javascript:;">'+this.lastPage+'</a></li>';
var count = degeCount; //前后各自需要显示的页码个数
for(var i=0; i<count; i++){
if(pageIndex != 1){
tmpHtmlPrev += '<li><a href="javascript:;" class="page-number">'+(pageIndex-(count-i))+'</a></li>';
}
tmpHtmlNext += '<li><a href="javascript:;" class="page-number">'+((pageIndex-0)+i+1)+'</a></li>';
}
pageHtml = headHtml +
this.ellipsisBtn +
tmpHtmlPrev +
'<li><a href="javascript:;" class="active">'+pageIndex+'</a></li>'+
tmpHtmlNext +
this.ellipsisBtn +
endHtml;
}else if(pageIndex - degeCount >= degeCount-1 && totalPage - pageIndex < degeCount+1) { //前面需要省略号按钮,后面不需要
headHtml = '<li><a id="first_page" href="javascript:;">'+this.firstPage+'</a></li>'+
'<li><a id="prev_page" href="javascript:;">'+this.prevPage+'</a></li>';
if(pageIndex == totalPage){ //如果当前页就是最后一页
endHtml = '<li><span id="next_page" href="javascript:;">'+this.nextPage+'</span></li>'+
'<li><span id="last_page" href="javascript:;">'+this.lastPage+'</span></li>';
}else{ //当前页不是最后一页
endHtml = '<li><a id="next_page" href="javascript:;">'+this.nextPage+'</a></li>'+
'<li><a id="last_page" href="javascript:;">'+this.lastPage+'</a></li>';
}
var count = degeCount; //前需要显示的页码个数
var countNext = totalPage - pageIndex; //后需要显示的页码个数
if(pageIndex != 1){
for(var i=0; i<count; i++){
tmpHtmlPrev += '<li><a href="javascript:;" class="page-number">'+(pageIndex-(count-i))+'</a></li>';
}
}
for(var i=0; i<countNext; i++){
tmpHtmlNext += '<li><a href="javascript:;" class="page-number">'+((pageIndex-0)+i+1)+'</a></li>';
}
pageHtml = headHtml +
this.ellipsisBtn +
tmpHtmlPrev +
'<li><a href="javascript:;" class="active">'+pageIndex+'</a></li>'+
tmpHtmlNext +
endHtml;
}else if(pageIndex - degeCount < degeCount-1 && totalPage - pageIndex >= degeCount+1){ //前面不需要,后面需要省略号按钮
if(pageIndex == 1){ //如果当前页就是第一页
headHtml = '<li><span id="first_page" href="javascript:;">'+this.firstPage+'</span></li>'+
'<li><span id="prev_page" href="javascript:;">'+this.prevPage+'</span></li>';
}else{ //当前页不是第一页
headHtml = '<li><a id="first_page" href="javascript:;">'+this.firstPage+'</a></li>'+
'<li><a id="prev_page" href="javascript:;">'+this.prevPage+'</a></li>';
}
endHtml = '<li><a id="next_page" href="javascript:;">'+this.nextPage+'</a></li>'+
'<li><a id="last_page" href="javascript:;">'+this.lastPage+'</a></li>';
var countPrev = pageIndex - 1; //前需要显示的页码个数
var count = degeCount; //后需要显示的页码个数
if(pageIndex != 1){
for(var i=0; i<countPrev; i++){
tmpHtmlPrev += '<li><a href="javascript:;" class="page-number">'+(pageIndex-(countPrev-i))+'</a></li>';
}
}
for(var i=0; i<count; i++){
tmpHtmlNext += '<li><a href="javascript:;" class="page-number">'+((pageIndex-0)+i+1)+'</a></li>';
}
pageHtml = headHtml +
tmpHtmlPrev +
'<li><a href="javascript:;" class="active">'+pageIndex+'</a></li>'+
tmpHtmlNext +
this.ellipsisBtn +
endHtml;
}else if(pageIndex - degeCount < degeCount-1 && totalPage - pageIndex < degeCount+1){ //前后都不需要省略号按钮
headHtml = '<li><a id="first_page" href="javascript:;">'+this.firstPage+'</a></li>'+
'<li><a id="prev_page" href="javascript:;">'+this.prevPage+'</a></li>';
endHtml = '<li><a id="next_page" href="javascript:;">'+this.nextPage+'</a></li>'+
'<li><a id="last_page" href="javascript:;">'+this.lastPage+'</a></li>';
if(totalPage == 1){ //如果总页数就为1
headHtml = '<li><span id="first_page" href="javascript:;">'+this.firstPage+'</span></li>'+
'<li><span id="prev_page" href="javascript:;">'+this.prevPage+'</span></li>';
endHtml = '<li><span id="next_page" href="javascript:;">'+this.nextPage+'</span></li>'+
'<li><span id="last_page" href="javascript:;">'+this.lastPage+'</span></li>';
}else{
if(pageIndex == 1){ //如果当前页就是第一页
headHtml = '<li><span id="first_page" href="javascript:;">'+this.firstPage+'</span></li>'+
'<li><span id="prev_page" href="javascript:;">'+this.prevPage+'</span></li>';
endHtml = '<li><a id="next_page" href="javascript:;">'+this.nextPage+'</a></li>'+
'<li><a id="last_page" href="javascript:;">'+this.lastPage+'</a></li>';
}else if(pageIndex == totalPage){ //如果当前页是最后一页
headHtml = '<li><a id="first_page" href="javascript:;">'+this.firstPage+'</a></li>'+
'<li><a id="prev_page" href="javascript:;">'+this.prevPage+'</a></li>';
endHtml = '<li><span id="next_page" href="javascript:;">'+this.nextPage+'</span></li>'+
'<li><span id="last_page" href="javascript:;">'+this.lastPage+'</span></li>';
}
}
var countPrev = pageIndex - 1; //前需要显示的页码个数
var countNext = totalPage - pageIndex; //后需要显示的页码个数
if(pageIndex != 1){
for(var i=0; i<countPrev; i++){
tmpHtmlPrev += '<li><a href="javascript:;" class="page-number">'+(pageIndex-(countPrev-i))+'</a></li>';
}
}
for(var i=0; i<countNext; i++){
tmpHtmlNext += '<li><a href="javascript:;" class="page-number">'+((pageIndex-0)+i+1)+'</a></li>';
}
pageHtml = headHtml +
tmpHtmlPrev +
'<li><a href="javascript:;" class="active">'+pageIndex+'</a></li>'+
tmpHtmlNext +
endHtml;
}
$('#page_ul').html(pageHtml);
$('#total_count').html(totalCount);
};
// 点击页码(首页、上一页、下一页、末页、数字页)
$('#page_ul').on('click','a',function (e) {
var _this = $(this);
var idAttr = _this.attr('id');
var className = _this.attr('class');
if(idAttr == 'first_page'){ //如果是点击的首页
that.pageIndex = 1;
}else if(idAttr == 'prev_page'){ //如果点击的是上一页
that.pageIndex = that.pageIndex == 1 ? that.pageIndex : that.pageIndex - 1 ;
}else if(idAttr == 'next_page'){ //如果点击的是下一页
that.pageIndex = that.pageIndex == that.totalPage ? that.pageIndex : parseInt(that.pageIndex) + 1;
}else if(idAttr == 'last_page'){ //如果点击的是末页
that.pageIndex = that.totalPage;
}else if(className == 'page-number'){ //如果点击的是数字页码
that.pageIndex = _this.html();
}
callback && callback(that.pageIndex, that.pageSize);
});
// 改变每页条数
$('#page_size').change(function () {
var _this = $(this);
that.pageIndex = paramsObj.pageIndex = 1;
that.pageSize = paramsObj.pageSize = _this.val() - 0;
callback && callback(that.pageIndex, that.pageSize);
})
}
2.paging.css
.page {font-size: 14px;background-color: transparent;width: 100%;height: 50px;line-height: 50px;display: none;}
.page .page-l select {width: 60px;height: 30px;}
.page .page-l .page-size-box {display: inline-block;margin-left: 20px;}
.page .page-r {float: right;padding-top: 10px;}
.page .page-r ul {float: left;list-style: none;margin: 0;height: 30px;box-sizing: border-box;padding: 0;}
.page .page-r ul li {float: left;list-style: none;height: 100%;line-height: 30px;border: 1px solid #ccc;border-right: 0 none;box-sizing: border-box;}
.page .page-r ul li a:hover {background-color: #f5f2f2;}
.page .page-r ul li:last-child {border-right: 1px solid #ccc;}
.page .page-r ul li a {text-decoration: none;display: block;height: 100%;padding:0 10px; color: #777;}
.page .page-r ul li a.active {background-color: #09aeb0;color: #fff;}
.page .page-r ul li span {display: block;height: 100%;padding:0 10px;color: #ccc;cursor: not-allowed;}
.page .page-r ul li span.ellipsis {cursor: default;}
3.页面html标签
<table class="table table-striped" style=" border-collapse: collapse; border: 1px solid black;">
<thead>
<tr id="firstTR">
<th id="firstTD">发送单编号</th>
<th>发送单名称</th>
<th>所属型号</th>
<th>任务状态</th>
<th>到达时间</th>
<th>数据包名称</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tbody">
<%
for(int i=0;i<5;i++){
out.print("<tr>");
out.print("<td>1</td>");
out.print("<td>2</td>");
out.print("<td>3</td>");
out.print("<td>4</td>");
out.print("<td>5</td>");
out.print("<td><a href='www.baidu.com'>数据包</a></td>");
if(i==0){
out.print("<td><button onclick='pass()'>通过</button><button onclick='noPass()'>驳回</button></td>");
}else{
out.print("<td></td>");
}
out.print("</tr>");
}
%>
</tbody>
</table>
<!-- 分页结构 -->
<div class="page">
<div class="page-l" id="page_l" style="float: left;">
<span>总共 <span id="total_count"></span> 条</span>
<div class="page-size-box">
<span>每页显示</span>
<select id="page_size">
<option value="10">10</option>
<option value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
</select>条
</div>
</div>
<div class="page-r">
<ul id="page_ul" class="page-ul"></ul>
</div>
</div>
<!-- 分页结构end -->
4.页面创建js对象,以及调用
<script>
//分页参数(参数名固定不可变)
var pageConfig = {
pageSize: 10, //每页条数(不设置时,默认为10)
prevPage: '上页', //上一页(不设置时,默认为:<)
nextPage: '下页', //下一页(不设置时,默认为:>)
firstPage: '首页', //首页(不设置时,默认为:<<)
lastPage: '末页', //末页(不设置时,默认为:>>)
degeCount: 2, //当前页前后两边可显示的页码个数(不设置时,默认为3)
ellipsis: true //是否显示省略号按钮(不可点击)(true:显示,false:不显示,不设置时,默认为显示)
}
//兼容低浏览器没有forEach方法
if (typeof Array.prototype.forEach != 'function') {
Array.prototype.forEach = function (callback) {
for (var i = 0; i < this.length; i++) {
callback.apply(this, [this[i], i, this]);
}
};
}
//ajax请求方法
function createXMLHTTP() {
var arrSignatures = [ "MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ];
for(var i = 0; i < arrSignatures.length; i++){
try{
var oRequest = new ActiveXObject(arrSignatures[i]);
} catch (oError) {
oRequest = false;
}
if (!oRequest && typeof XMLHttpRequest != 'undefined') {
oRequest = new XMLHttpRequest();
}
return oRequest;
}
throw new Error("MSXML is not installed on your system");
}
window.onload=function(){
init();
}
//初始化数据
function init(){
var pageIng = new Paging(pageConfig, function (pageIndex, pageSize) {
//var userName = $('#user_name').val();
var xhr = createXMLHTTP(); //创建一个ajax对象
xhr.onreadystatechange = function(event) { //对ajax对象进行监听
if (xhr.readyState == 4) { //4表示解析完毕
if (xhr.status == 200) { //200为正常返回
console.log(xhr)
var res=xhr.responseText;
var obj = eval('(' + res + ')');
if(obj.success == 1){
if(obj.data.length > 0){ //如果查询到了数据
var dataList = obj.data;
var html = '';
dataList.forEach(function (item, i) {
//获取所有数据前端分页
var startPoint=(pageIndex-1)*pageSize;
var endPoint=pageIndex*pageSize;
if(startPoint<=i&&i<endPoint){
html += '<tr>'+
'<td>'+((pageIndex-1)*pageSize+i+1)+'</td>'+
'<td>'+item.id+'</td>'+
'<td>'+item.name+'</td>'+
'<td>'+item.createTime+'</td>'+
'<td>'+item.createTime+'</td>'+
'<td>'+item.createTime+'</td>'+
'<td>'+item.createTime+'</td>'+
'</tr>';
}
});
$('#tbody').html(html);
var totalCount = obj.totalCount; //接口返回的总条数
//var totalCount = document.getElementById("totalCount").value; //接口返回的总条数
var totalPage = Math.ceil(totalCount / pageSize); //根据总条数和每页条数计算总页码数
// 调用Paging实例的 initPage()方法生成分页DOM结构
pageIng.initPage(totalCount, totalPage, pageIndex);
$('.page').show();
$('.no-data').hide();
}else{ //如果未查询到数据
$('#tbody').html('');
$('.page').hide();
$('.no-data').show();
}
}else{
$('#tbody').html('');
$('.page').hide();
$('.no-data').show();
}
}
}
};
xhr.open('POST',"http://avidm4.calt.casc/Windchill/netmarkets/jsp/ext/common/queryAjax.jsp", true); //建立连接,参数一:发送方式,二:请求地址,三:是否异步,true为异步
xhr.send(null); //发送
});
}
5,支持前端分页,和后端分页
参考网页:
https://www.cnblogs.com/libo0125ok/p/7815597.html