AdminLTE3 Table插件

墨蓝 2021-06-26 16:06 383阅读 0赞

### 1. 基本依赖 ###

> 官网：https://datatables.net/

-- adminlte 之前
    
    
    <link rel="stylesheet" href="./plugins/datatables-bs4/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" href="./plugins/datatables-responsive/css/responsive.bootstrap4.min.css">
    
    
    <script src="./plugins/datatables/jquery.dataTables.min.js"></script>
    <script src="./plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
    <script src="./plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
    <script src="./plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>

### 2. 初始化 ###

> 所有配置：https://datatables.net/reference/option/

$('#example').DataTable();
    $('#example').DataTable({ 
      "paging": true,
      "lengthChange": false,
      "searching": false,
      "ordering": true,
      "info": true,
      "autoWidth": false,
      "responsive": true,
        
        lengthChange: true, // 分页下拉框
        info: true, // `显示第 1 至 5 项结果，共 5 项`
    });
    -- 固定高度，不分页
    $('#example').DataTable({ 
        "scrollY": "200px",
        "scrollCollapse": true,
        "paging": false
    });
    -- 远程数据
    $('#example').DataTable({ 
    	// ajax: './data.txt',
    	data: dataSet,
    	columns: [
    		{  title: "Name", data: "Name" },
    		{  title: "Position", data: "Position" },
    	]
    });

### 3. 全局设置 ###

> 中文：https://datatables.net/plug-ins/i18n/Chinese

// 中文
    $.fn.dataTable.defaults.oLanguage = { 
    	"sProcessing": "处理中...",
    	"sLengthMenu": "显示 _MENU_ 项结果",
    	"sZeroRecords": "没有匹配结果",
    	"sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
    	"sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
    	"sInfoFiltered": "(由 _MAX_ 项结果过滤)",
    	"sInfoPostFix": "",
    	"sSearch": "搜索：",
    	"sUrl": "",
    	"sEmptyTable": "表中数据为空",
    	"sLoadingRecords": "载入中...",
    	"sInfoThousands": ",",
    	"oPaginate": { 
    		"sFirst": "首页",
    		"sPrevious": "上页",
    		"sNext": "下页",
    		"sLast": "末页"
    	},
    	"oAria": { 
    		"sSortAscending": ": 以升序排列此列",
    		"sSortDescending": ": 以降序排列此列"
    	}
    };
    // 中文，默认属性
    $.extend(true, $.fn.dataTable.defaults, { 
        "searching": false,
        "ordering": false,
        "language": { 
            "url": "//cdn.datatables.net/plug-ins/1.10.21/i18n/Chinese.json"
        }
    });

### 4. 绑定事件 ###

var table = $('#example').DataTable();
    $('#example tbody').on('click', 'tr', function () { 
        var data = table.row(this).data();
        alert('You clicked on ' + data[0] + '\'s row');
    });

### 5.列渲染 ###

columnDefs: [
        // 格式化
        { 
            render: function (data, type, row) { 
                return data + ' (' + row[3] + ')';
            },
            targets: 0
        },
        // 隐藏
        {  visible: false, targets: [3] }
    ]

添加按钮

// 最后一列
    "columnDefs": [{ 
        "targets": -1,
        "data": null,
        "defaultContent": "<button class='btn btn-info btn-sm'>Click!</button>"
    }]
    // 绑定事件
     $('#example tbody').on('click', 'button', function () { 
         var data = table.row($(this).parents('tr')).data();
         alert(data.name + "'s salary is: " + data.salary);
     });

数据嵌套

// record
    { 
        "name": "Tiger Nixon",
        "hr": { 
            "position": "System Architect",
            "salary": "$3,120",
            "start_date": "2011/04/25"
        },
        "contact": [
            "Edinburgh",
            "5421"
        ],
        "fruit": [
            "apple",
            "orange"
        ]
    }
    // 格式化
    "columns": [
        {  "data": "name" },
        {  "data": "hr.position" },
        {  "data": "contact.0" },
        {  "data": "contact.1" },
        {  "data": "hr.start_date" },
        {  "data": "hr.salary" },
        {  "data": "fruit[, ]" },	// 用,分隔
    ]

### 6. 数据请求 ###

可以前端分页，也可以 服务器分页（包括排序，过滤）

// 默认返回格式 
    { 
    	draw: 1,	// Datatables发送的draw是多少那么服务器就返回多少
    	recordsTotal: 10,	// 数据库里总共记录数
    	recordsFiltered: 10,	// 过滤后的记录数
    	data: [...],	// 可以通过ajax.dataSrc更改字段名称
    	error: ''	// 可选
    }
    // 大量数据渲染
    "deferRender": true
    // 加载等待提示
    "processing": true,
    // 服务器模式
    "serverSide": true,
    // 请求参数
    ajax: { 
    	url: 'xxx'
    	type: 'POST',
    	data:
    }
    // 刷新
    table.ajax.reload();

# Extensions #

### 1. Buttons ###

使用

// 可选按钮 DataTable.ext.buttons
    $('#example').DataTable({ 
    	dom: 'Bfrtip',	// 配置 https://datatables.net/reference/option/dom
    	buttons: [
    		'copy',
    		'excel',
    		'csv',
    		'pdf',
            // 编辑默认按钮
            { 
                extend: 'copy',
                text: '复制'
            },
            // 自定义按钮
            { 
                text: 'Reload',
                action: function (e, dt, node, config) { 
                    dt.ajax.reload();
                }
            }
    	]
    });

### 2. `Select` ###

使用

let table = $('#example').DataTable({ 
    	select: true
    });
    var rows = table.rows({  selected: true });
    console.log(rows.data())
    console.log(rows.count())

关联 buttons

$('#example').DataTable({ 
    	dom: 'Bfrtip',
    	buttons: [
    		'selected',
    		'selectedSingle',
    		'selectAll',	// 全选
    		'selectNone',	// 反选
    		'selectRows',
    		'selectColumns',
    		'selectCells'
    	],
    	select: true
    });
    // 全选、反选
    table.rows().select();
    table.rows().deselect();
    // 可以只导出select内容

### 3. `FixHeader` ###

使用

let table = $('#example').DataTable({ 
        paging: false,
        fixedHeader: true
    });