在 Lightning Aura Component 中使用 Datatables 插件实现表头固定 ( Fixed Header ) 和列固定 ( Fixed Columns )

1.引入Datatables和jQuery

(需要先将官网下载的zip包上传到Static Resource)

component:

<aura:component>
    <ltng:require styles="{!join(',',
            $Resource.DataTables + '/DataTables-1.10.22/css/jquery.dataTables.min.css',
            $Resource.DataTables + '/FixedHeader-3.1.7/css/fixedHeader.dataTables.min.css',
            $Resource.DataTables + '/FixedColumns-3.3.1/css/fixedColumns.dataTables.min.css'
        )}" scripts="{!join(',', 
            $Resource.jQuery, 
            $Resource.DataTables + '/DataTables-1.10.22/js/jquery.dataTables.min.js',
            $Resource.DataTables + '/FixedHeader-3.1.7/js/dataTables.fixedHeader.min.js',
            $Resource.DataTables + '/FixedColumns-3.3.1/js/dataTables.fixedColumns.min.js'
        )}" afterScriptsLoaded="{!c.scriptsLoaded}" />
</aura:component>

controller:

scriptsLoaded: function(component, event, helper) {
    $("document").ready(function(){
        console.log("jQuery load complete.");
    });
}

2.在doInit方法中获取数据，然后设置一个5秒的延迟去初始化Datatable（要等原生table渲染完，再用Datatable渲染）

controller:

({

doInit: function (component, event, helper) {

// 在这里编写一些初始化数据的代码

// 数据初始化完以后等5秒再用DataTable插件渲染table

setTimeout(function () {

helper.initDataTable();

}, 500);

}

})

3.初始化Datatable

component:

<table class="myTableForEdit">……</table>

helper:

({

initDataTable: function () {

// 此方法在页面运行时可能会被调用多次，因此需要判读table是否已被初始化

if ($.fn.dataTable.isDataTable('.myTableForEdit') === false) {

$('.myTableForEdit').DataTable({

destroy: true,

info: false,

ordering: false,

paging: false,

searching: false,

scrollX: true,

scrollY: "400px",

scrollCollapse: true,

fixedHeader: true, // 固定首行

fixedColumns: {

leftColumns: 7 // 从左往右，要固定几列就写几

}

});

} else {

// 如果已经初始化过了，就先destroy，再重新初始化

$('.myTableForEdit').DataTable().destroy();