解決datatables在bootstrap模態框modal中表頭縮小問題
最近專案中需要在彈出框中整合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">×</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> 月記錄
</button>
<button type="button" class="btn btn-info"
onclick="searchNum('myselfRecordDay');">
<i class="icon-youtube"></i> 日記錄
</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();
});
searchNum('myselfRecordDay');
}
這樣表格。