bootstrap分页插件同一界面展示多次

html界面：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../plug/bootstrap/css/bootstrap.min.css" />
<!--[if lt IE 9]>
    <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script type="text/javascript" src="../plug/jquery.min.js"> </script>
<script type="text/javascript" src="../plug/bootstrap/js/bootstrap.js"> </script>
<script type="text/javascript" src="../plug/bootstrap/js/bootstrap-paginator.js"> </script>
</head>
<body class="m-center">
 
          <div class="page">
            <div style="float: left;">
                <span>共<span class="total_records">0</span>条记录</span>
            </div>
            <div style="float: right;">
                <ul class="pagination"></ul>
            </div>
        </div>
          <div class="row-div"></div>
        <div class="page">
            <div style="float: left;">
                <span>共<span class="total_records">0</span>条记录</span>
            </div>
            <div style="float: right;">
                <ul class="pagination"></ul>
            </div>
        </div>
</body>
</html>

js代码：

function initPage(currentPage,totalPages){
        if(totalPages>=1000){
            totalPages =1000;
        }
        $(".pagination").bootstrapPaginator({
            bootstrapMajorVersion: 3, //对应的bootstrap版本
            currentPage: currentPage, //当前页数
            numberOfPages: 5, //每次显示页数
            totalPages: totalPages, //总页数
            shouldShowPage: true, //是否显示该按钮
            //useBootstrapTooltip: true,
            inputSearch:true,//显示查询输入框
            onPageClicked: function(event, originalEvent, type, page) {
                talent_search.jumpPage(page);
            },
            onPageChanged:function(event, oldPage, newPage){
                $('.pagination').bootstrapPaginator("show",newPage)
            }
        });
}

//列表时初始化 initPage(1, data.totalPages);
<script type="text/javascript" src="../plug/bootstrap/js/bootstrap-paginator.js"> </script> 分页js文件下载

该文件有部分修改，327行

 

posted @ 2019-03-18 16:02  一纸铅华  阅读(390)  评论(0)    收藏  举报