常用的插件分页(以前遇到了坑,接口调用两次,然后自己优化了一下,感觉还有优化空间,记录一下)
引入插件css
自己常用
在公共样式(style.css)之后引用
在当前页面css样式之前引用
<link rel="stylesheet" href="/common/style.css"> <#-- 公共样式 -->
<link rel="stylesheet" href="/lib/paginationPage/pagination.css"> <#-- 插件样式 -->
<link rel="stylesheet" href="/common/main/main.css"> <#-- 当前页面样式 -->
引入插件js
在jquery之后
在当前页面js之前
<script src="/lib/jquery-1.11.3.min.js"></script> <#-- jquery -->
<script src="/lib/paginationPage/pagination.js"></script> <#-- 插件js -->
<script src="/common/main/main.js"></script> <#-- 当前页面js -->
主题部分代码
<div class="rzglListCont">
<#-- 表头 -->
<div class="rzglListTitle isFlex">
<div class="flex1and2">序号</div>
<div class="flex2">调用类型</div>
<div class="flex2">时间</div>
<div class="flex6">日志事件</div>
<div class="flex2and3">风险警示</div>
</div>
<div class="rzglListConts positionR"> <#-- positionR = position: relative; -->
<div class="rzglList"></div> <#-- 列表内容存放处 -->
<span class="positionA tkDatasRzgl">暂无数据</span>
<#-- tkDatasRzgl样式为
/*列表数据无数据弹框*/
.tkDatasRzgl {
width: 100%;
height: 100%;
top: 0;
left: 0;
text-align: center;
line-height: 25vh;
font-size: 2vh;
background-color: rgba(204, 204, 204, .5);
color: #FF2C2C;
display: none;
}
设置父级标签后可以直接使用-->
</div>
<#-- 分页代码,class自己定义名字,后面需要用到,修改分页样式也可以用到 -->
<div id="div1" class="rzglpager">
<span style="cursor: pointer;">共<span name="recordCount"
style="color: Red;">0</span>条数据</span>
<span style="cursor: pointer;">第<span name="pageIndex"
style="color: Red;">0</span>/<span
name="pageCount" style="color: Red;">0</span>页</span>
<span style="cursor: pointer;">每页<span name="pageSize"
style="color: Red;">0</span>条记录</span>
<span name="first" class="disabled" style="cursor: default;">首页</span>
<span name="prev" class="disabled" style="cursor: default;">上一页</span>
<span name="nav" style="cursor: pointer;"><a class="navi"><span
style="color: #999">1</span></a></span>
<span name="next" class="disabled" style="cursor: pointer;">下一页</span>
<span name="last" class="disabled" style="cursor: pointer;">末页</span>
<input name="goNum" class="cssTxt" type="text" size="1">
<span name="go" class="disabled" style="cursor: pointer;">GO</span>
</div>
</div>
css代码没有,样式自己随便搞都行
js代码如下,我自己的实际项目代码
//封装json post方法 上一期写过,放到一个公共js中就行
function loadData(url, dataJson, callback) {
$.ajax({
type: 'POST',
url: baseUrl + url,
data: JSON.stringify(dataJson),
contentType: "application/json",
dataType: "json",
success: callback,
error: function () {
alert('请求失败')
}
});
}
getDatas(dateStr, rzglJournal, rzglFollowfield) //我这里因为要用到三个参数,如果要用,根据实际情况写
function getDatas(dateStr, rzglJournal, rzglFollowfield) {
//加载列表方法
var rzglSetDatas = function (datas) {
var rzglListHtml = '';
datas.forEach(function (item, index) {
//id
var id = item.logId;
var indexs = index + 1;
//时间
var invokeTime = renderTime(item.time);
//日志详情
var logDetail = item.mean;
//这个地方因为一行放不下,所有搞了个点击显示全部,最后用不到了
// var maxwidth = 40; //设置最多显示的字数
// var logDetails = '';
// if (logDetail.length > maxwidth) {
// logDetails = logDetail.substring(0, maxwidth) + "..." + "<span class='rzglTextClick' style='color: #1681CE;cursor: pointer;'>全部展示</span>";
// }
//风险警示
var securityTag = item.security;
var securityTagImgname = '';
var securityTagImgnames = '';
if (securityTag == 'SAFE') {
securityTagImgname = 'anquan'
securityTagImgnames = '安全'
} else if (securityTag == 'LOWDANGER') {
securityTagImgname = 'difengxian'
securityTagImgnames = '低风险'
} else if (securityTag == 'HIGHDANGER') {
securityTagImgname = 'gaofengxian'
securityTagImgnames = '高风险'
}
var type = item.type;
rzglListHtml += `
<div class="isFlex">
<div class="logId" style="display: none;">` + id + `</div>
<div class="flex1and2">` + indexs + `</div>
<div class="flex2">` + panduan(type, '-') + `</div>
<div class="flex2">` + panduan(invokeTime, '-') + `</div>
<div class="flex6 positionR">
<div class="rzglText" style="text-decoration: underline;color: #1681CE;cursor: pointer;">` + panduan(logDetail, '-') + `</div>
</div>
<div class="flex2and3">
<div class="rzglListImg marginL3">
<img src="../../../../images/` + securityTagImgname + `.png" alt="">
</div>
<div class="marginL1">` + panduan(securityTagImgnames, '-') + `</div>
</div>
</div>`
})
$(".rzglList").html(rzglListHtml);
}
//分页方法
var rzglGetDatas = function (pageIndex) {
var dataJsons = {
"dateStr": dateStr,
"actionType": rzglJournal,
"fuzzyKeyword": rzglFollowfield,
"pageIndex": pageIndex,
"pageSize": 5
}
// 分页
loadData("接口", dataJsons, function (data) {
if (data.success) {
$(".rzglList").html('');
var totalCount = data.totalCount;
var datas = data.dataList;
rzglSetDatas(datas) //将接口获取的内容传给加载列表方法
if (totalCount == 0) {
$('.tkDatasRzgl').show(); //有无数据蒙版
} else {
$('.tkDatasRzgl').hide();
// 首次加载第一个页面然后给分页传 总条数,当前页码
if(pageIndex == 1){
$(".rzglpager").pagination({
recordCount: totalCount, //总记录数
pageSize: 5, //一页记录数
pageIndex:pageIndex, //当前页号
//当点击第二页或者下一页的时候
onPageChange: function (pageIndex) {
rzglGetDatas(pageIndex)
}
});
}
}
} else {
alert(data.error)
}
})
}
//首次加载
rzglGetDatas(1)
}
项目图
差点忘记,插件的代码
css代码 pagination.css
div.pager {
text-align: center;
padding-bottom: 3px;
margin: 3px;
padding-left: 3px;
padding-right: 3px;
padding-top: 3px
}
div.pager a {
border-bottom: #dedfde 1px solid;
border-left: #dedfde 1px solid;
padding-bottom: 2px;
padding-left: 6px;
padding-right: 6px;
background-position: 50% bottom;
color: #0061de;
border-top: #dedfde 1px solid;
margin-right: 3px;
border-right: #dedfde 1px solid;
text-decoration: none;
padding-top: 2px
}
div.pager a:hover {
background-image: none;
border-bottom: #000 1px solid;
border-left: #000 1px solid;
background-color: #0061de;
color: #fff;
border-top: #000 1px solid;
border-right: #000 1px solid
}
div.pager a:active {
background-image: none;
border-bottom: #ff9600 1px solid;
border-left: #ff9600 1px solid;
background-color: #ffc794;
color: #ff6500;
border-top: #ff9600 1px solid;
border-right: #ff9600 1px solid
}
div.pager span.current {
padding-bottom: 2px;
padding-left: 6px;
padding-right: 6px;
color: #ff0084;
font-weight: bold;
margin-right: 3px;
padding-top: 2px
}
div.pager span.disabled {
padding-bottom: 2px;
padding-left: 6px;
padding-right: 6px;
color: #333333;
margin-right: 3px;
padding-top: 2px;
border: 1px solid #d9d9d9;
}
div.pager span.disabled:hover {
background-image: none;
border-bottom: #000 1px solid;
border-left: #000 1px solid;
background-color: #0061de;
color: #fff;
border-top: #000 1px solid;
border-right: #000 1px solid
}
.pager .cssTxt {
padding: 0;
margin: 0;
border: 1px solid #d9d9d9;
text-align: center;
}
js的代码 pagination.js
(function ($) {
$.initPagination = function (info) {
var $div = $(this);
var pager = {
$first: null,//首页按钮
$prev: null,//上一页按钮
$nav: null,//导航区按钮
$next: null,//下一页按钮
$last: null,//末页按钮
$goNum: null,//翻页文本输入框
$go: null,//翻页按钮
$recordCount: null,//总行数
$pageIndex: null,//当前页号
$pageCount: null,//总页数
$pageSize: null,//页码数
Init: function () { //初始化控件 缓存
$div.find("[name]").each(function () {
var name = $(this).attr("name");
if (name && name.length) {
pager["$" + name] = $(this);
}
});
pager.SetPageUI();
},
//创建导航
CreateNavi: function () {
//页号导航
if (!pager.$nav) return;
var n1 = "<a class=\"navi\">{text}</a>";
var navi = pager.$nav;
navi.empty();
var i;
var temp = "";
var s1;
var s2;
var naviCount2 = (info.naviCount % 2) == 1 ? info.naviCount / 2 | 0 : info.naviCount / 2;
if ((info.thisPageIndex - naviCount2) < 1) {
s1 = 1;
s2 = info.naviCount;
} else if ((info.thisPageIndex + naviCount2) >= info.pageCount) {
s1 = info.pageCount - info.naviCount + 1;
s2 = info.pageCount;
if (s1 < 1) s1 = 1;
} else {
s1 = info.thisPageIndex - naviCount2;
s2 = info.thisPageIndex + naviCount2;
if (s2 > info.pageCount) s2 = info.pageCount;
}
if (s2 > info.pageCount) s2 = info.pageCount;
if (s1 >= 2) {
temp = n1.replace("{text}", 1);
navi.append(temp);
}
if (s1 >= 3) {
temp = n1.replace("{text}", "…");
navi.append(temp);
}
for (i = s1; i <= s2; i++) { //当前页
temp = n1.replace("{text}", i == info.thisPageIndex ? "<font style=\"color:#999\">" + i + "</font>" : i);
navi.append(temp);
}
if (s2 <= info.pageCount - 2) {
temp = n1.replace("{text}", "…");
navi.append(temp);
}
if (s2 <= info.pageCount - 1) {
temp = n1.replace("{text}", info.pageCount);
navi.append(temp);
}
//注册事件
var naviA = navi.find("a");
naviA.each(function (j) {
$(this).on('click', function () {
info.beforePageIndex = info.thisPageIndex;
if (this.innerHTML == "…") {
var a1 = naviA[j - 1];
if (a1.innerHTML == "1") {
//前面的，取后面的作为页号
a1 = naviA[j + 1];
info.thisPageIndex = $(a1).text() * 1 - 1;
} else {
//后面的，取前面的作为页号
a1 = naviA[j - 1];
info.thisPageIndex = $(a1).text() * 1 + 1;
}
} else {
info.thisPageIndex = $(this).text();
}
//页码未变更则不触发事件
if (info.beforePageIndex == info.thisPageIndex) return;
pager.PageChanged();
});
});
},
//设置UI
SetPageUI: function () {
if (info.pageCount == -1) {
//计算总页数
info.pageCount = info.recordCount % info.pageSize === 0 ? info.recordCount / info.pageSize : parseInt(info.recordCount / info.pageSize) + 1;
}
pager.$recordCount && pager.$recordCount.html(info.recordCount);
pager.$pageIndex && pager.$pageIndex.html(info.thisPageIndex);
pager.$pageCount && pager.$pageCount.html(info.pageCount);
pager.$pageSize && pager.$pageSize.html(info.pageSize);
pager.$goNum && pager.$goNum.val(info.thisPageIndex);
$div.find("span").css("cursor", "pointer");
switch (parseInt(info.thisPageIndex)) {
case 1:
//第一页
pager.$first && pager.$first.hide().css("cursor", "default");
pager.$prev && pager.$prev.hide().css("cursor", "default");
pager.$next && pager.$next.show().css("cursor", "pointer");
pager.$last && pager.$last.show().css("cursor", "pointer");
break;
case info.pageCount:
//最后一页
pager.$first && pager.$first.show().css("cursor", "pointer");
pager.$prev && pager.$prev.show().css("cursor", "pointer");
pager.$next && pager.$next.hide().css("cursor", "default");
pager.$last && pager.$last.hide().css("cursor", "default");
break;
default:
//不是第一页、最后一页
pager.$first && pager.$first.show().css("cursor", "pointer");
pager.$prev && pager.$prev.show().css("cursor", "pointer");
pager.$next && pager.$next.show().css("cursor", "pointer");
pager.$last && pager.$last.show().css("cursor", "pointer");
break;
}
},
//设置缺省设置
SetDefaultInfo: function (pSet) {
var defaultSetting = {
recordCount: -1, //总记录数
pageSize: 10, //一页记录数
pageCount: -1, //总页数，不用设置，根据上两个条件自动计算
thisPageIndex: 1, //当前页号
beforePageIndex: 1, //上一次的页号
//lastPageIndex: 0, //最后一页的页号，自动计算
naviCount: 7, //页号导航的数量
isUseRecordCount: true, //是否使用缓存的总记录数
//分页控件模板的路径和文件名
templetPath: "pager",
};
return $.extend(defaultSetting, pSet);
},
//注册翻页的事件，不包括页号导航
RegPagerEvent: function () {
pager.$first && pager.$first.off("click").on('click', function () {
if (info.thisPageIndex != 1) {
addEvent("a");
}
});
pager.$prev && pager.$prev.off("click").on('click', function () {
if (info.thisPageIndex != 1) {
addEvent("-");
}
});
pager.$next && pager.$next.off("click").on('click', function () {
if (info.thisPageIndex != info.pageCount) {
addEvent("+");
}
});
pager.$last && pager.$last.off("click").on('click', function () {
if (info.thisPageIndex != info.pageCount) {
addEvent("z");
}
});
pager.$go && pager.$go.on('click', function () {
addEvent("go");
});
var addEvent = function (kind) {
info.beforePageIndex = info.thisPageIndex;
switch (kind) {
case "a":
info.thisPageIndex = 1;
break; //首页
case "z":
info.thisPageIndex = info.pageCount;
break; //末页
case "+":
info.thisPageIndex = info.thisPageIndex * 1 + 1;
break; //下页
case "-":
info.thisPageIndex = info.thisPageIndex * 1 - 1;
break; //上页
case "go":
info.thisPageIndex = pager.$goNum.val();
break; //go
}
pager.PageChanged();
};
},
//页面变更事件
PageChanged: function (pIndex) {
if (pIndex) info.thisPageIndex = pIndex;
//如果页码错误 则中断
if (isNaN(info.thisPageIndex)) {
alert("页码不正确");
return;
}
info.thisPageIndex = parseInt(info.thisPageIndex);
//判断范围
if (info.thisPageIndex > info.pageCount) info.thisPageIndex = info.pageCount;
if (info.thisPageIndex < 1) info.thisPageIndex = 1;
info.onPageChange && info.onPageChange.call(info, info.thisPageIndex);
pager.SetPageUI(); //重新设置UI
pager.CreateNavi();
//克隆
//var tmpdiv = info.pageTurnDivIDs.split(",");
//var pageHtml = $("#" + tmpdiv[0]).clone(true);
//for (var i = 1; i < tmpdiv.length; i++) {
// $("#" + tmpdiv[i]).html(pageHtml);
//}
}
};
//设置默认值
info = pager.SetDefaultInfo(info);
//如果模板没有自定义 则自动填充
var html = $div.html();
if (!/\w+/.test(html)) {
html = '<span style="cursor: pointer;">共<span name="recordCount" style="color: Red;"></span>条记录</span><span style="cursor: pointer;"> 第<span name="pageIndex" style="color: Red;"></span>/<span name="pageCount" style="color: Red;"></span>页</span><span style="cursor: pointer;"> 每页<span name="pageSize" style="color: Red;"></span>条记录 </span><span name="first" class="disabled" style="cursor: default;">首页</span><span name="prev" class="disabled" style="cursor: default;">上一页 </span><span name="nav" style="cursor: pointer;"><a class="navi"><span style="color: #999">1</span></a></span><span name="next" class="" style="cursor: pointer;">下一页 </span><span name="last" class="" style="cursor: pointer;">末页 </span><input name="goNum" class="cssTxt" type="text" size="1"><span name="go" style="cursor: pointer;"> GO</span>';
$div.html(html);
}
//增加样式
if (!$div.hasClass("pager")) $div.addClass("pager");
//初始化 缓存控件
pager.Init();
//注册事件（仅限上一页、下一页、首页、末页，不包括页号导航）
pager.RegPagerEvent();
//创建导航 并增加导航事件
pager.CreateNavi();
this.pager = pager;
return this;
}
$.fn.pagination = function (pagerInfo) {
this.each(function () {
$.initPagination.call(this, pagerInfo);
});
}
$.fn.PageChanged = function (pageIndex) {
this[0].pager && this[0].pager.PageChanged.call(this, pageIndex);
};
}(jQuery));
插件的css 和 js 代码可以直接复制使用,如果哪个大佬觉得自己可以改一改,那就是真的大佬了
扫一扫
175
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
