DataTable表头对不齐、添加参数等方法总结

tableData：

一：写这篇博客是因为我在网上找到了改变行颜色，没有找到改变td颜色的改变文章，也许好多朋友早就找到了或感觉这个太简单,但不管怎样我还是写下了这篇没有技术含量的一篇。

前提：引入依赖文件

<link href="__PUBLIC__/html/css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">

<script src="__PUBLIC__/html/js/plugins/dataTables/jquery.dataTables.js"></script>
<script src="__PUBLIC__/html/js/plugins/dataTables/dataTables.bootstrap.js"></script>

　　

1.html内容：

　　1).第一种:title写到html中

　　2）第二种：title动态写入

　　

　　　　绑定数据时：

　　

2.js 绑定字段

　　tips:这两部分是我们页面中使用改动比较多的部分。

3.给每一行或指定的字段设置颜色等等

这段代码很简单，当然代码中的13要根据自己想要的效果去设置，但缺点是加载可能会延迟。

二、附上整体的代码

<table id="staff" class="table table-bordered table-hover table-striped">
       <thead>
            <tr>
                <th>合同编号</th>
                 <th>供方名称</th>
                  <th>供方地址</th>
                  <th>签订时间</th>
                  <th>签订地点</th>
                   <th>总金额</th>
                   <th>收货人</th>
                   <th>交货地点</th>
                   <th>收货电话</th>
                   <th>结算方式</th>
                   <th>供方法定代表</th>
                   <th>供方代表电话</th>
                   <th>供方代表传真</th>
                   <th>是否回传合同附件</th>
                   <th>订单状态</th>
                   <th>审核状态</th>
                 </tr>
             </thead>
          <tbody>
       </tbody>
</table>

 var table = $('#staff'). DataTable({
        ajax: {
            type: 'post',
            data: {
                flag: 1
            },
        },
        "scrollY": 440,
        "scrollX": false,
        "scrollCollapse": true,
        "destroy"      : true,
        "paging"       : true,
        "autoWidth"	   : false,
        "pageLength": 25,
        serverSide: true,
        // order:[[21, 'desc']],
        columns: [
            {searchable: true, data: 'contract_id'},
            {searchable: true, data: 'supplier_name'},
            {searchable: true, data: 'supply_address'},
            {searchable: true, data: 'signing_time'},
            {searchable: true, data: 'signing_place'},
            {searchable: false, data: 'total_amount'},
            {searchable: false, data: 'receiver'},
            {searchable: false, data: 'trading_location'},
            {searchable: true, data: 'receiving_phone'},
            {searchable: true, data: 'billing_method'},
            {searchable: true, data: 'supplier_representative'},
            {searchable: true, data: 'supplier_phone'},
            {searchable: true, data: 'supplier_fax'},
            {searchable: true, class:'suc' , data: 'is_return_contract', render: function (data){return ['否', '是'][+data]}},
            {searchable: true, data: 'order_status', render: function (data){return ['未生成订单','已生成订单','已生成订单','已生成订单','已生成订单'][+data]}},
            {searchable: true, data: 'audit_status', render: function (data){return ['新提交', '不合格','审核通过'][+data]}}
        ],
        'fnRowCallback':function(nRow,aData,iDisplayIndex,iDisplayIndexFull){
            /*
                nRow:每一行的信息 tr  是Object
                aData：行 index
            */
            for(let key in nRow){
                var ADataStatus = nRow['childNodes'][13].innerText
                if(ADataStatus == '否'){
                    $(nRow['childNodes'][13]).css("color",'red')
                }else if(ADataStatus == '是'){
                    $(nRow['childNodes'][13]).css("color",'green')

                }
            }

        },
　　　　　//或者是  （变色）

　　"columnDefs" : [ //自定义列

　　{

　　"targets" : 7,

　　"data" : "stock_out_status",

　　render : function(data, type, row) {

　　data = parseInt(data);

　　// var arr = ['未处理', '出库中', '出库完毕','未对接订单,无需处理'];

　　　　var html = "";

　　switch (data) {

　　case 0 :

　　　　html = "<span style='color:red'>";

　　　　　　break;

　　case 1 :

　　　　html = "<span style='color:blue'>";

　　　　　　break;

　　case 2 :

　　　　html = "<span style='color:green'>";

　　　　　　break;

　　　　default:

　　　　　　html = "<span>";

　　　　}

　　　　　　html += stockOutMap[data] + "</span>";

　　　　return html;

　　　　}

  },

        oLanguage: {
            "oAria": {
                "sSortAscending": " - click/return to sort ascending",
                "sSortDescending": " - click/return to sort descending"
            },
            "LengthMenu": "显示 _MENU_ 记录",
            "ZeroRecords": "对不起，查询不到任何相关数据",
            "EmptyTable": "未有相关数据",
            "LoadingRecords": "正在加载数据-请等待...",
            "Info": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录。",
            "InfoEmpty": "当前显示0到0条，共0条记录",
            "InfoFiltered": "（数据库中共为 _MAX_ 条记录）",
            "Processing": "<img src='../resources/user_share/row_details/select2-spinner.gif'/> 正在加载数据...",
            "Search": "搜索：",
            "Url": "",
            "Paginate": {
                "sFirst": "首页",
                "sPrevious": " 上一页 ",
                "sNext": " 下一页 ",
                "sLast": " 尾页 "
            }
        }
    })

三、效果截屏

　　Datatable小总结：

　　　　1>只刷新当前页表格：table.draw(false) ;

　　　　2>只刷表格：table.ajax.reload();

　　　　3>table请求路径和参数：

　　　　4>tablen内部分字段的映射另一种方法：

　　　　5>点击获取datatable当前行的数据：

　　　　6>关闭当前layer.open()页面：

 // layer.open页面关闭
var index=parent.layer.getFrameIndex(window.name);//获取窗口索引
parent.layer.close(index)

　　　　7>.实现layer.tips和达到一定字数出现...

{searchable: true, data: 'apply_reason',render:function (value,a, row) {
                if (value){
                    value =  value.replace(/\r\n|\n/g, '<br>')
                    var allData = table.data();
                    var index = allData.indexOf(row);
                    var className = 'complain_reason' + index;
                    var str = ''
                    if (value.length > 10){
                        str = value.slice(0, 10) + '...'
                    } else {
                        str = value
                    }
                    return "<span class='complain_reason' id='" + className + "'>" + str + "</span>"
                }
                return value
            }},

// layer tips
    $('#staff').on('mouseenter', 'td', function () {
        var that = $(this).children('span');
        if (that.hasClass('complain_reason') || that.hasClass('research') || that.hasClass('processes') || that.hasClass('processes_validity') || that.hasClass('liable')) {
            var data = table.cell(that.parents('td')).data()
            layer.tips(data, $(this), {time: 9999999})
        }

    })
    $('#staff').on('mouseleave', 'th', function () {
        layer.closeAll();
    })

　　　　8> 添加额外的参数

fnServerParams: function (aoData) {
       aoData['source_kind'] = select.value
},

//其中aoData是请求体，不变。fnServerParams是专门添加额外参数用的，这个函数和columns平级放置，至于放在哪儿无所谓。

　　　　9> 表头对不齐

　　表头莫名的错开了

　　

　　解决办法：

#productionPlan{
      width: 100% !important;
}

　　解决后的结果：

　　

　　　官网地址：http://www.datatables.club/