Bootstrap 4 个选项卡中的数据表响应

Question

我正在开发一个带有响应数据的 jsf 应用程序table。它在真实 phone 中无法正常工作。当我触摸并滚动 up/down 和 table 时，它会正确显示。

这里是响应代码：

<h:column a:data-priority="1">
    <f:facet name="header">ID</f:facet>                 
        #{_row.id}
</h:column>
<h:column a:data-priority="2">
    <f:facet name="header">Số CMND</f:facet>                    
        #{_row.code}
</h:column>
<h:column a:data-priority="2">
    <f:facet name="header">Tên</f:facet>                    
        #{_row.name}
</h:column>
<h:column a:data-priority="0">
    <f:facet name="header">
        <h:commandLink action="#{employeeEditBean.addDependent()}" value="Add" >
            <f:ajax render="form#{tabname}" onevent="onEventAdd#{tabname}" />
        </h:commandLink>
    </f:facet>   
    <h:commandLink action="#{employeeEditBean.editEmployeeDependent(_row.id)}"
                   value="Edit" title="Hiệu chỉnh dòng"
                   >
        <f:ajax render="form#{tabname}" onevent="onEventEdit#{tabname}" />
    </h:commandLink>

    <h:outputText value=" " escape="true" />

    <h:commandLink action="#{employeeEditBean.editEmployeeDependent(_row.id)}"
                   styleClass="fa fa-trash" title="Xóa dòng" style="color: #e0a800 !important"
                   >

        <f:ajax render="form#{tabname}Delete" onevent="onEventDelete#{tabname}" />
    </h:commandLink>


</h:column>

Java 脚本：

$('#tablexx').DataTable({
     rowReorder: {
     selector: 'td:nth-child(2)'
     }, responsive: true
});

结果如下：

我也把应用程序放到了我的测试服务器上：

http://51.158.105.169:8080/hr

用户：adam/pass：adam1

请帮帮我。

非常感谢 - VinhCC

Answer 1

我自己有答案：

$(document).ready(function () {
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        e.target // activated tab 
        e.relatedTarget // previous tab 
        var table = $.fn.dataTable.fnTables(true);
        if (table.length > 0) {
            $(table).dataTable().fnAdjustColumnSizing();
        }
    });
});

结果如下：

Bootstrap 4 个选项卡中的数据表响应

Datatable responsive in Bootstrap 4 Tab

datatable

responsive