前端制作表格神器　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 = "<?php echo $project; ?>";
            }
        },
        {
            text: "导出Excel",
            extend: 'excelHtml5',
            filename:"<?php echo $project; ?> - 第三方及附属设备清单",
            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 '<div class="operation_btn"><a target="_black" class="edit_content" data-type="edit" data-device="'+data.device_id+'" data-submission="'+ data.submission_id+'">修改</a>' +
                        　　'<a href="javascript:;" class="del_content" data-submission="'+ data.submission_id+'">删除</a></div>';
                }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>

注意这个里面还有包括解决pdf导出乱码的问题

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

猜你喜欢

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