<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
</style>
<link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="../css/common.css">
<link rel="stylesheet" href="../css/base.css">
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script>
//分页
var curPage = 1; //当前页码
var pageSize = 10; //当前每页显示条数
var total,totalPage; //总记录数,总页数
var eventName;
$(function () {
//加载分页中的select
var pagecount = '<select name="pagecount" id="pagecount">' +
'<option value="10">10</option>' +
'<option value="20">20</option>' +
'<option value="30">30</option>' +
'<option value="40">40</option>' +
'</select>';
$("#tabBar").html(pagecount);
getList();
});
//获取分页条
function getPageBar(){
$("#tabBar").find('span').remove();
$("#tabBar").find('p').remove();
var pageStr = '';
var pageStr2 = '';
//如果当前是第一页
if(curPage==1){
pageStr += '<span><a href="javascript:void(0)" rel="1"><i class="iconfont icon-fanyezuo disabled_icon"></i></a></span>';
}else{
pageStr += '<span><a href="javascript:void(0)" rel="'+ (curPage-1) +'"><i class="iconfont icon-fanyezuo"></i></a></span>';
}
//页码大于最大页数
if(curPage>totalPage) curPage = totalPage;
//页码小于1
if(curPage<1) curPage = 1;
pageStr += '<p>第 <input type="text" placeholder="1" value="'+curPage+'" id="pageNum" οnkeypress="return event.keyCode>=48&&event.keyCode<=57" ng-pattern="/[^a-zA-Z]/"> 页,共 <span>'+totalPage+'</span> 页</p>';
//如果是最后页
if(curPage>=totalPage){
pageStr += '<span><a href="javascript:void(0)" rel="'+ totalPage +'"><i class="iconfont icon-fanyeyou disabled_icon"></i></a></span></div>';
}else{
pageStr += '<span><a href="javascript:void(0)" rel="'+ (parseInt(curPage)+1) +'"><i class="iconfont icon-fanyeyou"></i></a></span></div>';
}
$("#tabBar").append(pageStr);
//页码改变,按回车后更新列表
$('#pageNum').bind('keyup',function(event){
if(event.keyCode == "13") {
curPage = parseInt($('#pageNum').val());
if(curPage>totalPage) curPage = totalPage;
if(curPage<1) curPage = 1;
funt ();
}
});
//如果是最后页
console.log(2,curPage,totalPage,pageSize);
if(curPage>=totalPage){
console.log(3,(totalPage-1)*pageSize+1);
pageStr2 += '<p>显示 <span>'+ ((totalPage-1)*pageSize+1) +'</span> 到 <span>'+ total +'</span> 条,';
}else{
console.log(4,(curPage-1)*pageSize+1,curPage*pageSize);
pageStr2 += '<p>显示 <span>'+ ((curPage-1)*pageSize+1) +'</span> 到 <span>'+ (curPage*pageSize) +'</span> 条,';
}
pageStr2 += '共 <span>'+ total +'</span> 条记录</p></div>';
pageStr2 += '</p></div>';
$("#tabBar").siblings("p").html(pageStr2);
}
//分页
function funt() {
return window[eventName]();
}
$(function () {
//当前每页显示条数改变
$("#pagecount").change(function () {
curPage = 1;
pageSize = parseInt($(this).children('option:selected').val());
funt ();
});
//给span a绑定点击事件
$("#tabBar").parent().on('click','span a',function(){
curPage = $(this).attr("rel");
funt ();
});
})
function getList() {
$('#aicList').find("*").remove();
var requestData = {
"PageInfo": {
"Index": parseInt(curPage),
"Size": parseInt(pageSize)
},
"action": "AicSee.GetAicSeeSearch"
};
$.ajax({
type: "GET",
url: "../json/aic.json",
data: requestData,
dataType: "json",
success: function (data) {
if (data.ResultCode == "1") {
var list = data.Data.DataList;
var html = '';
$("#aicList").html("");
for (var i = 0; i < list.length; i++) {
// html += '<tr class="'+ bgClass1[list[i].Status] + " " + bgClass2[list[i].IsChecked] +'">' +
html += '<tr>' +
'<td>' + list[i].RegionName +'<br/>('+ list[i].RegionCode + ')</td>' +
'<td>' + list[i].Period + '</td>' +
'<td>' + list[i].Title + '</td>' +
'<td>' + list[i].StartTime + '</td>' +
'<td>' + list[i].StartTime + '</td>' +
'<td id="dealPage_'+ i +'">' ;
html += '</td>';
}
if (list.length <= 0) {
html += "<tr><td colspan='7'>暂无数据</td></tr>";
}
$("#aicList").append(html);
var pageInfo = data.Data.PageInfo;
total = pageInfo.TotalResult; //总记录数
totalPage = pageInfo.TotalPage; //总页数
eventName = "getList";
getPageBar();
} else {
alert("获取标注列表失败");
}
},
error: function () {
alert("连接错误 获取树结构");
}
})
}
</script>
<body>
<table class="table no-shadow">
<thead>
<tr>
<td>地区</td>
<td>期号</td>
<td>标题</td>
<td>生效开始时间</td>
<td>当前状态</td>
</tr>
</thead>
<tbody id="aicList">
</tbody>
</table>
<div class="tab_tool_wrapper">
<div id="tabBar"></div>
<p></p>
</div>
</body>
</html>
//分页思路:
先 生成列表,在列表方法中调用分页方法,getPageBar() //当前每页显示条数改变,调用生成列表方法。
页面结构 span p span
//如果当前是第一页 页码左边按钮不能点,所以分两种情况,(最后一页同理)
//如果页码大于最大页数,或小于最小页数,均设置为最大或最小值
//给span设置rel属性,通过rel属性确定当前页码