最近專案中需要在彈出框中整合datatables，整個專案框架用的bootstrap，使用者點選按鈕時，彈出模態框，模態框中的datatables自動載入資料。

模態框程式碼：我調整了模態框的寬度

<div class="modal fade" id="record_modal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true"
style="margin-top: 50px;">
<div class="modal-dialog" style="width: 800px;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">&times;</button>
<h4 class="modal-title" id="myModalLabel"><strong>記錄統計</strong></h4>
</div>
<div class="modal-body">
<div style="float: right; margin-right: 10px;">
<button type="button" class="btn btn-warning"
onclick="searchNum('myselfRecordMonth');">
<i class="icon-youtube-sign"></i>&nbsp;月記錄
</button>
<button type="button" class="btn btn-info"
onclick="searchNum('myselfRecordDay');">
<i class="icon-youtube"></i>&nbsp;日記錄
</button>
</div>
</div>

<div style="padding: 20px;" id="tableLayout">

                                 //表格的width屬性必須新增，否則表頭會縮小

<table  class="bordered" id="record" style="width: 100%;">
<thead>
<tr>
<th style="width: 150px; text-align: center;">時間</th>
<th style="width: 150px; text-align: center;">成功傳送數</th>
<th style="width: 150px; text-align: center;">失敗傳送數</th>
<th style="width: 150px; text-align: center;">未傳送數</th>
</tr>
</thead>
</table>
</div>
<div class="modal-footer"></div>
</div>
</div>

</div>

datatables初始化程式碼：

function searchNum(url) {
record = $('#record').DataTable({
searching : false,
ordering : false,
processing : true,
bLengthChange : false,
iDisplayLength : 5,
destroy : true,
serverSide : true,
ajax : {
url : '/sms/' + url,
type : "post",
async : true,
type : "post"
},
columns : [ {
"data" : "time",
"sClass" : "text-center"
}, {
"data" : "success",
"sClass" : "text-center"
}, {
"data" : "fail",
"sClass" : "text-center"
}, {
"data" : "notSend",
"sClass" : "text-center"
} ]
});

}

使用者點選按鈕時，模態框彈出：

function showModal() {

//調整模態框中datatables的表頭縮小問題 ，注意下面on方法傳入的引數是modal的id
$(document).on('record_modal', function (e) {
      $.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
});

$("#record_modal").modal('show');
searchNum('myselfRecordDay');

}

這樣表格。