DataTables实现后台分页

最新推荐文章于 2024-07-03 03:03:06 发布

emmmmmmmmmmmmmmmm

最新推荐文章于 2024-07-03 03:03:06 发布

阅读量2.1k

点赞数

分类专栏： dataTables

本文链接：https://blog.csdn.net/qq_25916283/article/details/79927387

版权

dataTables 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<title>DataTables实现后台分页</title>
<meta charset="UTF-8">

<link href="css/bootstrap.min.css" rel="stylesheet">

<link href="css/jquery.dataTables.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-2" style="margin-top:1%;">
<input class="form-control" type="search" placeholder="请输入要搜索的同学姓名" id="userName">
</div>
<div class="col-2" style="margin-top:1%;">
<button class="btn btn-outline-primary my-sm-0" οnclick="searchUserInfoList('1');">搜索</button>
</div>

<div class="col-12" style="margin-top:1%;">
<table id="userInfo" class="display" width="100%"></table>
</div>
<div class="col-12" style="margin-top:1%;">

<input id="total" type="hidden">
<input id="size" type="hidden">
<input id="pages" type="hidden">
<input id="current" type="hidden">
</div>
</div>
</div>
</body>

<script src="js/jquery-1.12.4.js"></script>
<script src="js/jquery.dataTables.min.js"></script>
<script type = "text/javascript">

selectUserInfoList("1","");

//查询规则信息List
function selectUserInfoList(page,userName){
var dataSet = [];
//每页显示多少条数据
var limit = "10";
$.ajax({
type: "POST",
url: "http://localhost:8080/sys/userInfo/select",
data: {page:page,limit:limit,userName:userName},
dataType: "JSON",
success: function(data){
//总条数
var total = data.data.total;
//每页显示条数
var size = data.data.size;
//总页数
var pages = data.data.pages;
//当前页数
var current = data.data.current;

//将分页信息保存到页面
$("#total").val(total);
$("#size").val(size);
$("#pages").val(pages);
$("#current").val(current);

//DataTables每页显示多少条数据
var iDisplayLength = 10;
//服务器上总数据条数
var listSize = total;

//最后一页的时候这样放数据
if(pages==current){
iDisplayLength = total - size*(pages-1);
listSize = iDisplayLength*pages;
}

//序号
var no = (current - 1) * size;
for(var i = 0;i < listSize;i++){
var arr = [];
no = no + 1;
if(i < data.data.records.length){
arr[0] = no;
arr[1] = data.data.records[i].UserId;
arr[2] = data.data.records[i].UserName;
dataSet[i]=arr;
}else{
arr[0] = no;
arr[1] = "";
arr[2] = "";
dataSet[i]=arr;
}
}

$('#userHead').DataTable( {
data: dataSet,
searching: false,
bSort: false,
deferRender: true,
bDestroy: true,
iDisplayStart: 0,
iDisplayLength:iDisplayLength,
language: {
sInfo: "当前显示第 "+((current - 1) * size+1)+" 到第 "+(size*(current-1) + iDisplayLength)+" 条一共 "+total+" 条"
},
columns: [
{ title: "序号" },
{ title: "用户ID" },
{ title: "用户姓名" }
]
} );

//分页
pagination(current,pages);
}
});
}

//分页
function pagination(current,pages) {
//分页初始化部分
//当前页大于1 上一页按钮可用
if(current > 1){
$("#userHead_previous").removeClass("disabled");
}
//第一页按钮显示为未选中状态
$(".paginate_button")[1].className="paginate_button";
//当前页码按钮被选中
//大于8页
if(pages>8){
if(current<5){
$(".paginate_button")[current].className="paginate_button current";
}else if(current>=5&&current<=(pages-4)){
$(".paginate_button")[2].outerHTML="<span class=\"ellipsis\" onselectstart=\"return false\">…</span>";
$(".paginate_button")[2].outerHTML="<a class='paginate_button' onselectstart=\"return false\" aria-controls='userHead' data-dt-idx='"+(current-1)+"' tabindex='0'>"+(current-1)+"</a>";
$(".paginate_button")[3].outerHTML="<a class='paginate_button current' onselectstart=\"return false\" aria-controls='userHead' data-dt-idx='"+(current-1)+"' tabindex='0'>"+current+"</a>";
$(".paginate_button")[4].outerHTML="<a class='paginate_button' onselectstart=\"return false\" aria-controls='userHead' data-dt-idx='"+(current-1)+"' tabindex='0'>"+(current+1)+"</a>";
}else if(current>(pages-4)){
$(".paginate_button")[2].outerHTML="<span class=\"ellipsis\" onselectstart=\"return false\">…</span>";
$(".paginate_button")[2].outerHTML="<a class='paginate_button' onselectstart=\"return false\" aria-controls='userHead' data-dt-idx='"+(pages-4)+"' tabindex='0'>"+(pages-4)+"</a>";
$(".paginate_button")[3].outerHTML="<a class='paginate_button' onselectstart=\"return false\" aria-controls='userHead' data-dt-idx='"+(pages-3)+"' tabindex='0'>"+(pages-3)+"</a>";
$(".paginate_button")[4].outerHTML="<a class='paginate_button' onselectstart=\"return false\" aria-controls='userHead' data-dt-idx='"+(pages-2)+"' tabindex='0'>"+(pages-2)+"</a>";
$(".ellipsis")[1].outerHTML = "<a class='paginate_button' onselectstart=\"return false\" aria-controls='userHead' data-dt-idx='" + (pages - 1) + "' tabindex='0'>" + (pages - 1) + "</a>";
if(current==(pages-4)){
$(".paginate_button")[2].className="paginate_button current";
}else if(current==(pages-3)){
$(".paginate_button")[3].className="paginate_button current";
}else if(current==(pages-2)){
$(".paginate_button")[4].className="paginate_button current";
}else if(current==(pages-1)){
$(".paginate_button")[5].className="paginate_button current";
}else if(current==pages){
$(".paginate_button")[6].className="paginate_button current";
}
}
//小于8页
}else if(pages<8){
$(".paginate_button")[current].className="paginate_button current";
//等于8页
}else if(pages==8){
if(current<5){
$(".paginate_button")[current].className="paginate_button current";
}else{
$(".paginate_button")[2].outerHTML="<span class=\"ellipsis\" onselectstart=\"return false\">…</span>";
$(".paginate_button")[2].outerHTML="<a class='paginate_button' onselectstart=\"return false\" aria-controls='userHead' data-dt-idx='4' tabindex='0'>4</a>";
$(".paginate_button")[3].outerHTML="<a class='paginate_button' onselectstart=\"return false\" aria-controls='userHead' data-dt-idx='5' tabindex='0'>5</a>";
$(".paginate_button")[4].outerHTML="<a class='paginate_button' onselectstart=\"return false\" aria-controls='userHead' data-dt-idx='6' tabindex='0'>6</a>";
$(".ellipsis")[1].outerHTML = "<a class='paginate_button' onselectstart=\"return false\" aria-controls='userHead' data-dt-idx='7' tabindex='0'>7</a>";
if(current==5){
$(".paginate_button")[3].className="paginate_button current";
}else if(current==6){
$(".paginate_button")[4].className="paginate_button current";
}else if(current==7){
$(".paginate_button")[5].className="paginate_button current";
}else if(current==8){
$(".paginate_button")[6].className="paginate_button current";
}
}
}

//移除DataTables自带的分页事件
$(".paginate_button").attr('onclick','').unbind('click');
//添加分页事件
$(".paginate_button").click(function(){
var jumpPage = this.innerHTML;
if(jumpPage=="上一页"){
if(current > 1){
searchUserInfoList(current-1);
}else{
$("#userHead_previous").addClass("disabled");
}
}else if(jumpPage=="下一页"){
if(current < pages){
searchUserInfoList(current+1);
}else{
$("#userHead_next").addClass("disabled");
}
}else {
//获取要跳转到的页码
searchUserInfoList(jumpPage);
}
});
}

//触发搜索按钮
function searchUserInfoList(current){
var userName = $("#userName").val();
selectUserInfoList(current,userName);
}
</script>
</html>