datatables使用大法（再笨也能搞定datatables使用了）

最新推荐文章于 2024-09-07 10:11:42 发布

我是罗易呀！

最新推荐文章于 2024-09-07 10:11:42 发布

阅读量1.9k

点赞数

分类专栏：个人笔记前端技术

本文链接：https://blog.csdn.net/Qcg0223/article/details/104195280

版权

个人笔记同时被 2 个专栏收录

77 篇文章 3 订阅

订阅专栏

前端技术

14 篇文章 0 订阅

订阅专栏

一、简介

传送门。。。

官网：https://datatables.net/
中文官网：http://datatables.club/

Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。

二、使用

1、引入相关js和css文件


<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>

2、快速使用

准备html数据

<table class="table table-striped table-bordered table-hover table-checkable dataTables order-column">
    <thead>
    <tr>
        <th>
            <input type="checkbox" class="group-checkable" data-set=".dataTables .checkboxes" /> </th>
        <th> 日期 </th>
        <th> 姓名 </th>
        <th> 科室 </th>
        <th> 操作员 </th>
        <th> 操作 </th>
    </tr>
    </thead>
    <tbody>
    <tr role="row" class="odd">
        <td>1</td>
        <td>20200303</td>
        <td>金武x</td>
        <td>心内科</td>
        <td>严xx</td>
        <td>
            <a class="btn btn-xs red btn-circle btn-outline see"><i class="fa fa-search"></i> 查看</a>
            <button  class="btn btn-xs blue btn-circle btn-outline edit-row"><i class="fa fa-pencil"></i> 修改</button>
        </td>
    </tr>
    <tr role="row" class="odd">
        <td>2</td>
        <td>20200304</td>
        <td>金武x</td>
        <td>心内科</td>
        <td>严xx</td>
        <td>
            <a class="btn btn-xs red btn-circle btn-outline see"><i class="fa fa-search"></i> 查看</a>
            <button  class="btn btn-xs blue btn-circle btn-outline edit-row"><i class="fa fa-pencil"></i> 修改</button>
        </td>
    </tr>
    <tr role="row" class="odd">
        <td>3</td>
        <td>20200305</td>
        <td>金武x</td>
        <td>心内科</td>
        <td>严xx</td>
        <td>
            <a class="btn btn-xs red btn-circle btn-outline see"><i class="fa fa-search"></i> 查看</a>
            <button  class="btn btn-xs blue btn-circle btn-outline edit-row"><i class="fa fa-pencil"></i> 修改</button>
        </td>
    </tr>
    <tr role="row" class="odd">
        <td>6</td>
        <td>20200306</td>
        <td>金武x</td>
        <td>心内科</td>
        <td>严xx</td>
        <td>
            <a class="btn btn-xs red btn-circle btn-outline see"><i class="fa fa-search"></i> 查看</a>
            <button  class="btn btn-xs blue btn-circle btn-outline edit-row"><i class="fa fa-pencil"></i> 修改</button>
        </td>
    </tr>
   </tbody>
</table>

3、初始化Datatables

//datatable初始化功能
    $(function() {
        //datables初始化
        var datatable = $('.dataTables').dataTable();
    });

4、效果

在这里插入图片描述

5、显示结果汉化

js汉化语法

//datatable初始化功能
    $(function() {
        //datables初始化
        var datatable = $('.dataTables').dataTable(
            {
                //定义中文样式
                language: {
                    "sProcessing": "处理中...",
                    "sLengthMenu": "每页显示 _MENU_ 条结果",
                    "sZeroRecords": "没有匹配结果",
                    "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                    "sInfoEmpty": "显示第 0 至 0 页结果，共 0 项",
                    "sInfoFiltered": "(由 _MAX_ 条结果过滤)",
                    "sInfoPostFix": "",
                    "sSearch": "搜索:",
                    "sUrl": "",
                    "sEmptyTable": "表中数据为空",
                    "sLoadingRecords": "载入中...",
                    "sInfoThousands": ",",
                    "oPaginate": {
                        "sFirst": "首页",
                        "sPrevious": "上页",
                        "sNext": "下页",
                        "sLast": "末页"
                    }
                }
            }
        )
    });

展示效果

三、常用参数

order

应用于表的初始顺序（排序）

# 参数1 列索引按顺序排列 从0开始 
# 参数2 排序的规则
"order": [[ 1, "asc/desc" ],...]

在这里插入图片描述

stateSave

状态保存 - 页面重新加载时恢复表状态
启用或禁用状态保存。启用后，DataTables将存储状态信息，例如分页位置，显示长度，过滤和排序。当最终用户重新加载页面时，表的状态将被更改以匹配他们之前设置的状态。

# 默认值 false
stateSave: true/false

columnDefs

设置列定义初始化属性
此参数允许您为表中的列指定特定选项，但在这种情况下，定义的列选项可应用于一个或多个列

columnDefs:[
    # 设置第一列和第六列不排序
    {targets:[0,5],orderable:false}
]

在这里插入图片描述

lengthMenu

定义在每页显示记录数的select中显示的选项

 lengthMenu: [3, 8], //每页显示数量下拉框选项

在这里插入图片描述

searching

是否允许Datatables开启本地搜索 true/false

默认：true

在这里插入图片描述

ordering

是否允许Datatables开启排序 true/false

默认：true

processing

是否显示正在处理的状态 true/false

默认：false

四、datatables获取服务端数据

这才是重点。。。。服务端分页，无刷新统计。

1、先看效果

在这里插入图片描述

HTML结构

<table class="table table-striped table-bordered table-hover table-checkable dataTables order-column">
    <thead>
    <tr>
        <th>
            <input type="checkbox" class="group-checkable" data-set=".dataTables .checkboxes" /> </th>
        <th> 日期 </th>
        <th> 姓名 </th>
        <th> 科室 </th>
        <th> 知晓 </th>
        <th> 满意度 </th>
        <th> 出院诊断 </th>
        <th> 电话 </th>
        <th> 回访人 </th>
        <th> 操作 </th>
    </tr>
    </thead>
    <tbody> 
       
   </tbody>
</table>

1、js客户端配置

 // datatables初始化
    var datatable = $('.dataTables').dataTable({
        language: {
            "sProcessing": "数据加载中...",
            "sLengthMenu": "每页显示 _MENU_ 条结果",
            "sZeroRecords": "没有匹配结果",
            "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
            "sInfoEmpty": "显示第 0 至 0 页结果，共 0 项",
            "sInfoFiltered": "(由 _MAX_ 条结果过滤)",
            "sInfoPostFix": "",
            "sSearch": "搜索:",
            "sUrl": "",
            "sEmptyTable": "表中数据为空",
            "sLoadingRecords": "载入中...",
            "sInfoThousands": ",",
            "oPaginate": {
                "sFirst": "首页",
                "sPrevious": "上页",
                "sNext": "下页",
                "sLast": "末页"
            }
        },
        // 以第2列为初始排序
        order: [[1, 'desc']],
        // 设置 第1列和最后一列不排序
        columnDefs: [
            // 第1列和第11列不排序 因为索引是从0开始
            {targets: [0,10], orderable: false}
        ],
        // 下拉分页数
        bLengthChange: false,//关闭下拉选项
        lengthMenu: [10, 15, 20],
        // 客户搜索隐藏
        searching: false,
        // 在ajax请求数据量给客户的一个提示
        processing: true,
        // 开启服务器模式
        serverSide: true,
        // ajax发起请求
        ajax: {
            // 请求地址
            url: '/admin/hfb/list',
            // 请求方式 get/post
            type: 'post',
            headers: {
                'X-CSRF-TOKEN': '{{csrf_token()}}'
            },
            // 请求的参数
            // 两者写法效果一致  但是它用于搜索
            // 如果只有一个参数的时候，可以不写小括号
            data: d => {
            // d._token = '{{ csrf_token() }}';
            //获取input框中条件值作为查询条件参数
            d.date_due = $('#reservation').val();
		    d.sXM = $('#inp-sXM').val();
		    d.sZYH = $.trim($('#inp-sZYH').val());
		    d.sBRBMMC = $.trim($('#inp-sBRBMMC').val());
		    d.revisit_user = $.trim($('#inp-revisit_user').val());
		    d.sZYH = $.trim($('#inp-sZYH').val());
		    d.revisit = $('input:checkbox[name="revisit"]:checked').val();
		    d.has_suggest = $('input:checkbox[name="has_suggest"]:checked').val();
		    d.mark2 = $('input:checkbox[name="has_mark"]:checked').val();
    //d=$('#hfb-form').serialize();
}
},
    // 规则每列是如何来显示对于没有对应字段的列需要设置默认值
    columns: [
    	//对于不需要设置的列胡乱起个名字并设置一个默认值如第一列aa和最后一列ii
        {data: 'aa',defaultContent:''},
        {data: 'revisit_time'},
        {data: 'sXM'},
        {data: 'sBRBMMC'},
        {data: 'is_known_doctor'},
        {data: 'is_support_doctor'},
        {data: 'sCYZDMC'},
        {data: 'has_suggest'},
        {data: 'telphone'},
        {data: 'revisit_user'},
        {data: 'ii',defaultContent: ''}

    ],
        // createRow方法用于自定义表格内容样式设置
        // row 当前行的dom对象  jquery对象$(row)
        // data 当前的数据
        // dataIndex当前数据的索引
        createdRow(row, data){
        // 全选复选框
        var html = '<input type="checkbox" name="ids[]" value="'+data.id+'" class="checkboxes">';
        //自定义第一列自定义td内容
        $(row).find('td:eq(0)').html(html);        
        html = '<a title="" data-title="'+htm+'" href="javascript:;" class="btn btn-xs red btn-circle btn-outline see"><i class="fa fa-search"></i> 查看<a><button title="" data-id="'+data.id+'"  class="btn btn-xs blue btn-circle btn-outline edit-row"><i class="fa fa-pencil"></i> 修改</button>';
        //设置第11列自定义td内容
        $(row).find('td:eq(10)').html(html);
    }
});

2、后台数据返回

/*
服务端返回格式务必按照如下样式返回。
draw: 客户端调用服务器端次数标识
recordsTotal: 获取数据记录总条数
recordsFiltered: 数据过滤后的总数量
data: 获得的具体数据
注意：recordsTotal和recordsFiltered都设置为记录的总条数
*/
$result = [
   'draw' 		 	 => $request->get('draw'),
   'recordsTotal' 	 => $count,
   'recordsFiltered' => $count,
   'data'			=> $data
];
return json_encode($result);

3、搜索查找

// 点击搜索让datatable加载一次 
$('#inp-submit').click(() => {
    datatable.api().ajax.reload();
});

我是罗易呀！

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录