"自動分頁、搜尋表格"
Bootstrap 3.3.0 Snippet by taironlife

<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": ": 降冪" } } }); });

Related: See More


Questions / Comments: