背景：
昨天寫了一個頁面用於規則庫的增刪改查。
數據使用datatables渲染，后端返回數據由前端進行一次性渲染和分頁。
隱藏列：
排序的ID不展示，但是排序又想按照ID來排，所以把ID單獨作為一列，按照ID列排序，再隱藏掉。
//排序部分
"order": [[0, "asc"]],
//隱藏部分
"columnDefs": [ { "visible": false, "targets": 0 } ]
這樣就按照ID排序而又不顯示ID。
createdRow渲染bootstrapSwitch：
"createdRow": function (row, data, index) {
$('#mySwitch input').bootstrapSwitch({ }); },
在datatables每完成一次tr代碼轉換后，渲染一遍按鈕bootstrapSwitch。
成因：
渲染按鈕的時候，是對該頁面的所有按鈕進行渲染。
datatables進行tr的轉換，是一行一行地轉換代碼。
當轉換了第一行代碼時，第一行的id列被隱藏掉，所以第一行按鈕所在的td寬度會比其他行的寬度都長；這個時候對該表單中所有按鈕都進行渲染，第一行按鈕的寬度會比其他行按鈕的寬度都大。
轉換到第二行的時候，再進行所有按鈕的渲染，這時候按鈕已被bootstrapSwitch渲染過，無法二次渲染。
ps：因為外部寬度增大而按鈕寬度不變，bootstrapSwitch按鈕多了一點間隙。
現象：
表單中ID首位的行中的按鈕比其他行的寬，不管按照什么排序；
不進行隱藏，則沒有這個BUG。
這樣比較難定位，排除了css、JS加載缺失的原因，這其中關聯datatables內部的渲染過程，而現象又詭異。
最后用console.log將createdRow每次轉換后的代碼跟蹤一遍，解決問題。
解決：
createdRow中不渲染所有按鈕，而只渲染當前 tr 的按鈕。
"createdRow": function (row, data, index) {
$(row).find('#mySwitch').children('input').bootstrapSwitch({ }); },