版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/m0_37137902/article/details/81563368
分页插件效果
1首先引用CSS和JS
<link href="~/.../css/jquery.pagination.css" rel="stylesheet" />
<script src="~/.../js/jquery.pagination.min.js" </script>
2HTML代码
<div class="calendarInfo">
@*表格*@
<table id="example" class="display f-fs14" cellspacing="0">
<thead>
<tr>
<th>序号</th>
<th>日程名称</th>
<th>日程内容</th>
<th>时间</th>
<th>地点</th>
<th>操作</th>
</tr>
</thead>
<tbody></tbody>
</table>
@*分页插件*@
<div class='clearfix mt-15 f-fs14'>
<div id="paginationText" class="f-inblock uc-color-grey"></div>
<div id="pagination" class="page fr"></div>
</div>
</div>
JS 代码,如果点击第二页,则current为2,写方法赋值给table即可,table序号通过代码设置。
// 分页
var paginationnum = 0;
$("#pagination").pagination({ //分布总数量,必须参数
currentPage: 1,
isShow: false,
count: 5, //行数
prevPageText: "<i class=\"icon-font icon-left\"></i>",
nextPageText: "<i class=\"icon-font icon-right\"></i>",
callback: function (current) {
current = current - 1;
$("#example tr:not(:first)").html("");
//current是点击的页数
GetTableData(startDate, endDate, current);
},
totalPage: paginationnum;
});
//访问数据,并给table赋值
function GetTableData(startDate, endDate, current) {
current = current;
var matterHtml = '';
var jsons;
$.ajax({
async: false,
type: 'POST',
url: ' /Products/BST_Schedule/GetWeekDateLists?beginTime=' + startDate + '&endTime=' + endDate + ' ',
data: {},
dataType: 'json',
error: function (result) {
},
success: function (result) {
jsons = JSON.parse(result.scheduleList);
document.getElementById("paginationText").innerHTML = ' 共 ' + Math.ceil(jsons.length / 5) + '页,每页5条数据';
}
});
//得到数据给table赋值
for (var i = current * 5; i < ((current * 5 + 5) > jsons.length ? jsons.length : current * 5 + 5) ; i++) {
var num = i + 1;
scheduleID = jsons[i].ID;
matterHtml += '<tr>'
+ '<td>' + num + '</td>'
+ '<td>' + jsons[i].Event + '</td>'
+ '<td>' + jsons[i].Remark + '</td>'
+ '<td>' + jsons[i].BeginTime + '-' + jsons[i].EndTime + '</td>'
+ '<td>' + jsons[i].Address + '</td>'
+ '</tr>';
}
$('#example tbody').html(matterHtml);
if (date != "1") {
$('.personalSchedule_title').html(date);
}
$("#pagination").pagination({ //分布总数量,必须参数
currentPage: current+1,
isShow: false,
count: 5,
prevPageText: "<i class=\"icon-font icon-left\"></i>",
nextPageText: "<i class=\"icon-font icon-right\"></i>",
callback: function (current) {
current = current - 1;
$("#example tr:not(:first)").html("");
GetTableData(startDate, endDate, date, current);
},
totalPage: paginationnum
});
}
JS也可以这样写
getWeekList(pageindex);
// 分页
if (pagenum > 1) {
$("#pagination").pagination({
currentPage: pageindex,
totalPage: pagenum,
isShow: false,
prevPageText: "<i class=\"icon-font icon-left\"></i>",
nextPageText: "<i class=\"icon-font icon-right\"></i>",
callback: function (current) {
pageindex = current;
getWeekList(pageindex);
}
});
}
/*获取数据填充给表格*/
function getWeekList(pageindex) {
var personalScheduleHtml = '';
$.ajax({
async: false,
type: 'POST',
url: '@Url.Action("GetWeekDateList", "Schedule")',
data: {
"startDate": "@ViewBag.startDate",
"endDate": "@ViewBag.endDate",
"schoolID": "@ViewBag.schoolID",
"pageindex": pageindex
},
dataType: 'json',
error: function (result) {
},
success: function (result) {
pagenum = result.pageCount;
var json = JSON.parse(result.pageCutList);
for (var i = 0; i < json.length; i++) {
var num = i + 1;
personalScheduleHtml += '<tr>'
+ '<td>' + json[i].Index+ '</td>'
+ '<td>' + json[i].WbeginTime + ' — ' + json[i].WendTime + '</td>'
+ '<td>' + json[i].WallNum + ' </td>'
+ '<td>' + json[i].WfinishNum + '</td>'
+ '<td>' + json[i].WunfinishNum + '</td>'
+ '<td> <a href="javascript:;" title="添加日程" onclick="layer_add(\'' + json[i].WbeginTime + '\',\'' + json[i].WendTime + '\')"><i class="icon-font icon-add-line"></i></a>   <a href="javascript:;" title="查看日程" onclick="layer_list(\'' + json[i].WbeginTime + '\',\'' + json[i].WendTime + '\')"><i class="icon-font icon-browse"></i></a><td>'
+ '</tr>';
}
$('#example tbody').html(personalScheduleHtml);
document.getElementById("paginationtext").innerHTML = ' 共 ' + pagenum + '页,每页6条数据';
vm.weeks = json;
$("#weekList").show();
}
});
}