Адаптивный к данным в Bootstrap 4 Tab

Question

Я занимаюсь разработкой jsf-приложения с отзывчивым набором данных.Он не работает нормально в реальном телефоне.Когда я касаюсь и прокручиваю таблицу вверх / вниз, она отображается правильно.

Вот код для ответа:

<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();
        }
    });
});

Вот результат: