DataTables实现后台分页

最新推荐文章于 2024-07-03 03:03:06 发布
最新推荐文章于 2024-07-03 03:03:06 发布
阅读量2.1k 收藏
点赞数
分类专栏： dataTables
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_25916283/article/details/79927387
版权
<!DOCTYPE html>
<html>
   <head>
      <title>DataTables实现后台分页</title>
      <meta charset="UTF-8">
      <!-- 引入 Bootstrap -->
      <link href="css/bootstrap.min.css" rel="stylesheet">
 <!-- 引入 DataTables -->
 <link href="css/jquery.dataTables.min.css" rel="stylesheet">
   </head>
   <body>
     <div class="container">
       <div class="row">
           <div class="col-2" style="margin-top:1%;">
               <input class="form-control" type="search" placeholder="请输入要搜索的同学姓名" id="userName">
           </div>
           <div class="col-2" style="margin-top:1%;">
               <button class="btn btn-outline-primary my-sm-0" οnclick="searchUserInfoList('1');">搜索</button>
           </div>
 <!-- DataTables-->
 <div class="col-12" style="margin-top:1%;">
   <table id="userInfo" class="display" width="100%"></table>
     </div>
           <div class="col-12" style="margin-top:1%;">
               <!--分页-->
               <input id="total" type="hidden">
               <input id="size" type="hidden">
               <input id="pages" type="hidden">
               <input id="current" type="hidden">
           </div>
        </div>
      </div>
   </body>
    <!-- 引入 DataTables 需要的js-->
    <script src="js/jquery-1.12.4.js"></script>
    <script src="js/jquery.dataTables.min.js"></script>
    <script type = "text/javascript">


        selectUserInfoList("1","");


//查询规则信息List
function selectUserInfoList(page,userName){
 var dataSet = [];
 //每页显示多少条数据
 var limit = "10";
 $.ajax({
             type: "POST",
             url: "http://localhost:8080/sys/userInfo/select",
             data: {page:page,limit:limit,userName:userName},
             dataType: "JSON",
             success: function(data){
                 //总条数
                 var total = data.data.total;
                 //每页显示条数
                 var size = data.data.size;
                 //总页数
                 var pages = data.data.pages;
                 //当前页数
                 var current = data.data.current;


                 //将分页信息保存到页面
                 $("#total").val(total);
                 $("#size").val(size);
                 $("#pages").val(pages);
                 $("#current").val(current);


                 //DataTables每页显示多少条数据
                 var iDisplayLength = 10;
                 //服务器上总数据条数
                 var listSize = total;


                 //最后一页的时候这样放数据
                 if(pages==current){
                     iDisplayLength = total - size*(pages-1);
                     listSize = iDisplayLength*pages;
                 }


                 //序号
                 var no = (current - 1) * size;
                 for(var i = 0;i < listSize;i++){
                     var arr = [];
                     no = no + 1;
                     if(i < data.data.records.length){
                         arr[0] = no;
                         arr[1] = data.data.records[i].UserId;
                         arr[2] = data.data.records[i].UserName;
                         dataSet[i]=arr;
                     }else{
                         arr[0] = no;
                         arr[1] = "";
                         arr[2] = "";
                         dataSet[i]=arr;
                     }
                 }
 
$('#userHead').DataTable( {
                     data: dataSet,
                     searching: false,
                     bSort: false,
                     deferRender: true,
                     bDestroy: true,
                     iDisplayStart: 0,
                     iDisplayLength:iDisplayLength,
                     language: {
                         sInfo: "当前显示第 "+((current - 1) * size+1)+" 到第 "+(size*(current-1) + iDisplayLength)+" 条 一共 "+total+" 条"
                     },
                     columns: [
                      { title: "序号" },
 { title: "用户ID" },
                      { title: "用户姓名" }
                     ]
                 } );


                 //分页
                 pagination(current,pages);
             }
          });
}


//分页
function pagination(current,pages) {
            //分页初始化部分
   //当前页大于1 上一页 按钮可用
            if(current > 1){
                $("#userHead_previous").removeClass("disabled");
            }
            //第一页按钮显示为未选中状态
            $(".paginate_button")[1].className="paginate_button";
   //当前页码 按钮被选中
            //大于8页
            if(pages>8){
                if(current<5){
                    $(".paginate_button")[current].className="paginate_button current";
                }else if(current>=5&&current<=(pages-4)){
                    $(".paginate_button")[2].outerHTML="<span class=\"ellipsis\" onselectstart=\"return false\">…</span>";
                    $(".paginate_button")[2].outerHTML="<a class='paginate_button' onselectstart=\"return false\" aria-controls='userHead' data-dt-idx='"+(current-1)+"' tabindex='0'>"+(current-1)+"</a>";
                    $(".paginate_button")[3].outerHTML="<a class='paginate_button current' onselectstart=\"return false\" aria-controls='userHead' data-dt-idx='"+(current-1)+"' tabindex='0'>"+current+"</a>";
                    $(".paginate_button")[4].outerHTML="<a class='paginate_button' onselectstart=\"return false\" aria-controls='userHead' data-dt-idx='"+(current-1)+"' tabindex='0'>"+(current+1)+"</a>";
                }else if(current>(pages-4)){
                    $(".paginate_button")[2].outerHTML="<span class=\"ellipsis\" onselectstart=\"return false\">…</span>";
                    $(".paginate_button")[2].outerHTML="<a class='paginate_button' onselectstart=\"return false\" aria-controls='userHead' data-dt-idx='"+(pages-4)+"' tabindex='0'>"+(pages-4)+"</a>";
                    $(".paginate_button")[3].outerHTML="<a class='paginate_button' onselectstart=\"return false\" aria-controls='userHead' data-dt-idx='"+(pages-3)+"' tabindex='0'>"+(pages-3)+"</a>";
                    $(".paginate_button")[4].outerHTML="<a class='paginate_button' onselectstart=\"return false\" aria-controls='userHead' data-dt-idx='"+(pages-2)+"' tabindex='0'>"+(pages-2)+"</a>";
                    $(".ellipsis")[1].outerHTML = "<a class='paginate_button' onselectstart=\"return false\" aria-controls='userHead' data-dt-idx='" + (pages - 1) + "' tabindex='0'>" + (pages - 1) + "</a>";
                    if(current==(pages-4)){
                        $(".paginate_button")[2].className="paginate_button current";
                    }else if(current==(pages-3)){
                        $(".paginate_button")[3].className="paginate_button current";
                    }else if(current==(pages-2)){
                        $(".paginate_button")[4].className="paginate_button current";
                    }else if(current==(pages-1)){
                        $(".paginate_button")[5].className="paginate_button current";
                    }else if(current==pages){
                        $(".paginate_button")[6].className="paginate_button current";
                    }
                }
            //小于8页
            }else if(pages<8){
                $(".paginate_button")[current].className="paginate_button current";
            //等于8页
            }else if(pages==8){
                if(current<5){
                    $(".paginate_button")[current].className="paginate_button current";
                }else{
                    $(".paginate_button")[2].outerHTML="<span class=\"ellipsis\" onselectstart=\"return false\">…</span>";
                    $(".paginate_button")[2].outerHTML="<a class='paginate_button' onselectstart=\"return false\" aria-controls='userHead' data-dt-idx='4' tabindex='0'>4</a>";
                    $(".paginate_button")[3].outerHTML="<a class='paginate_button' onselectstart=\"return false\" aria-controls='userHead' data-dt-idx='5' tabindex='0'>5</a>";
                    $(".paginate_button")[4].outerHTML="<a class='paginate_button' onselectstart=\"return false\" aria-controls='userHead' data-dt-idx='6' tabindex='0'>6</a>";
                    $(".ellipsis")[1].outerHTML = "<a class='paginate_button' onselectstart=\"return false\" aria-controls='userHead' data-dt-idx='7' tabindex='0'>7</a>";
                    if(current==5){
                        $(".paginate_button")[3].className="paginate_button current";
                    }else if(current==6){
                        $(".paginate_button")[4].className="paginate_button current";
                    }else if(current==7){
                        $(".paginate_button")[5].className="paginate_button current";
                    }else if(current==8){
                        $(".paginate_button")[6].className="paginate_button current";
                    }
                }
            }


            //移除DataTables自带的 分页 事件
            $(".paginate_button").attr('onclick','').unbind('click');
            //添加 分页 事件
            $(".paginate_button").click(function(){
                var jumpPage = this.innerHTML;
                if(jumpPage=="上一页"){
                    if(current > 1){
                      searchUserInfoList(current-1);
                    }else{
                      $("#userHead_previous").addClass("disabled");
                    }
                }else if(jumpPage=="下一页"){
                    if(current < pages){
                      searchUserInfoList(current+1);
                    }else{
                      $("#userHead_next").addClass("disabled");
                    }
                }else {
                    //获取要跳转到的页码
                    searchUserInfoList(jumpPage);
                }
            });
      }

      //触发搜索按钮
      function searchUserInfoList(current){
          var userName = $("#userName").val();
          selectUserInfoList(current,userName);
      }
  </script>
</html>
emmmmmmmmmmmmmmmm
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【编程实践】使用 jquery.dataTables 实现后端分页表格和综合搜索项目案例讲解
程序员光剑
06-18 1万+
jquery.dataTables 是一款基于 jQuery 的表格插件，提供了丰富的功能和灵活的配置选项，可以轻松地实现各种表格需求，包括前端分页、后端分页、排序、过滤、搜索等等。本文将介绍如何使用 jquery.dataTables 实现后端分页表格和综合搜索，并通过一个实例来演示具体的实现方法。本文介绍了如何使用 jquery.dataTables 实现后端分页表格和综合搜索，并通过一个实际示例演示了如何在前端和后端之间进行数据交互，以及如何使用 AJAX 请求从服务器获取数据。
DataTable 后端分页（新）
luoluo_lj的博客
06-14 3968
最近需要做Datatable的后端分页，网上有很多前辈总结的，林林总总，有些照着配了但是点击分页数据不刷新， 现在给大家总结出样例，分享给大家。注意得写上 jsp页面注意我的红色标注的地方，serverSide和dataFilter注意得写上,必须有的。 jsp： peoplelist = $('#people').DataTable({ "serverSid...
Datatables后端分页
极客中年的博客
05-31 3852
通过以下的js代码，在action或者controller中接受参数主要是起始页和页大小，然后进行后端分页代码就可以了。JS dataTables初始化函数如下：
jquery DataTables 分页
最新发布
weixin_40505960的博客
07-03 73
jquery DataTables 分页 在网页开发中，经常会遇到需要展示大量数据的情况，而数据量过大的话就需要对数据进行分页显示。jquery DataTables 是一个非常方便的插件，可用于实现数据的分页展示。本文将介绍如何使用jquery DataTables进行分页，并提供一个简单的代码示例。 什么是jquery...
datatables后端分页
Js_123456789的博客
08-21 575
0x01 缘由 平时较少涉及前端，这次本以为模板中有表单，分页跳转搜索功能都比较齐全，可以高枕无忧，但是细看模板中的分页跳转是不需要与后台交互的，数据一次性写在前端，再有前端插件完成分页。 这种方式肯定是不可行的，这次要做的可以看做资产管理，服务器+主机量级很大，一个机器生成一条 <th>，第一次请求的前端代码怕是要崩掉。 所以合理采用的还是后端分页 ...
dataTable后端分页
码来-陈平安的博客
07-20 524
1.html页面 定义一个datatable表格 <table class="table table-sm table-striped table-bordered text-center" id="group_list"> <thead> <tr class="text-c"> <th width="80">名称</th> <th width="100">类型</th>
datatables后台分页处理
qq_38742043的博客
04-25 473
1、引入datatables.css，datatables.min.js2、按照官网(http://datatables.club/manual/#orthogonal-data)demo直接copy一个HTML表格                        &lt;table id="table_id_example" class="display"&gt; &lt;thead&gt...
mybatisPlus-dataTables:dataTables-mybatisPlus 后台分页、排序、搜索（未完成）
05-02
dataTables-mybatisPlus 后台分页、排序、搜索 软件架构 软件架构说明 安装教程 xxxx xxxx xxxx 使用说明 xxxx xxxx xxxx 参与贡献 Fork 本项目 新建 Feat_xxx 分支 提交代码 新建 Pull Request 码云特技 使用 ...
datatables实现分页
qq_35134066的博客
05-15 2776
datatables实现分页分为客户端分页和服务端分页两种，客户端分页很简单，只要把返回的所有数据根据dataSrc设置好就可以了。 这里说一下服务端分页的实现。 html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta nam...
jquery DataTable实现前后台动态分页
12-07
这里我们将详细讲解如何使用jQuery DataTable实现后台动态分页。 首先，确保在HTML文件中引入了必要的CSS和JavaScript库，如jQuery核心库、DataTables库以及Bootstrap样式库（如果需要的话）。在提供的代码中，可以...
Bootstrap+DataTables后端排序分页详解
svygh123的专栏
03-26 1300
网上找了很多文章,都没有统一的写完前后端Bootstrap+DataTables到底是怎么运行好的,因此在折腾了好久后,把运行好的贴出来以作备份参考. 首先贴前台的table <table id="example1" class="table table-bordered table-hover table-striped"> <thead> <tr&...
datatables1.10+springMVC分页
09-12
datatables1.10向上兼容。日常情况下使用前端插件进行分页，通过后端解析datatables请求来的参数进行request参数解析（demo中对通过datatable包中对datatables发送过来的参数进行一个解析器的操作）通过控制器action进行service数据解析调用拼装。此demo对datatables1.10前端调用后台分页、排序等进行解析。并生成返回数据传向前台。
仿jquery.dataTables的分页（查询+排序）
08-14
仿jquery.dataTables的分页（查询+排序）,jquery插件式开发简单示例。
datatables怎么分页
10-16
Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。 分页，即时搜索和排序 几乎支持任何数据源：DOM， javascript， Ajax 和 服务器处理 支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation 各式各样的扩展: Editor, TableTools, FixedColumns …… 丰富多样的option和强大的API 支持国际化 超过2900+个单元测试 免费开源 （ MIT license ）！ 商业支持 更多特性请到官网查看
后台分页
03-17
NULL 博文链接：https://yvonna.iteye.com/blog/465961
jquery dataTable 后台加载数据并分页实例代码
12-12
使用 dataTable后台加载数据并分页。网上版本很多，但很多都是不能用或者不详细的，这里是已经验证过的。 引用 js文件 [removed][removed] [removed][removed] [removed][removed] 添加一个table 标签， 可以不用，可以动态加载 <
jQuery dataTables 的使用
xqqing79的专栏
10-28 897
  jQuery 的插件 dataTables 是一个优秀的表格插件，提供了针对表格的排序、浏览器分页、服务器分页、筛选、格式化等功能。dataTables 的网站上也提供了大量的演示和详细的文档进行说明，为了方便学习使用，这里一步一步进行说明。 首先，需要到 dataTables 的网站 http://www.datatables.net/ 下载这个脚本库， 目前最新的版本是 1....
datatables java 分页_DataTables后台分页的使用
weixin_30772189的博客
02-17 376
当然比如添加功能等功能的图标是用的font-awesome插件,详情请戳官网：点击这里这个demo是基于服务器端的，搜索和分页功能也是基于后台返回数据，这里只列出关键代码，具体情况需要根据你的后台代码再调整。1.jsp页面：表格的css只需要引用就可以了，都是自带的。 user_id user_name user_gender user_email user_phone user_addres...
使用datatable后台分页
°三度微凉的博客
03-18 9601
jQuery 的插件 dataTables 是一个优秀的表格插件，提供了针对表格的排序、浏览器分页、服务器分页、筛选、格式化等功能。dataTables 的网站上也提供了大量的演示和详细的文档进行说明，为了方便学习使用，这里一步一步进行说明。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值