bootstrap分页插件

最新推荐文章于 2023-10-21 17:50:18 发布

weixin_41881346

最新推荐文章于 2023-10-21 17:50:18 发布

阅读量240

点赞数

文章标签： bootstrap jquery ajax

原文链接：https://www.cnblogs.com/zooey/p/9218089.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <script src="./js/bootstrap-paginator.min.js"></script>     <!-- 分页插件 -->
<body>
    <nav aria-label="Page navigation">
        <ul class="pagination">
        </ul>
      </nav>
     <div class="row">
       <div class="col-md-12">
         <div class="com">qwqw</div>
       </div>
     </div>
    <script>
$(function() {
  let currentPage = 1;
    let pageSize = 10;
    function render() {
        $.ajax({
          url : `http://192.168.103.241:2323/WebApi/v1_0/shifts/nursing-shifts?_page=${currentPage}&_limit=${pageSize}`,
           beforeSend: function(xhr) { 
			       	xhr.setRequestHeader("Authorization", "Bearer 532CB3031739AF669E227BAAE25E7A60");  
            },
           dataType : "json",
            success: function (result) {
              console.log(result)
                // 将数据渲染到页面
                // $("tbody").html(template("tableTemp",{item:result}))
                $('.com').text("")
                $(".com").text(JSON.stringify(result.Data.table))
                // 调用分页函数.参数:当前所在页, 总页数(用总条数 除以 每页显示多少条,在向上取整), ajax函数
                setPage(currentPage, Math.ceil(result.Data.totalSize/pageSize), render)
            }
        })
    }
    render()

    /**
     *
     * @param pageCurrent 当前所在页
     * @param pageSum 总页数
     * @param callback 调用ajax
     */
    function setPage(pageCurrent, pageSum, callback) {
        $(".pagination").bootstrapPaginator({
            //设置版本号
            bootstrapMajorVersion: 3,
            // 显示第几页
            currentPage: pageCurrent,
            // 总页数
            totalPages: pageSum,
            //当单击操作按钮的时候, 执行该函数, 调用ajax渲染页面
            onPageClicked: function (event,originalEvent,type,page) {
                // 把当前点击的页码赋值给currentPage, 调用ajax,渲染页面
                currentPage = page
                console.log(page)
                callback && callback()
            }
        })
    }
})

    </script>
</body>
</html>

weixin_41881346

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
bootstrap分页插件

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
复制链接

扫一扫