其他分享
首页 > 其他分享> > 分页组件dataTable的用法

分页组件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