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/