困扰了我一天的DataTable

来来来盖老师讲课了，不谈原理没那么牛逼，只说说自己日常使用的体会。

1.主体结构

var table = $('#dynamic-table').DataTable({

            // data: tableData.data,
            bAutoWidth: false,
            order:[],
            columns: [
                {
                    data: 'projectName',
                },
                {
                    render: function (data, type, row) {
                        var str = '<a href="javascript:void(0)" onclick="waybillDetails(\'' + row.orderId + '\',\'' + row.orderNo + '\')">' + row.orderNo + '</a>';
                        str += "<br />";
                        str += '[' + transformCorpStatusFromCode(row.corpStatus) + ']';
                        return str;
                    }
                },
                {
                    data: 'payOrderNo',
                    class:'center'
                },
                {
                    visible: false,
                    render: function (data, type, row) {
                        var str = '<a href="javascript:void(0)" onclick="driverDetails(\'' + row.driverID + '\',\'' + row.vehicleID + '\')">' + row.driverName + '<br>' + row.driverPhone + '<br>' + row.vehicleNO + '</a>';
                        return str;
                    }
                },
                {
                    visible: false,
                    render: function (data, type, row) {
                        return transformCorpStatusFromCode(row.corpStatus);
                    }
                },
                {
                    visible: false,
                    render: function (data, type, row) {
                        var str = '<a href="javascript:void(0)" onclick="onshowOrderTrackPage(\'' + row.orderNo + ',' + row.orderID + '\')">查看轨迹</a>';
                        return str;
                    }
                },
                {
                    data: 'payeeName',
                    render: function (data, type, row) {
                        var str = '<span>'+data+'</span></br>';
                        str += '<span>'+row.bankNo+'</span></br>';
                        str += '<span>'+row.bankName+'</span>';
                        return str;
                    }
                },
                {
                    data: 'payType',
                    "class": "center",
                    render: function (data, type, row) {
                        var html = "";
                        switch (data) {
                            case 1:
                                html += "预付";
                                break;
                            case 2:
                                html += "到付";
                                break;
                            case 3:
                                html += "回单付";
                                break;
                            default:
                                html += "其他";
                                break;
                        }
                        return html;
                    }
                }, {
                    data: 'payAmt',
                    class:'align-right',
                    render: function (data, type, row) {
                        var str = '运费:'+'<span class="red ">' + data.toFixed(2) + '</span><br>';
                            str += '实付:'+'<span class="red">' + row.realAmt.toFixed(2) + '</span>';
                        return str;
                    }
                }, {
                    data: 'approveStatus',
                    class:'center',
                    render: function (data, type, row) {
                        return transformApproveStatusFromCode(data);
                    }
                }, {
                    data: 'paymentNo',
                    class:'center',
                    render: function (data, type, row) {
                        var button;
                        button = "<button class='btn btn-link' onclick=\"receipt('" + row.orderId + "','" + row.sysNo + "')\">" + "详情" + "</a></button>";
                        button = "<button class='btn btn-link disabled'>详情</button>";
                        return button;
                    }
               
                }, {
                    data: "reason"
                },
                {
                    "orderable": false,
                    "class": "center",
                    "render": function (data, type, row, meta) {
                        return buttons;
                    }
                }
            ],
         
            "ajax": {
                "url":'',
                'method': 'GET',
                "dataType": "json",
                "error": unauthorizedHandler
            },
            //语言
            "language": {
            },
            /*  "select":'single', //行选择: single=单选, multi=多选 */
            "select": {
                style: 'multi',
                info: false
            },
            "processing": true,
            //每页显示的长度
            "lengthChange": true,
            "lengthMenu": [10, 25, 50],
            "paging": true,
            "pagingType": "full_numbers",//分页样式的类型
            "serverSide": false, //默认情况下是false,true指在服务端进行过滤、分页，计算等
            //布局: t=table, i=information, l=length, p=pagination r=processing
            "dom": "tirlp",
            "ordering": true,
            "drawCallback": function( settings ) {
            }

        });

上面是一个实例，相关属性不全部解释，百度上有很多。只说几个折磨人的。

"ordering": true

ordeing是这个控件排序功能的总开关，默认为true。估计有很多宝宝和我一样百度的时候发现有个叫bSort的东西也是排序功能的总开关。在这里我要说他们是一样的。具体可以看看API,或者源码。

"serverSide": false

serverSide是控制一些复杂的操作在哪进行。false在前台处理排序、分页，true在后台处理。默认为false。之前在开发的过程中这里遇到了坑，具体想要用DataTable实现点击表头TH进行排序的功能。但是一顿操作之后总是没有反应，网上也没人说怎么回事。这里我很负责任的说如果你使用DataTable控件的排序功能样式已经出现了，点击之后TH、TD也会添加相应的类名但就是数据不排序，那您不妨看看是不是这里的问题，换成false就好了。

orderable:false

这个属性也是控制排序的，谁叫我这几天就弄这个了呢。这个是单列排序的开关。默认为true

order:[[1,'asc']]

order不设置的情况下是有默认值的[[0，'asc']]，这里会有什么问题呢，有的时候你不想在第一排进行排序，比方说你第一排是checkbox那这时你肯定是不需要按照它去排序的。但是你会发现使用orderable:false设置之后还是有TH上小箭头，这就是默认值在做怪了，此时你只需把默认排序的换成别的行就好了。但这时问题又出现了，有的时候我们已经在SQL里进行了排序，我们当然不希望页面一开始就破坏这个顺序那该怎么办呢？办法也很简单只需要取消默认排序即可，order:[]这样就可以了。

2.回调函数

DataTable控件提供了一些回调函数可以做一下开放性的东西。函数很多不一一叙述，老规矩只说我用到过的两个。

1.initComplete函数

当表格完成加载绘制完成后执行此方法。说明：表格初始化是在ajax之前，所以这个回调是指在所有数据都加载完成后。上面官方api已经解释的很清楚了。当初用这货是因为需要对TH，TD设置不同的样式。不太清楚控件怎么实现设置class的功能的，但我只到你在columns里面设置class属性之后会影响到TH，比方说给TD设置了个右对齐会导致想要居中的TH也右对齐了，这显然不是我们想要的，所以在这个回调函数里重新设置了相应的类和样式。

2.drawCallback函数

起始版本号:1.10.0

api说明：Datatables每次重绘后执行的方法，当每次表格重绘的时候触发一个操作，比如更新数据后或者创建新的元素。

为什么使用它呢，因为上面那货虽然表面达到了要求但是一旦做一些别的操作就会露馅。

$("#dynamic-table").DataTable().ajax.url(url).load();

我们页面不可避免的需要做一些修改删除之类的操作，这时候调用上面的语句就会从新加载数据，你以为它会触发initComplete函数其实不然这货只调用一次那就是创建它的时候。所以我又选用了这个函数每次表格的数据更新都会调用。勉强算是实现了功能。

---------------------------------------------------学习不易，小白勿喷------------------------------------------------