參考文檔：https://www.cnblogs.com/libo0125ok/p/7815597.html
目的：通過(guò)ajax請(qǐng)求數(shù)據(jù)實(shí)現(xiàn)頁(yè)腳分頁(yè)控制陕悬，參考文檔很詳細(xì)题暖，我根據(jù)自己的項(xiàng)目需要，對(duì)原函數(shù)修改了部分捉超。實(shí)現(xiàn)大中屏適應(yīng)顯示（我得項(xiàng)目只有兩個(gè)規(guī)格胧卤，是web和我inform結(jié)合的項(xiàng)目），遇到的主要問(wèn)題是：點(diǎn)擊查詢按鈕時(shí)會(huì)new出多個(gè)對(duì)象拼岳，就有了對(duì)參考文檔函數(shù)的改造
頁(yè)腳效果
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="搜索關(guān)鍵詞" />
</div>
<div class="condition_item">
<div class="form_selected" style="position:relative">
<input type="text" readonly="readonly" placeholder="請(qǐng)選擇員工" 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>設(shè)置</button>
<button class="form_btn"><i class="fa fa-file-download"></i>同步</button>
<button class="form_btn"><i class="fa fa-asl-interpreting"></i>重發(fā)</button>
<button class="form_btn"><i class="fa fa-sad-cry"></i>診斷</button>
<button class="form_btn"><i class="fa fa-dashboard"></i>導(dǎo)出</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">未查詢到數(shù)據(jù)</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>每頁(yè)顯示</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;
}
//翻頁(yè)控制
//分頁(yè)參數(shù)（參數(shù)名固定不可變）
pageConfig = {
pageSize: opage_size.value, //每頁(yè)條數(shù)（不設(shè)置時(shí)，默認(rèn)為10）
prevPage: '上頁(yè)', //上一頁(yè)（不設(shè)置時(shí)惜纸，默認(rèn)為：<）
nextPage: '下頁(yè)', //下一頁(yè)（不設(shè)置時(shí)叶撒，默認(rèn)為：>）
firstPage: '首頁(yè)', //首頁(yè)（不設(shè)置時(shí)，默認(rèn)為：<<）
lastPage: '末頁(yè)', //末頁(yè)（不設(shè)置時(shí)耐版，默認(rèn)為：>>）
degeCount: 3, //當(dāng)前頁(yè)前后兩邊可顯示的頁(yè)碼個(gè)數(shù)（不設(shè)置時(shí)祠够，默認(rèn)為3）
ellipsis: true //是否顯示省略號(hào)按鈕(不可點(diǎn)擊)（true:顯示，false:不顯示粪牲，不設(shè)置時(shí)古瓤，默認(rèn)為顯示）
};
getList(pageConfig); //初始加載就查詢
//點(diǎn)擊查詢按鈕
$('#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);
}
}
};
//查詢列表數(shù)據(jù)
function getList(pageConfig) {
var query_name = document.getElementById('query_name').value;
//初始化Paging實(shí)例(pageConfig參數(shù)也可以為空對(duì)象，此時(shí)就是默認(rèn)設(shè)置)
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; //接口返回的總條數(shù)
var totalPage = Math.ceil(totalCount / pageSize); //根據(jù)總條數(shù)和每頁(yè)條數(shù)計(jì)算總頁(yè)碼數(shù)
// 調(diào)用Paging實(shí)例的 initPage()方法生成分頁(yè)DOM結(jié)構(gòu)
pageIng.initPage(totalCount, totalPage, pageIndex);
$('.page').show();
$('.no-data').hide();
} else { //如果未查詢到數(shù)據(jù)
$('.diylistpanel').html('');
$('.page').hide();
$('.no-data').show();
}
},
error: function () {
alert(3)
}
});
}
