html代碼
<body>
<div id="resultDIV">
<table class="table_list">
<thead id="resultThead" style="width:90%;">
</thead>
<tbody id="resultTbody">
</tbody>
</table>
<div id="pageDiv" class="page eui-pager-custom"></div>
</div>
css代碼
.table_list{ text-align:center; background:#fff;}
.table_list th{ padding:0 10px; line-height:40px; font-weight:normal; color:#fff; background:#3fa4e4;}
.table_list td{ padding:3px 10px; border:1px solid #ccc; word-break:break-all;}
.table_list tbody tr:hover{ background:#dbeffb;}
.table_list thead tr{ background:#BBFFBB;}
通過點擊查詢按鈕，結合ajax進行分頁檢索，數據展示到table中
//ajax發送請求
$.ajax({
async : true,
url : "url地址",
type : "post",
data : {
"ipKeyword" : ipKeyword,
},
dataType : "json",
success : function(data) {
// 數據數量
var resultSize = data.resultSize;
// 當前頁
var currentPage = data.currentPage;
// 數據列表
var resultData = data.dataSource;
// 數據展示
if (resultData != null) {
// 添加表格數據
addTableData(resultSize, currentPage, resultData);
// 綁定點擊事件
bindClick();
$("#downloadDIV").attr("style","display:block;");
} else {
$("#resultDIV").attr("style","display:none;");
$("#downloadDIV").attr("style","display:none;");
}
}
});
往table中添加行和數據addTableData()方法
// 設置表格的頁數顯示的條數
var pageSize = 20;
// 總頁數
var totalPage = 0;
// 當前頁
var cPage = 0;
// 添加table數據
function addTableData(resultSize, currentPage, resultData) {
for (var i = 0; i < resultData.length; i++) {
var rowData = resultData[i];
var result = "";
result += "<tr>";
if (i == 0) {
for (var j = 0; j < rowData.length; j++) {
result += "<th style='padding:1px;' nowrap='nowrap' >" + rowData[j] + "</th>";
}
result += "</tr>";
$("#resultThead").append(result)
} else {
for (var j = 0; j < rowData.length; j++) {
if (j == 5) {
result += "<td style='padding:1px;' nowrap='nowrap' ><a href='javascript:;' id='pluginurl"+ i +"' onclick=myDownloadExcel('" + i + "','" + rowData[j] + "');return false>" + rowData[j] + "</a></td>";
} else {
result += "<td style='padding:1px;' nowrap='nowrap' >" + rowData[j] + "</td>";
}
}
result += "</tr>";
$("#resultTbody").append(result)
}
}
if (resultSize/pageSize > parseInt(resultSize/pageSize)){
totalPage = parseInt(resultSize/pageSize)+1;
}else{
totalPage = parseInt(resultSize/pageSize);
}
cPage = currentPage;
// 位置2 生成當前的點擊按鈕
createBtns(resultSize, totalPage , currentPage);
}
添加分頁按鈕
/**
* [createBtns 生成點擊按鈕]
* @param {[NUMBER]} resultSize [數據總數]
* @param {[NUMBER]} totalPage [分頁的總頁數]
* @param {[NUMBER]} current [當前頁]
*/
function createBtns(resultSize, totalPage , current){
var tempStr = "";
tempStr += "<a title='首頁' class='page_first' data-role='first' data-page = '1'></a>";
if (current > 1) {
tempStr += "<a title='上一頁' class='page_prev' data-role='prev' data-page = "+(current-1)+"></a>";
} else {
tempStr += "<a title='上一頁' class='page_prev' data-role='prev' data-page = "+current+"></a>";
}
// 總頁數 > 5
if (totalPage > 5) {
if (current > 3 && current <= (totalPage-3)) {
var sub2 = Number(current) - Number(2);
var sub1 = Number(current) - Number(1);
var add2 = Number(current) + Number(2);
var add1 = Number(current) + Number(1);
tempStr += "<a class='btn page"+sub2 + "' data-page = "+sub2+"><span>"+ sub2 +"</span></a>";
tempStr += "<a class='btn page"+sub1 + "' data-page = "+sub1+"><span>"+ sub1 +"</span></a>";
tempStr += "<a class='btn page"+current + " currentpage" + "' data-page = "+current+"><span>"+ current +"</span></a>";
tempStr += "<a class='btn page"+add1 + "' data-page = "+add1+"><span>"+ add1 +"</span></a>";
tempStr += "<a class='btn page"+add2 + "' data-page = "+add2+"><span>"+ add2 +"</span></a>";
} else if (current <= 3) {
for (var pageIndex= 1 ; pageIndex <= 5; pageIndex++) {
tempStr += "<a class='btn page"+ pageIndex +(current==pageIndex? " currentpage" : "") + "' data-page = "+pageIndex+"><span>"+ pageIndex +"</span></a>";
}
} else if (current > (totalPage-3)) {
for (var pageIndex= 4 ; pageIndex >= 0; pageIndex--) {
tempStr += "<a class='btn page"+(totalPage - pageIndex) +(current==((totalPage - pageIndex))? " currentpage" : "") + "' data-page = "+(totalPage - pageIndex)+"><span>"+ (totalPage - pageIndex) +"</span></a>";
}
}
// 總頁數 <= 5
} else {
for(var pageIndex= 1 ; pageIndex < totalPage+1; pageIndex++){
tempStr += "<a class='btn page"+pageIndex+(current==pageIndex? " currentpage" : "")+ "' data-page = "+( pageIndex )+"><span>"+ pageIndex +"</span></a>";
}
}
if (current < totalPage) {
tempStr += "<a title='下一頁' class='page_next' data-role='next' data-page = "+(current+1)+"></a>";
} else {
tempStr += "<a title='下一頁' class='page_next' data-role='next' data-page = "+current+"></a>";
}
tempStr += "<a title='尾頁' class='page_last' data-role='last' data-page = " + totalPage + "></a>";
tempStr += "共<span data-target='rowCount'>" + resultSize + "</span>條 ";
tempStr += "跳轉到 <input type='text' data-target='input' class='page_input' value='"+ current +"'/><a data-role='go' class='go'>GO</a>";
document.getElementById("pageDiv").innerHTML = tempStr;
}
添加按鈕的點擊事件
function bindClick(){
// 設置首頁、末頁、上一頁、下一頁的點擊事件
var buttonArr = ['.page_first','.page_prev','.page_next','.page_last','.go'];
for(var k = 0; k < buttonArr.length; k++){
var $dom = buttonArr[k];
if (k == 4) {
$('body').undelegate($dom , 'click').delegate( $dom , 'click' , function () {
var data = $(".page_input").val();//獲取當前按鈕跳轉的頁數
if (inputIntegerCheck(data, totalPage)) {
ajaxSearchData(data);
}
})
} else {
$('body').undelegate($dom , 'click').delegate( $dom , 'click' , function () {
var data = $(this).data('page');//獲取當前按鈕跳轉的頁數
if (data != cPage) {
ajaxSearchData(data);
}
})
}
}
// 設置數碼的點擊事件
for (var k = 1 ;k <= totalPage ; k++){
var $singleDom = '.page'+k;
$('body').undelegate($singleDom , 'click').delegate( $singleDom , 'click' , function () {
var data = $(this).data('page');
if (data != cPage) {
ajaxSearchData(data);
}
})
}
}
添加分頁按鈕點擊後觸發的ajax分頁方法
// ajax分頁查詢
function ajaxSearchData(intValue) {
$("#resultThead").empty();
$("#resultTbody").empty();
$("#pageDiv").empty();
//ajax發送請求
$.ajax({
async : true,
url : "url地址",
type : "post",
data : {
"ipKeyword" : ipKeyword,
"page" : intValue,
},
dataType : "json",
success : function(data) {
$("#resultDIV").attr("style","display:block;");
//獲得返回的值
// 數據數量
var resultSize = data.resultSize;
// 當前頁
var currentPage = data.currentPage;
// 數據列表
var resultData = data.dataSource;
// 數據展示
if (resultData != null) {
// 添加表格數據
addTableData(resultSize, currentPage, resultData);
$("#downloadDIV").attr("style","display:block;");
} else {
$("#resultDIV").attr("style","display:none;");
$("#downloadDIV").attr("style","display:none;");
}
}
});
}
實現效果圖
