jQuery前台分页
纯 jQuery 分页,不夹杂分页插件
主要用于自己定义分页,可用于除表格以外的分页(分页插件包主要只针对于表格),注释详细均可自己微调:
1.样式引用为bootstrap的样式与自加的样式
<style>
button{width: 100px;height: 30px;border-radius: 15px;background: #ffffff;float: right;margin-right: 20px;}
.buttonTure{border: 1px solid #38AAE7;color: #38AAE7;}
.buttonFalse{border: none;}
#myTable td{line-height: 30px;}
.pagination>li>a:hover .pagination>li>a>span:hover{
color: #ffffff;
background-color: #337AB7;
border-color: #dddddd;
}
.pagination>li>a:focus {
color: #ffffff;
background: #337AB7;
border-color: #dddddd;
}
.pagination>li .aactive{
color: #ffffff;
background-color: #337AB7;
border-color: #dddddd;
}
</style>
2.html部分
<table id = "myTable" class="table table-striped warning-table-expandable">
<thead>
<tr>
<th class="text-center">编号
</th>
<th class="text-center">内容
</th>
<th class="text-center">操作
</th>
</tr>
</thead>
<tbody class="table table-striped warning-table-expandable">
</tbody>
</table>
<nav aria-label="Page navigation" align="center">
<ul class="pagination" style="margin: 0px;">
<li id="pages">
<span aria-hidden="true" id="prev" style="cursor: pointer;">上一页
</span>
</li>
<li>
<span aria-hidden="true" id="next" style="cursor: pointer;">下一页
</span>
</li>
</ul>
</nav>
jq部分
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
var pageSize = 5;
var curPage=0;
var lastPage;
var direct=0;
var len;
var page;
var begin;
var end;
$(document).ready(function () {
for (var i = 1; i <= 20; i++) {
$("tbody").append("<tr><th class='text-center'>"+i+"</th><th class='text-center'>整理简便知识"+i+"</th><th class='text-center'>赞</th></tr>");
};
len =$("#myTable tr").length-1;
console.log($("#myTable tr"));
page=len % pageSize==0 ? len/pageSize : Math.floor(len/pageSize)+1;
curPage=1;
displayPage(1);
$("#prev").click(function frontPage(){
direct=-1;
displayPage();
});
$("#next").click(function nextPage(){
direct=1;
displayPage();
});
for(var i=page;i>0;i--){
$("#pages").after("<li><a href=\"#\" onclick='changeCurPage(event)'>"+i+"</a></li>");
}
$(".pagination a").each(function(i){
if($(this).text()==curPage){
$(this).attr("class","aactive");
}else if($(this).text()!=curPage){
$(this).removeClass();
}
});
});
function changeCurPage(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
curPage=$(target).text()*1;
direct = 0;
displayPage();
}
function displayPage() {
if (curPage <= 1 && direct == -1) {
direct = 0;
$(".pagination").find("li:first").attr("class","disabled");
return;
} else if (curPage >= page && direct == 1) {
direct = 0;
$(".pagination").find("li:last").attr("class","disabled");
return;
}else{
$(".pagination").find("li:first").removeClass();
$(".pagination").find("li:last").removeClass();
}
if (len > pageSize) {
curPage = ((curPage + direct + len) % len);
} else {
curPage = 1;
}
begin=(curPage-1)*pageSize + 1;
end = begin + 1*pageSize - 1;
if(end > len ) end=len;
$(".pagination a").each(function(i){
console.log($(this).text());
if($(this).text()==curPage){
$(this).attr("class","aactive");
}else if($(this).text()!=curPage){
$(this).removeClass();
}
});
$("#myTable tr").hide();
$("#myTable tr").each(function(i){
if((i>=begin && i<=end || i==0) ){
$(this).show();
}
});
}
效果图
思维导图:
Created with Raphaël 2.1.0
数据
数据
处理
处理
统计
统计
显示
显示
确定好该有的数据和数量
通过判断确定begin、end
让行数在begin和end之间的行显示
注意:代码中有的段落为样式,与分页无关,已注明。
浏览器兼容
测试为Chrome。不支持离线功能:bootstrap 和 jq 均为CDN省去下载bootstrap包和jq的过程,主要掌握该技巧
转载请注明原文地址: https://ju.6miu.com/read-14381.html