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"><iclass="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

轉載于:https://www.cnblogs.com/ohahastudy/p/11576157.html

總結

以上是生活随笔為你收集整理的AdminLTE组件之表格DataTable的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。