前端制作表格神器 dataTable 基本用法

1、开始使用DataTables很简单，只需要引入两个文件， 一个css样式文件和DataTables本身的脚本文件。在DataTables CDN上，可以使用下面这两个文件： 

css  http://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css
js   http://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js

2、然后在初始化

$(document).ready(function(){
     $('#myTable').DataTable();
});
//这样就可以成功的创建了一个表格了

3、运用datatable是看中它的方便和它的功能　主要功能有【搜索、排序、显示条数、分页、固定头部、固定几列、打印、导出excel、导出pdf、导出图片、等】，那我们说说参数的

var table = $('#example').DataTable({
　　dom: 'Bfrtip',
    pageLength: 10,　//初始化显示几条数据
    fixedHeader: true,　//这个是用来固定头部
    fixedColumns:{ //这个是用来固定列的
      leftColumns: 0,
      rightColumns: 1
    },
    lengthMenu: [　//显示几条数据设置
        [5, 10, 20, -1],
        ['5 条', '10 条', '20 条', '全部']
    ],
    language: {　　// 这是修改语言的显示
        buttons: {
            pageLength: {
                _: "显示%d条",
                '-1': "全部显示"
            }
        },
        paginate: {
            first: "首条",
            previous: "前一页",
            next: "下一页",
            last: "末页"
        },
        "info": "第_PAGE_页,共_PAGES_页",
        "infoEmpty": "未找到相关数据",
        "search": "关键字",
        "zeroRecords": "未找到相关数据",
        "decimal": ".",
        "thousands": ","
    },
    buttons: [　　//按钮功能，这个里面包括导出，打印的设置　
        'pageLength',　//这个就是将显示几页变成按钮类型
        {
            text: '导出PDF',
            extend: 'pdfHtml5',
            exportOptions: {　//exportOptions这个是当点击导出是会触发的
                format: {　　//当在表格中有操作一列或想要去修改导出的数据，那么就在这个里面去修改导出的数据
                    header: function (data, column, node) {　//这个里面修改头部的数据，这个里面返回来的产数有　data 这个是表头的中的每一个th中的内容，column 这个是第几列，node 就是每个th的元素
                        var heads = new Array();
                        if (column != title_data.length - 1) {
                            heads.push(data);
                        }
                        return heads;　// return 返回的就是你想要显示的要的数据
                    },
                    body: function (data, row, column, node) {　//body 是修改的tbody 中的内容　，这个里面会多出一个　row 的参数　，这个参数就当前所在的行，其他的同上
　　　　　　　　　　       var texts = new Array();
                        if (column != title_data.length - 1) {
                            texts.push(data);
                        }
                        return texts;
                    }
                }
            },
            customize: function (doc) {　  //这个是用来设置你导出中添加一些其它信息　和　修改所导出的名称　
                var cols = [];
                cols[0] = {text:'第三方设备清单', alignment: 'center'};
                var objFooter = {};
                objFooter['columns'] = cols;
                doc['header']= objFooter;
                doc['content'][0].text = "";
            }
        },
        {
            text: "导出Excel",
            extend: 'excelHtml5',
            filename:" - 第三方设备清单",
            exportOptions: {
                format: {
                    header:function (data, column, node) {
                        var heads = new Array();
                        if(column != title_data.length-1){
                            heads.push(data);
                        }
                        return heads;
                    },
                    body: function (data, row, column, node) {
                        var texts = new Array();
                        if(column != title_data.length-1){
                            texts.push(data);
                        }
                        return texts;
                    }
                }
            },
            customize: function (win) {
                console.log(win);
                var sheet = win.xl.worksheets['sheet1.xml'];
                $('cols col', sheet).attr({'width':30});

            }
        }
    ],
    data:body_data,　//data　这个参数就是用来传入数据的　　body_data 就是json数据,这个还有ajax的方法
    columns: [　//这个是显示到界面上的个数据　格式为 {data:'显示的字段名'}
        {data:'name'},
        {data:'device_num'},
        {data:'device_brand'},
        {data:'device_function'},
        {data:'remarks'},
        {data:'operation', //每一个数据都是可以用来修改传入的参数　
            class:'text-center',
            render: function (data, type, row, meta){　// 这个就是用来修改产数的
                if(data.is_modify){
                    return '
修改' +
                        　　'删除
';
                }else{
                    return '无权限';
                }
            }
        }
    ]
});

４、datatable还有好多的功能，我只说了几个比较常用到的一些，如果想深入学习请移位

https://datatables.net

５、这上面介绍到了按钮中的功能，那就会用到一些扩展

<link rel="stylesheet" href="/cashflowmerger/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="/cashflowmerger/css/font-awesome.min.css">
<link rel="stylesheet" href="/cashflowmerger/css/daterangepicker.css">
<link rel="stylesheet" href="/cashflowmerger/css/buttons.bootstrap4.min.css">
<link rel="stylesheet" href="/cashflowmerger/css/buttons.dataTables.min.css">

<script src="/cashflowmerger/js/popper.min.js" >script>
<script src="/cashflowmerger/js/jquery.dataTables.min.js">script>
<script src="/cashflowmerger/js/dataTables.buttons.min.js">script>
<script src="/cashflowmerger/js/jszip.min.js">script>
<script src="/cashflowmerger/js/pdfmake.js">script>
<script src="/cashflowmerger/js/vfs_fonts.js">script>
<script src="/cashflowmerger/js/buttons.html5.js">script>
<script src="/cashflowmerger/js/moment.min.js">script>

6、修改 order.fixed 设置

1、首先需要添加一个js  dataTables.rowGroup.js
2、table.rowGroup().dataSrc(data_column);　//data_column 是想要定死排序的那一列
３、事件监听机制
table.on('rowgroup-datasrc',function(e,dt,val) {
       table.order.fixed({pre: [[ val, 'desc' ]]}).draw();
});

7、当数据更新时触发事件

$.fn.dataTable.ext.search.push(
        function( settings, data, dataIndex ) {
            var age = parseFloat( data[6] ) || 0;
            if( ( isNaN( min_data ) && isNaN( max_data ) ) ||
                ( isNaN( min_data ) && age <= max_data ) ||
                ( min_data <= age   && isNaN( max_data ) ) ||
                ( min_data <= age   && age <= max_data ) )
            {
                return true;
            }
            return false;
        }
);

 数据更新

table.draw();

注意  代码放到我的github上面了，这个里面还有包括解决pdf导出乱码的问题

//github 地址　
https://github.com/a-little-sheep/datatable/tree/master

 

转载于:https://www.cnblogs.com/a-flower-clover/p/8941023.html