分页组件dataTable的用法

2021-06-07 12:52:33 阅读：329 来源： 互联网

标签：false 排序功能数据 data 用法组件每页 true dataTable

先导入三个必须的文件

<!-- DataTables CSS -->
    <link rel="stylesheet" type="text/css" href="jquery.dataTables.min.css">
    <!-- jQuery -->
    <script type="text/javascript" charset="utf8" src="jquery-3.2.1.min.js"></script>
    <!-- DataTables -->
    <script type="text/javascript" charset="utf8" src="jquery.dataTables.min.js"></script>

一些基础设置

“bPaginate”: true, //翻页功能
“bLengthChange”: true, //改变每页显示数据数量
“bFilter”: true, //过滤功能
“bSort”: false, //排序功能
“bInfo”: true,//页脚信息
“bAutoWidth”: true//自动宽度

"bProcessing": true,  //显示正在加载中
"searching": true,    // 显示搜索框
"aLengthMenu": [5, 25, 50],  //自定义列表
"sAjaxSource" :"/qytx-hotline/good/list_all.action", //url地址
//绑定字段
"columns": [
                { "defaultContent": "" },   //注意：当查出来的数据有的为null时，dataTable每次加载会弹窗警告，非常烦人，这个设置为空字符串，就不会警告了
                { "data": "id" },
                { "data": "name" },
                { "data": "goodNo" },
                { "data": "goodGroupId" },
                { "data": "type" },
                { "data": "specifications" },
                { "data": "unit" },
                { "data": "price" }
        ]
用后端来请求数据必须加下面代码：
"serverSide": true

这里写图片描述

然后看下面链接写的很详细

http://www.cnblogs.com/wang985850293/p/5610408.html

http://www.cnblogs.com/jobs2/p/3431567.html

脚本之家
http://www.jb51.net/article/100799.htm      //很详细

牛人博客很详细
http://blog.csdn.net/mickey_miki/article/details/8240477

分页信息显示中文

"oLanguage": {
            "sLengthMenu": "每页显示 _MENU_ 条记录",
            "sZeroRecords": "抱歉， 没有找到",
            "sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
            "sInfoEmpty": "没有数据",
            "sInfoFiltered": "(从 _MAX_ 条数据中检索)",
            "oPaginate": {
            "sFirst": "首页",
            "sPrevious": "前一页",
            "sNext": "后一页",
            "sLast": "尾页"
            },
            "sZeroRecords": "没有检索到数据",
            "sProcessing": "<img src='./loading.gif' />"
            }

自定义分页数量

"aLengthMenu": [5, 25, 50]

启动、禁止翻页功能

"bPaginate" : false, // 翻页功能

状态保存

"bStateSave" : true, // 状态保存

改变每页显示数据数量

"bLengthChange" : false, // 改变每页显示数据数量

显示页脚信息

"bInfo" : true,// 页脚信息

每页显示多少行

"iDisplayLength" : 15, // 每页显示多少行

设置请求方式

"sServerMethod" : "POST",

ajax请求

"sAjaxSource" : basePath + "crm/list_list.action",

当表格在处理的时候,花费的时间有点长（比如排序操作）是否显示“处理中…

"bProcessing":true

* 实现自定义排序功能*

"bSort" : false, // 排序功能

"aaSorting": [
                [ 0, "asc" ]        //意思是第0列按照升序排列，前提是排序功能必须打开
                [ 1 , "desc"]       //第1列按照降序排列，     可以设置多个列
            ],

使表格数据居中对齐

    //给表格加个样式即可
    <style>
        .display{
            text-align: center
        }
    </style>

隐藏指定的列

//意思是隐藏第0列和第一列
"aoColumnDefs": [
                { "bVisible": false, "aTargets": [ 0,1 ] }
            ]

自定义标签《超重要》

"columnDefs":[//列定义
                     {
                      "targets": [8],
                      "data": "deal",
                      "render": function (data, type, full) {
                          var HTML="<input type='checkbox' value='" + full.id + "' name='id'>";
                          return HTML
                      }
              }]

附一张刚刚测试成功的demo
js代码：

    $(document).ready( function () {
        $('#myTable').DataTable({
            'bServerSide' : true,
            "bProcessing": true,
            "searching": true,
            "oLanguage": {
            "sLengthMenu": "每页显示 _MENU_ 条记录",
            "sZeroRecords": "抱歉， 没有找到",
            "sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
            "sInfoEmpty": "没有数据",
            "sInfoFiltered": "(从 _MAX_ 条数据中检索)",
            "oPaginate": {
            "sFirst": "首页",
            "sPrevious": "前一页",
            "sNext": "后一页",
            "sLast": "尾页"
            },
            "sZeroRecords": "没有检索到数据",
            },
            "aLengthMenu": [5, 25, 50],
            "bSort" : false, // 排序功能
            "bFilter" : false, // 过滤功能
            "bAutoWidth" : false,// 自动宽度
            "sPaginationType": "full_numbers",
            "sServerMethod" : "POST",
            "sAjaxSource" :"/qytx-hotline/good/list_all.action",
            "columns": [

                        { "data": "id" },
                        { "data": "name" },
                        { "data": "goodNo" },
                        { "data": "goodGroupId" },
                        { "data": "type" },
                        { "data": "specifications" },
                        { "data": "unit" },
                        { "data": "price" },
                        { "data": "deal" }
                    ],
                    "columnDefs":[//列定义
                     {
                      "targets": [8],
                      "data": "id",
                      "render": function (data, type, full) {
                          return "<a href='/qytx-hotline/good/update.action?id=" + full.id + "'>修改</a>   <a href='/qytx-hotline/good/delete.action?id="+full.id +"'>删除</a>";
                      }
                     }]



        });
    } );

    "sAjaxSource" : basePath + "crm/list_list.action",
        "sServerMethod" : "POST",
        "sPaginationType" : "full_numbers",
        "bPaginate" : true, // 翻页功能
        "bStateSave" : true, // 状态保存
        "bLengthChange" : false, // 改变每页显示数据数量
        "bFilter" : false, // 过滤功能
        "bSort" : false, // 排序功能
        "bInfo" : true,// 页脚信息
        "bAutoWidth" : false,// 自动宽度
        "bDestroy" : true,//用于当要在同一个元素上履行新的dataTable绑订时，将之前的那个数据对象清除掉，换以新的对象设置
        "iDisplayLength" : 15, // 每页显示多少行

标签：false,排序功能,数据,data,用法,组件,每页,true,dataTable
来源： https://blog.51cto.com/u_12784254/2875320

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

分页组件dataTable的用法