AdminLTE組件之表格DataTable

html內容：

    <div class="box box-primary">
        <div class="box-header">
            <h3 class="box-title">表格大標題</h3>
        </div>
        <!-- /.box-header -->
        <div class="box-body">
            <table id="example1" class="table table-bordered table-striped">
                <thead>
                <tr class="text-center">
                    <th class="text-center">
                        <button type="button" class="btn btn-default btn-sm checkbox-toggle"><i
                                class="fa fa-square-o"></i></button>

                    </th>
                    <th class="text-center">列標題</th>
                    <th class="text-center">列標題</th>
                </tr>
                </thead>
                <tbody><tr>
                        <td class="text-center">內容</td>
                        <td class="text-center">內容</td>
                    </tr>

                </tbody>
                <tfoot>
                </tfoot>
            </table>
        </div>
        <!-- /.box-body -->
    </div>

js部分：

首先要引入AdminLTE的基本文件及表格有關的文件：

表格有關文件：

<!-- DataTables -->
<link rel="stylesheet"
      href="{% static '' %}AdminLTE-2.4.12/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
<script src="{% static '' %}AdminLTE-2.4.12/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="{% static '' %}AdminLTE-2.4.12/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>

 

js代碼方面：默認都是開啟，如果是向開啟，則需要進行設置。

        $(function () {
            $('#example1').DataTable({
                'paging': false, //關閉頁碼
                'lengthChange': false,//關閉每頁顯示多少個選項
                'info':false,//關閉頁碼底端信息
                'searching':false,//關閉搜索欄
                'ordering':false//關閉列排序
            });

 

由於頁面都是英文顯示，所以也可以對表格的字進行修改：

            $('#example1').DataTable(
                {
                    "pagingType": "full_numbers",  //顯示尾頁和首頁

                    "language": {
                        //"info": "當前第_PAGE_頁，共 _PAGES_頁",
                        "sInfo": "當前顯示第 _START_ 到第 _END_ 條，共 _TOTAL_ 條",
                        "sInfoFiltered": "(從_MAX_條篩選 )",
                        "sInfoEmpty": "共篩選到0條",
                        "sSearch": "搜索:",
                        "sLengthMenu": "每頁顯示 _MENU_ 條",
                        "sZeroRecords": "未篩選到相關內容",
                        "paginate": {
                            "sFirst": "首頁",  //首頁和尾頁必須在pagingType設為full_numbers時才可以
                            "sLast": "尾頁",
                            "sPrevious": "上一頁",
                            "sNext": "下一頁",
                            "first": "First page",
                            "last": "Last page",
                            "next": "Next page",
                            "previous": "Previous page"
                        }

                    }
                }
            );

        })

 更多參見：https://datatables.net/examples/styling/bootstrap.html