bootstrap 自己写分页功能

<!--css样式-->
.page {
text-align: center;
margin: 10px 0 -20px 0;
}
a:hover{
cursor: pointer;
}
.page .current {
background: #FF0403;
color: white;
}

HTML页面

<input type="hidden" id="currentPage" value="1">//当前页码
<input type="hidden" id="totalPages" value="">//总页码
<input type="hidden" id="origin" value="">//上次的页码  当前页面有多个分页的时候需要
<div class="list-div" style="margin-right: 10%;"></div>//分页html

前端JS代码

$(function (){
showdata();//若没有地方调用代码，则需要页面初始化加载时默认调用
});

//请求页面数据
function showdata(){
var origin=$("#myselect").val();//上次的页码
var currentPage = $('#currentPage').val();//当前页码
var totalPages = $('#totalPages').val();//总页码
if($("#origin").val()!=origin){
currentPage=1;
}
$.ajax({
type:"POST",
url:"",
data:{
page:currentPage,//当前页码
origin : origin,//上次的页码
limit:'10'//每页记录条数
},
dataType:"json",
success:function(res){
if(res.errcode==0){
var info = res.data;//页面数据
var total = res.count[0].count;//总记录条数
showPage(total,currentPage,info,origin);//调用并传参给分页函数
}else{
showPage(total=0,currentPage=0,info=0,origin);
}
},
error:function (XMLHttpRequest, textStatus, errorThrown) {
toast(textStatus + errorThrown);
}
});
}

//分页展示信息
function showPage(total,currentPage,info,origin){
$("table").html('');//展示数据的容器
$(".list-div").html('');//分页容器
if(info.length>0){
var tr='<thead><th>xx</th><th>xx</th><th>xx</th><th>xx</th></thead>';
var num=0;
for(var i = 0;i < info.length;i++){
tr+='<tr>'+
'<td>'+(i+1)+'</td>'+
'<td>'+info[i]['xx']+'</td>'+
'<td>'+info[i]['xx']+'</td>'+
'<td >'+info[i]['xx']+'</td></tr>';
}
$("table").append(tr)
var totalPages = Math.ceil(total/10); //计算总页码数
$('#totalPages').val(totalPages);//把总页数存到隐藏框里
var current = currentPage ? parseInt(currentPage):1; //当前页数
$('#currentPage').val(current);//把当前页存放到隐藏框
$("#origin").val(origin);//将上次的页码写入隐藏域 用作比对是否新请求
var s='<nav class="page" aria-label="Page navigation"><ul class="pagination"><li><a class="first">首页</a></li>';
if(current != 1){
s += '<li><a class="down">上一页</a></li>';
}
for(var i=current-2;i<= current+2;i++){
if(i>0 && i <= totalPages){
if(current==i) {
s += '<li class="thisclass"><a class="current center">'+ i +'</a></li>';
}else {
s += '<li><a class="center">'+ i +'</a></li>';
}
}
}
if(current != totalPages){
s += '<li><a class="up">下一页</a></li>';
}
s += '<li><a class="last">末页</a></li>'+
'<li><span class="pageinfo">共<strong style="color:red;">'+ totalPages +'</strong>页</li>'+
'<li><span class="pageinfo">共<strong style="color:red;">'+ total +'</strong>条数据</li>'+
'<li><input type="number" min="1" max="'+totalPages+'" id="page" placeholder="输入页码" style="width:100px;display:inline-block;height:32px;" class="form-control"></li>'+
'<li><input class="btn btn-danger" type="submit" onclick="openPage()" value="确定" style="width:60px;"/></li></ul></nav>';
$(".list-div").html(s);
//给分页列表绑定事件
bindingEvent();
}else{
//没有符合条件的数据
$(".table").append('<thead><th>xx</th><th>xxx</th><th>xx</th><th>xx</th></thead><tr><td colspan="5" style="text-align:center;">'+'暂无数据'+'</td></tr>');
}
}

//给分页列表绑定事件的方法
function bindingEvent() {
$(".first").click(function(){
if($("#currentPage").val() != 1 && $('#totalPages').val() != 0){
//第一页点击时无效
$("#currentPage").val(1);//即第一页
showdata();  //请求数据
}
})
$(".last").click(function(){
if($("#currentPage").val() != $('#totalPages').val() && $('#totalPages').val() != 0){
//最后一页点击时无效
var total = $('#totalPages').val();//把总页数存到隐藏框里
$("#currentPage").val(total);
showdata();
}
})
$(".down").click(function(){
if($('#totalPages').val() != 0){
//总页数为0时，不能点击无效，主要是考虑搜索没数据时的情况
var n = $("#currentPage").val();
if(n>1){
n--;
}else{
n=1;
}
$("#currentPage").val(n);
showdata();
}
})
$(".up").click(function(){
if($('#totalPages').val() != 0){
//总页数为0时，不能点击无效，主要是考虑搜索没数据时的情况
var n = $("#currentPage").val();
if(n<totalPages){
n++;
}else{
n=totalPages;
}
$("#currentPage").val(n);
showdata();
}
})
$(".center").click(function(){
if($('#totalPages').val() != 0){
//总页数为0时，不能点击无效，主要是考虑搜索没数据时的情况
var n = $
3ff7
(this).text();
if($("#currentPage").val() != n){
$("#currentPage").val(n);//中间的页码，点击哪一页就去那一页
showdata();
}
}
})
}

//改变页面的显示数据条数
function openPage(){
var currentPage=$("#page").val();
var max=$("#page").attr("max");
if(isNumber(currentPage)){
if(parseInt(currentPage)>0 && parseInt(currentPage)<=parseInt(max)){
$('#currentPage').val(currentPage);
showdata();
}else{
alert("请输入有效页码");
}
}else{
alert("请输入正确数字");
}
}
//检验是否是数字
function  isNumber(value){
var re = /^[0-9]+.?[0-9]*$/;
if (!re.test(value)){
return false;
}
return true;
}