jquery data-table简单使用

$(function () {


        $("#table1").DataTable({
            searching: false,                               // 是否允许检索
            ordering: false,                                // 是否允许排序
            //"order": [[0,'asc'],[1,'desc']],              // 初期排序列
            info: false,                                    // 是否显示情报 就是"当前显示1/100记录"这个信息
            paging: true,                                   // 是否允许翻页，设成false，翻页按钮不显示
            scrollX: false,                                 // 水平滚动条
            scrollY: false,                                 // 垂直滚动条
            lengthChange: false,                            // 件数选择功能 默认true
            lengthMenu: [10, 25, 50, 75, 100],              // 件数选择下拉框内容
            pageLength: 50,                                 // 每页的初期件数 用户可以操作lengthMenu上的值覆盖
            pagingType: "full_numbers",                     //翻页按钮样式
                                                            // numbers:数字
                                                            // simple:前一页，后一页
                                                            // simple_numbers:前一页，后一页，数字
                                                            // full:第一页，前一页，后一页，最后页
                                                            // full_numbers:第一页，前一页，后一页，最后页，数字
                                                            // first_last_numbers:第一页，最后页，数字


            //stripeClasses: ['strip1', 'strip2', 'strip3'],// 行样式应用 指定多个的话，第一行tr的class为strip1，第二行为strip2，第三行为strip3.
                                                            // 第四行以后又开始从strip1循环。。。 如果想指定成斑马条状，这里的class必须指定为2个。


            autoWidth: true,                                // 自动列宽
            processing: true,                               // 是否表示 "processing" 加载中的信息，这个信息可以修改
            destroy: false,                                 // 每次创建是否销毁以前的DataTable,默认false
            dom: 'lrtip',                                   // 控制表格各种信息的表示位置（比较复杂） 默认:lfrtip
                                                            // 具体参考：https://datatables.net/reference/option/dom
            language: {
                processing: "DataTables is currently busy",
                lengthMenu: "Display _MENU_ records",
                info: "Showing page _PAGE_ of _PAGES_",
                                                             // 当前页显示多少条
                                                             // _START_（当前页的第一条的序号） ,
                                                             // _END_（当前页的最后一条的序号）,
                                                             // _TOTAL_（筛选后的总件数）,
                                                             // _MAX_(总件数),
                                                             // _PAGE_(当前页号),
                                                             // _PAGES_（总页数）
                emptyTable: "No data available in table",    // 没有数据的显示（可选），如果没指定，会用zeroRecords的内容
                zeroRecords: "No records to display",        // 筛选后，没有数据的表示信息，注意emptyTable优先级更高
                //thousands: "'",                            // 千分位的符号，只对显示有效，默认就是","  一般不要改写
                //decimal: "-",                              // 小数点位的符号，对输入解析有影响，默认就是"." 一般不要改写
                paginate: {                                  // 翻页按钮文字控制
                    "first": "First page",
                    "last": "Last page",
                    "next": "Next page",
                    "previous": "Previous page"
                },
                //loadingRecords: "Please wait - loading..."  // Client-Side用，Server-Side不用这个属性
            },
            //deferRender: false,                             // 默认是false 如果设为true，将只渲染当前也的html，速度会很快，但是通过API就访问不到所有页的数据，有利有弊
            serverSide: true,                                 // 服务器端处理方式
                                                              // ajax选项 可以直接简单指定成请求的文件 "ajax": "data.json", 也可以用对象来配置，更加灵活
            ajax: {
                url: "data.json",
                type: 'POST',
                data: function (param) {                       // 传给服务器的数据，可以添加我们自己的查询参数


                    return param;
                },
                dataSrc: function (myJson) {                   //用于处理服务器端返回的数据。 dataSrc是DataTable特有的
                    if (myJson.timeout) {
                        return "";
                    }
                    return myJson;
                }
            },


            //rowId: 'staffId',                                 //指定用于行ID的属性名 默认是：DT_RowId
            columns: [
                {
                    data: "WORKTM1",                            // data 可以是属性名，或嵌套属性（WORKTM1.ID）,数组ArrOne[,] 用中括号中的字符连接数组后返回。
                    className: "dt-body-right",                 // 这里的class会应用到td上面
                    width: 40,                                  // 列宽
                                                                // 很灵活，描绘每个单元格
                                                                // data：当前cell的data，这个data和type有关
                                                                // type：filter,display,type,sort
                                                                // row:当前行数据  // https://datatables.net/reference/option/columns.render
                    render: function (data, type, row, meta) {
                        return type === 'display' && data.length > 40 ?
                            '<span title="' + data + '">' + data.substr(0, 38) + '...</span>' : data;


                    },
                    orderable: false,                            // 是否可排序 默认值：true
                    //orderData: [0, 1],                         // 指定当前列排序操作的时候，用哪一列（几列）的数据进行真正的排序（通常是隐藏的）
                    //orderDataType: "dom-text",                 // 这个属性 和type属性相似，指定排序时候这一列该怎么转换数据, 需要用到其他的插件 详细： https://datatables.net/plug-ins/sorting/
                    //visible: false,                            // 是否显示当前列 默认值：true
                    searchable: false,                           // 是否允许搜索此列 默认值：true


                    //type: "html",
                                                                 //这个属性仅Client-Side有效， Server-Side在服务器端排序
                                                                 //主要用于排序和筛选，指定当前列作为什么类型进行解析
                                                                 //内置值：date，num，num-fmt，html-num，html-num-fmt，html，string
                                                                 // 还可以用其他插件提供的类型 ：详细： https://datatables.net/plug-ins/sorting/
                                                                 // 有html开头的，都会讲html标签先移除后进行数据处理


                    //title: "My column title",                    // 列头文字，如果没有指定thead，则会生成。如何指定了thead，则会覆盖当前列头文字
                    defaultContent: "--",                        // defaultContent:默认值，属性值为null或undefined就会用这个值
                    cellType: "td",                              // 单元格类型："th","td"


                                                                  // 单元格创建完后的回调，可以作为render的补充
                                                                  // cell:TD的dom
                                                                  // cellData:原始的单元格数据，如何render中进行了格式化，用$(cell).html()来取格式化后的数据
                                                                  // rowData:行数据
                                                                  // row:行号
                                                                  // col:列号
                    createdCell: function (cell, cellData, rowData, row, col) {


                    }
                },
                {"data": "WORKTM2", "className": "dt-body-right", "width": 40},
                {"data": "WORKTM3", "className": "dt-body-right", "width": 40},
                {"data": "WORKTM4", "className": "dt-body-right", "width": 40},
                {"data": "RESTDAY1", "className": "dt-body-right", "width": 40},
                {"data": "RESTDAY2", "className": "dt-body-right", "width": 40},
                {"data": "RESTDAY3", "className": "dt-body-right", "width": 40},
                {"data": "RESTDAY4", "className": "dt-body-right", "width": 40},
                {"data": "RESTDAY5", "className": "dt-body-right", "width": 40}
            ],
                                                                    // 和上面的columns类似，columns可以定义的属性，都可以在这里定义，
                                                                    // 另外增加targets属性用于指定列范围（可以多列）
                                                                    // 优先级：上面的columns高于columnDefs
            columnDefs: [
                {
                    targets: [0, 2],
                    render: function (data, type, row, meta) {
                        if (type === 'display') {
                            var ctemp = $(".dayinfo").children().eq(meta.col).attr("class");
                            var cname = ctemp ? ctemp : "";
                            var readonly = $(".dayinfo").children().eq(meta.col).attr("data-fixed") == "fixed" ? "readonly" : "";
                            return '<input type="input" class="form-control dt-body-center ' + cname + '" ' + readonly + ' value="' + data + '">';
                        }
                        return data;
                    },
                }],
            
                                                                    // 每一行创建完调用的函数
            createdRow: function (row, data, dataIndex) {
                // row : tr dom
                // data: row data
                // dataIndex:row data's index
                if (data[4] == "A") {
                    $(row).addClass('important');
                }
            },
            
                                                                    // 每一行被创建，但还没有被加载到document中，这个函数优先于createdRow
                                                                    // 个人觉得用createdRow更好
            rowCallback: function (row, data, index) {
                // row : tr dom
                // data: row data
                // index:row data's index
                if (data[4] == "A") {
                    $('td:eq(4)', row).html('<b>A</b>');
                }
            },
            
                                                                    //thead被描画后调用
            headerCallback: function (thead, data, start, end, display) {
                //thead:dom， data:原始的datatable数据，display：当前显示排序好的datatable数据（有可能经过排序）
                // start end ：当前dispaly数据的开始结束序号
                $(thead).find('th').eq(0).html('Displaying ' + (end - start) + ' records');
            },
            
                                                                    // tfoot被描画后调用，通常可用于计算合计值
            footerCallback: function (tfoot, data, start, end, display) {
                //tfoot:dom， data:原始的datatable数据，display：当前显示排序好的datatable数据（有可能经过排序）
                // start end ：当前dispaly数据的开始结束序号
                var api = this.api();
                $(api.column(5).footer()).html(
                    api.column(5).data().reduce(function (a, b) {
                        return a + b;
                    }, 0)
                );
            },
            
                                                                    // 初始化，描画都已经完成，常用于ajax
            initComplete: function (settings, json) {
                $('div.loading').remove();
            },
            
                                                                    // 每次DataTable描画后都要调用，调用这个函数时，table可能没有描画完成，
                                                                    // 所以不要在里面操作table的dom，要操作dom应放在initComplete
            drawCallback: function (settings) {
                var api = this.api();


                // Output the data for the visible rows to the browser's console
                console.log(api.rows({page: 'current'}).data());
            },
            
                                                                    // 这个函数可以改写数字的格式化方式
                                                                    // 默认DataTable用 language.thousands来解析数字，“，”
            formatNumber: function (toFormat) {
                return toFormat.toString().replace(
                    /\B(?=(\d{3})+(?!\d))/g, "'"
                );
            }
        });
    });