PageHelper分页

最新推荐文章于 2021-06-03 22:51:20 发布

小灬罗

最新推荐文章于 2021-06-03 22:51:20 发布

阅读量171

点赞数

分类专栏： SSM 文章标签： f fe

本文链接：https://blog.csdn.net/luojingwei1997/article/details/80637066

版权

SSM 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<body>
<div class="container">
    <!-- 标题 -->
    <div class="row">
        <div class="col-md-12">
            <h1>SSM-CRUD</h1>
        </div>
    </div>
    <!-- 显示表格数据 -->
    <div class="row">
        <div class="col-md-12">
            <table class="table table-hover" id="emps_table">
                <thead>
                <tr>
                    <th>#</th>
                    <th>Name</th>
                    <th>sex</th>
                    <th>email</th>
                    <th>d_id</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="emps_table tbody">
                <tr>

                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div id="fy">

    </div>
</div>
</body>
</html>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
  $(function () {
         to_Page(1);
      });
   function to_Page(pn) {
       $.ajax({
           url:"/getAll",
           data:"pn="+pn,
           type:"GET",
           success:function(result){
               //console.log(result);
               
               build_emps_table(result);
              
              
               build_page_nav(result);
           }
       });
   }
  function build_emps_table(result){
      //清空table表格
      $("#emps_table tbody").empty();
      var emps = result.pageInfo.list;
      $.each(emps,function(index,item){
          var empIdTd = $("<td></td>").append(item.id);
          var empNameTd = $("<td></td>").append(item.name);
          var genderTd = $("<td></td>").append(item.sex);
          var emailTd = $("<td></td>").append(item.email);
          var deptNameTd = $("<td></td>").append(item.dId);
          $("<tr></tr>")
              .append(empIdTd)
              .append(empNameTd)
              .append(genderTd)
              .append(emailTd)
              .append(deptNameTd)
              .appendTo("#emps_table tbody");
      });
  }
  function build_page_nav(result) {
        $("#fy").empty();
        var ul=$("<ul></ul>").addClass("pagination");
        var firstPage=$("<li></li>").append($("<a></a>").attr("herf","#").append("首页"));
        firstPage.click(function () {
              to_Page(1);
        })
        ul.append(firstPage);
        var nav=result.pageInfo.navigatepageNums;
        $.each(nav,function (index,item) {
            var  numli=$("<li></li>").append($("<a></a>").attr("herf","#").append(item));
            if(result.pageInfo.pageNum == item){
                numli.addClass("active");
            }
            numli.click(function(){
                to_Page(item);
            });
            ul.append(numli);
        })
      var lastPage=$("<li></li>").append($("<a></a>").attr("herf","#").append("末页"));
      lastPage.click(function () {
          to_Page(result.pageInfo.pages);
      })
      ul.append(lastPage);
      var navEle = $("<nav></nav>").append(ul);
      navEle.appendTo("#fy");
  }
</script>

小灬罗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
PageHelper分页

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt;&lt;/head&gt;&lt;link href="https://cdn.bo
复制链接

扫一扫