表格分页组件

距离放假还有三天，今天又是写博客的一天

首先在HTML中建一个div，给上class和id，class决定样式，id决定交互

<div class="paging WebpartReview" id="PageArea"></div>

然后进入JS文件，声明初始化值

var pageIndex=1
var pageSize=10

再次就是写三个函数

//pageSize可选值
function initPage(_TotalCount) {
    var _PageHtml = showPages(pageIndex, pageSize, _TotalCount);
    $("#PageArea").html(_PageHtml + '&nbsp;&nbsp;<select id="pageSizeValue" onchange="GetPageSizeValue()" style="height:29px;width:80px" class="textEntry"><option value="10">10</option><option value="20">20</option><option value="50">50</option><option value="100">100</option></select>');
    $("#pageSizeValue").val(pageSize);
}

//获得pageSize值
function GetPageSizeValue() {
    var newPageSize = $("#pageSizeValue").val();
    pageSize = newPageSize;
    GoToPage(1);
}
//跳转到第几页
function GoToPage(index) {
    pageIndex = index;
    termApplicant() //发送请求的函数
}

最后在请求发送成功处调用initPage()

 data.rows是返回的数据总量，具体根据后台返回实际数据修改

我把class的样式也放在这里

.paging {
	text-align: left;
	margin-top: 20px;
	clear: both;
	padding-top: 20px;
	padding-bottom: 20px;
	padding-left: 3px;
	font-size:12px;
}

显示的效果