前端制作表格神器 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>

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