码迷,mamicode.com
首页 > 其他好文 > 详细

AdminLTE组件之表格DataTable

时间:2019-09-24 08:22:47      阅读:367      评论:0      收藏:0      [点我收藏+]

标签: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






























 

AdminLTE组件之表格DataTable

标签:class   aging   strip   prim   sheet   stripe   first   默认   foo   

原文地址:https://www.cnblogs.com/ohahastudy/p/11576157.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!