AdminLTE组件之表格DataTable

Posted 2022-11-27 ohahastudy

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