标签:class aging strip prim sheet stripe first 默认 foo
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
标签:class aging strip prim sheet stripe first 默认 foo
原文地址:https://www.cnblogs.com/ohahastudy/p/11576157.html