效果图:
1、Html页面
html文件:
<div class="body-content">
<table class="table table-hover text-center">
<thead style = "text-align:center; background-color:#555; color:#fff;">
<tr>
<th width="10%">aucOrgID</th>
<th width="10%">aucGroupId</th>
<th width="20%">aucItemNum</th>
<th width="20%">aucItemCrc</th>
<th width="50%">time</th>
</tr>
</thead>
<tbody style = "text-align:center;" id="data"></tbody>
<tr>
<td colspan="4">
<div class="pagelist" id="list">
<span style="cursor:pointer;">上一页</span>
<label id="curStatus"></label>
<span style="cursor:pointer;">下一页</span>
<input id="goInput">
<span id="go" style="background-color:#03b6fd; cursor:pointer;">GO</span>
</div>
</td>
</tr>
</table>
</div>
2、页面查询按钮触发
html文件:
<div class="border-bottom">
<table class="table table-hover text-center">
<tr>
<td width="30%" align="right"><label>org_id:</label></td>
<td width="20%">
<input class="input w50" style="height:30; padding:5px 10px; width:100%" id="input_org_id"/>
</td>
<td width="50%">
<a class="button border-main icon-search" style="height:30; padding:5px 10px; cursor:pointer;float:left" onclick="query()"> query white list</a>
</td>
</tr>
</table>
</div>
<script>
var isClick = true;
function query() {
if(isClick) {
isClick = false;
WhiteListQuery();
setTimeout(function() {
isClick = true;
}, 1000);
}
};
</script>
js文件:
function WhiteListQuery() {
setCurrentPage(1);
getData();
}
3、获取数据
利用Ajax调用WEB接口查询当前需要显示的数据,JS页面
function getData() {
var org_id = $("#input_org_id").val();
let timestamp = getTimeStamp()
let app_id = getAppID()
let data={
'app_id':app_id,
'timestamp':timestamp,
'org_id':org_id,
'page_size':pageSize,
'page_index':currentPage
}
$.ajax(getURL() + 'query_white_list_ws.php', {
type:'POST',
data:{
app_id: app_id,
timestamp: timestamp,
org_id: org_id,
page_size: pageSize,
page_index: currentPage,
sign: createSign(this, data)
},
dataType: 'json'
}).done(function(data) {
showOperateResultDone('query_white_list_ws', data);
$('#data').html('');
if (data.code === 0) {
show(data);
}
}).fail(function(xhr, status) {
showOperateResultFail('query_white_list_ws',xhr, status)
});
}
function show(data) {
let totalPage = data.data.total_page;
init(currentPage, totalPage);
changePage(currentPage);
for (var k in data.data.data)
{
let el = "<tr><td>" +
data.data.data[k]['aucOrgId'] + "</td><td>" +
data.data.data[k]['aucGroupId'] + "</td><td>" +
data.data.data[k]['aucItemNum'] + "</td><td>" +
data.data.data[k]['aucItemCrc'] + "</td><td>" +
data.data.data[k]['time'] + "</td></tr>";
$('#data').append(el);
}
}
4、设置按钮控件,控制下面页数、下一页、跳转
$('#go').click(function() {
let value = $('#goInput').val();
setCurrentPage(value);
getData();
});
$('#goInput').keydown(function(event) {
if (event.keyCode === 13) {
let value = $('#goInput').val();
setCurrentPage(value);
getData();
}
});
var total = 0;
var currentPage=1;
var pageSize=10;
var isInit = false;
//初始化
function init(page, num) {
currentPage = page;
total = num;
if (!isInit) {
isInit = true;
changePage(currentPage);
}
}
//点击上一页,下一页是设置当前页
function setCurrentPage(page) {
if (page > total || page < 1) {
return false;
}
currentPage = parseInt(page);
return true;
//console.log(currentPage) ;
}
//设置底部滚动条
function changePage(page) {
if (page > total || page < 1) {
return false;
}
page = parseInt(page);
$('#goInput').val(page);
$('#curStatus').html(page + '/' + total);
return true;
}
//设置滚动条的点击事件
$('#list').on('click', 'span', function() {
switch ($(this).text()) {
case '上一页':{
setCurrentPage(currentPage - 1) && getData();//越界不调接口
break;
}
case '下一页':{
setCurrentPage(currentPage + 1) && getData();
break;
}
}
});