javascript - 具有固定列的子行(显示额外/详细信息)

Question

我使用数据表插件 https://datatables.net

如何构建 row_details(子表)https://datatables.net/examples/api/row_details.html带左右固定柱https://datatables.net/extensions/fixedcolumns/examples/initialisation/left_right_columns.html 像这样 数据表 https://jsfiddle.net/bagratzakaryan/bu9o7btL/8/ 但就我而言，我使用服务器端并收到 datatables.js 错误 https://datatables.net/forums/discussion/46536/child-rows-show-extra-detailed-information-with-fixed-columns?new=1 ，参见下文

Answer 1

我已在 datatables 论坛中发布了该问题，并在此回答了该问题。

https://datatables.net/forums/discussion/46536/child-rows-show-extra-detailed-information-with-fixed-columns?new=1

https://datatables.net/download/compatibility

我已经像这段代码一样解决了这个任务。

var dataSet = [];  // like json
var columnDefs = [];  // init data in the columns

var table = $('#example').DataTable( {
    data: dataSet,
    columns: columnDefs,
    scrollX: true,
});

// datatable fixed columns
var fixedColumns = new $.fn.dataTable.FixedColumns(table, {
    leftColumns: 0,
    rightColumns: 1
});

event.open details control

// unset fixed right column after epening additional details
fixedColumns.s.rightColumns = 0;
fixedColumns.s.iRightColumns = 0;
table.fixedColumns().update();

// hide fixed right column after epening additional details
$('.DTFC_RightWrapper').hide();

event.close details control

// set fixed right column after closing additional details
fixedColumns.s.rightColumns = 1;
fixedColumns.s.iRightColumns = 1;
table.fixedColumns().update();

// show fixed right column after closing additional details
$('.DTFC_RightWrapper').show();

链接 jsfiddle