<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.12/js/jquery.dataTables.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<div class="container">
<div class="row">
<h2 class="text-center">自動分頁、搜尋表格</h2>
<table class='table table-hover' id="myTable">
<thead>
<tr class="table-title-btm">
<th >訂單</th>
<th >日期</th>
<th >狀態</th>
<th >總計</th>
<th ></th>
</tr>
</thead>
<tbody>
<tr>
<td data-th="訂單">#01312</td>
<td data-th="日期">2016-08-22</td>
<td data-th="狀態">完成</td>
<td data-th="總計">NT$2580元x5件商品</td>
<td data-th=""><a class="btn btn-primary btn-block" href="order_detail">查看</a></td>
</tr>
<tr>
<td data-th="訂單">#01346</td>
<td data-th="日期">2016-08-21</td>
<td data-th="狀態">完成</td>
<td data-th="總計">NT$2580元x5件商品</td>
<td data-th=""><a class="btn btn-primary btn-block" href="#">查看</a></td>
</tr>
<tr>
<td data-th="訂單">#01345</td>
<td data-th="日期">2016-08-22</td>
<td data-th="狀態">完成</td>
<td data-th="總計">NT$2580元x5件商品</td>
<td data-th=""><a class="btn btn-primary btn-block" href="#">查看</a></td>
</tr>
<tr>
<td data-th="訂單">#01376</td>
<td data-th="日期">2016-08-22</td>
<td data-th="狀態">完成</td>
<td data-th="總計">NT$2580元x5件商品</td>
<td data-th=""><a class="btn btn-primary btn-block" href="#">查看</a></td>
</tr>
</tbody>
</table>
</div>
</div>
.dataTables_wrapper .dataTables_paginate .paginate_button {
padding: 0;
}
#myTable_filter, #myTable_paginate{
float: right;
}
$(document).ready(function(){
$('#myTable').DataTable({
"order": [], //初始化排序
"searching": true, //允許查詢
language: {
"sProcessing": "處理中...",
"sLengthMenu": "顯示 _MENU_ 筆資料",
"sZeroRecords": "查無資料",
"sInfo": "顯示第 _START_ 至 _END_ 筆資料，共 _TOTAL_ 筆",
"sInfoEmpty": "显示第 0 至 0 筆資料，共 0 筆",
"sInfoFiltered": "(由 _MAX_ 筆資料查詢)",
"sInfoPostFix": "",
"sSearch": "搜尋:",
"sUrl": "",
"sEmptyTable": "無資料",
"sLoadingRecords": "讀取中...",
"sInfoThousands": ",",
"oPaginate": {
"sFirst": "第一頁",
"sPrevious": "上一頁",
"sNext": "下一頁",
"sLast": "最終頁"
},
"oAria": {
"sSortAscending": ": 升冪",
"sSortDescending": ": 降冪"
}
}
});
});
