zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    Java NIO学习(Path接口、Paths和Files工具类的使用)
    Java 实现文件复制的不同方法
    Java NIO学习
    Properties工具类学习
    RandomAccessFile类学习
    Java管道流学习
    Java字符串流学习
    word里输入英文字母间距变宽,字体改变,怎么回事?
    js 和 css 中 不能使用 jsp 页面中一些 标签 和 java 代码等,应注意
    url地址 参数 带 参数 注意事项 , chain , redirect , redirectAction
  • 原文地址:https://www.cnblogs.com/ohahastudy/p/11576157.html
Copyright © 2011-2022 走看看