参考文档：https://www.cnblogs.com/libo0125ok/p/7815597.html
目的：通过ajax请求数据实现页脚分页控制，参考文档很详细，我根据自己的项目需要，对原函数修改了部分。实现大中屏适应显示（我得项目只有两个规格，是web和我inform结合的项目），遇到的主要问题是：点击查询按钮时会new出多个对象，就有了对参考文档函数的改造
页脚效果
css就不贴了，自己写就行
html：
<body class="container " style="background-color:#F0F2F5;width:100%;padding-left:10px;padding-right:10px;">
<div id="messagediv">---查询成功---</div>
<div id="minoperations">操作</div>
<div class="condition">
<div class="condition_items">
<div class="condition_item">
<input id="query_name" type="text" class="form_text" value="" placeholder="搜索关键词" />
</div>
<div class="condition_item">
<div class="form_selected" style="position:relative">
<input type="text" readonly="readonly" placeholder="请选择员工" class="form_text" />
<i class="fa fa-angle-down" style="position:absolute;right:10px;top:10px;"></i>
<ul class="form_selected_ul">
<li>aaa </li>
<li>111111</li>
<li>22222</li>
<li>3333</li>
</ul>
</div>
</div>
<button id="search_btn" class="form_btn form_btn_default" style="position:absolute;right:10px;"><i class="fa fa-jack-o-lantern"></i>开始查询</button>
</div>
</div>
<div class="diytbpanel">
<div class="diytbbar">
<button class="form_btn form_btn_default"><i class="fa fa-pen"></i>设置</button>
<button class="form_btn"><i class="fa fa-file-download"></i>同步</button>
<button class="form_btn"><i class="fa fa-asl-interpreting"></i>重发</button>
<button class="form_btn"><i class="fa fa-sad-cry"></i>诊断</button>
<button class="form_btn"><i class="fa fa-dashboard"></i>导出</button>
</div>
<div class="diylistpanel">
<div class="diylist_item">
<div class="item_img"></div>
<div class="item_text"></div>
<div class="item_oprea"></div>
</div>
<div class="diylist_item"></div>
<div class="diylist_item"></div>
</div>
<div class="no-data">未查询到数据</div>
<br />
<div style="height:50px;width:100%;margin-top:-20px;">
<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" disabled="disabled">
<option value="12">12</option>
<option value="30">30</option>
</select>条
</div>
</div>
<div class="page-r">
<ul id="page_ul" class="page-ul"></ul>
</div>
</div>
</div>
</div>
js代码：
//隐藏条件查询条
var ominopera = document.getElementById('minoperations');
var ocondition = document.getElementsByClassName('condition')[0];
var boolopeta = true;
ominopera.onclick = function () {
if (boolopeta) {
ocondition.style.display = "block";
boolopeta = false;
} else {
ocondition.style.display = "none";
boolopeta = true;
}
}
var opage_size = document.getElementById('page_size');
var pageConfig;
var pageIng;
var pageIndex = 1;
var pageSize = opage_size.value;
window.onload = function () {
var ostartwidth = document.body.clientWidth;
if (ostartwidth <= 1200) {
opage_size.value = 12;
}
if (ostartwidth >= 1920) {
opage_size.value = 30;
}
//翻页控制
//分页参数（参数名固定不可变）
pageConfig = {
pageSize: opage_size.value, //每页条数（不设置时，默认为10）
prevPage: '上页', //上一页（不设置时，默认为：<）
nextPage: '下页', //下一页（不设置时，默认为：>）
firstPage: '首页', //首页（不设置时，默认为：<<）
lastPage: '末页', //末页（不设置时，默认为：>>）
degeCount: 3, //当前页前后两边可显示的页码个数（不设置时，默认为3）
ellipsis: true //是否显示省略号按钮(不可点击)（true:显示，false:不显示，不设置时，默认为显示）
};
getList(pageConfig); //初始加载就查询
//点击查询按钮
$('#search_btn').click(function () {
getList(pageConfig);
ocondition.style.display = "none";
});
window.onresize = function () {
var owidth = document.body.clientWidth;
if (owidth >= 1920) {
opage_size.value = 30;
getList(pageConfig);
}
else if (owidth <= 1200) {
opage_size.value = 12;
getList(pageConfig);
}
}
};
//查询列表数据
function getList(pageConfig) {
var query_name = document.getElementById('query_name').value;
//初始化Paging实例(pageConfig参数也可以为空对象，此时就是默认设置)
if (!pageIng) {
pageIng = new Paging(pageConfig, function (pageIndex, pageSize) {
get(pageIndex, pageSize, query_name);
});
} else {
opage_size = document.getElementById('page_size');
get(pageIndex, pageSize, query_name);
}
}
function get(pageIndex, pageSize, query_name) {
opage_size = document.getElementById('page_size');
pageSize = opage_size.value
var query_name = document.getElementById('query_name').value;
$.ajax({
url: '../../product/getProductlst', //接口地址
type: 'get',
data: {
pageIndex: pageIndex,
pageSize: pageSize,
query_name: query_name
},
async: true,
success: function (res) {
var omessagediv = document.getElementById('messagediv');
omessagediv.style.display = "block";
setTimeout(function () { omessagediv.style.display = "none"; }, 2000)
var jsonresult = eval('(' + res + ')')
if (jsonresult.totalcount > 0) {
var html = '';
$.each(jsonresult.product, function (i, item) {
html += '<div class=\"diylist_item\">';
html += '<div class=\"item_img\"><img src=\"https://cbu01.alicdn.com/' + item.photo + ' \" style=\"width:160px;height:160px;\"/></div>';
html += '<div class=\"item_text\">' + item.name + '</div>';
html += '<div class=\"item_oprea\">' + item.ProductId + '</div>';
html += ' </div>';
});
html += '<div style="clear:both"></div>';
$('.diylistpanel').html(html);
var totalCount = jsonresult.totalcount; //接口返回的总条数
var totalPage = Math.ceil(totalCount / pageSize); //根据总条数和每页条数计算总页码数
// 调用Paging实例的 initPage()方法生成分页DOM结构
pageIng.initPage(totalCount, totalPage, pageIndex);
$('.page').show();
$('.no-data').hide();
} else { //如果未查询到数据
$('.diylistpanel').html('');
$('.page').hide();
$('.no-data').show();
}
},
error: function () {
alert(3)
}
});
}
