zoukankan      html  css  js  c++  java
  • metronic 表格插件 datatables

    官方网站:https://datatables.net/

    css引入:datatables.min.css  &&  datatables.bootstrap.css  &&  bootstrap-datepicker3.min.css

    j s 引入:datatable.js  &&  datatables.min.js  &&  datatables.bootstrap.js

    html代码:

    <table class="table table-striped table-bordered table-hover table-checkable order-column" id="datatable_orders"></table>
    

      

    初始化:

    var initTable1 = function () {
    var table = $('#datatable_orders');//table ID
    
    var oTable = table.dataTable({
    "language": {
    "aria": {
    "sortAscending": ": activate to sort column ascending",
    "sortDescending": ": activate to sort column descending"
    },
    "emptyTable": "No data available in table",
    "info": "Showing _START_ to _END_ of _TOTAL_ entries",
    "infoEmpty": "No entries found",
    "infoFiltered": "(filtered1 from _MAX_ total entries)",
    "lengthMenu": "_MENU_ entries",
    "search": "Search:",
    "zeroRecords": "No matching records found"
    },
    buttons: [
    // { extend: 'print', className: 'btn dark btn-outline' },
    // { extend: 'copy', className: 'btn red btn-outline' },
    // { extend: 'pdf', className: 'btn green btn-outline' },
    // { extend: 'excel', className: 'btn yellow btn-outline ' },
    // { extend: 'csv', className: 'btn purple btn-outline ' },
    // { extend: 'colvis', className: 'btn dark btn-outline', text: 'Columns'}
    ],
    
    // setup responsive extension: http://datatables.net/extensions/responsive/
    responsive: true,
    paging: false,    //分页
    searching: false,    //搜索
    ordering: true,    //排序
    "order": [
    [0, 'asc']
    ],
    
    "lengthMenu": [
    [5, 10, 15, 20, -1],
    [5, 10, 15, 20, "All"] // change per page values here
    ],
    "pageLength": 10,
    "dom": "<'row' <'col-md-12'B>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>", // horizobtal scrollable datatable
    });
    }
    
    initTable1();
  • 相关阅读:
    操作系统学习五部曲
    由实模式进入保护模式
    extends && implements
    <mvc:annotation-driven>
    集合类关系
    Servlet8
    SprigMVC基础测试
    (转载)synchronized代码块
    jetty与tomcat
    输入输出流总结
  • 原文地址:https://www.cnblogs.com/wubaiwan/p/7873954.html
Copyright © 2011-2022 走看看