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 = $(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;
}