响应式DataTables和Bootstrap选项卡的问题

Question

我想在Bootstrap选项卡中使用Datatables和Responsive扩展。我把它分开工作了。

Value

您可以看到问题here

Answer 1

原因

您的代码存在多个问题：

1. 在jQuery库
之前包含Bootstrap库
2. 自[{1}}以来responsive.recalc()中提供了API方法dataTables.responsive.js，您可以使用版本1.0.1。
3. 一旦DOM可用，就应该附加事件处理程序。

解

1. 在jQuery库之后包含Bootstrap库

2. 包括Responsive扩展程序版本1.0.1或更高版本

3. 使用以下代码：

   1.0.0

样本

请参阅updated jsFiddle以获取代码和演示。

LINKS

有关jQuery DataTables和Bootstrap选项卡最常见问题的解决方案，请参阅jQuery DataTables – Column width issues with Bootstrap tabs。

Answer 2

我尝试了以上答案，但是没有一个有效。我正在使用“ JQuery步骤向导”作为选项卡。我还必须使用$('#datatable').css("width", '100%')才能使其正常工作。

wizard.steps({
            headerTag: "h3",
            bodyTag: "section",
            transitionEffect: "slideLeft",
            enableFinishButton: false,
            enablePagination: false,
            enableAllSteps: true,
            titleTemplate: "#title#",
            cssClass: "tabcontrol",
            onStepChanged: function (event, currentIndex, priorIndex) {

                if (currentIndex == 2) {
                    $('#datatable').css("width", '100%')
                    $($.fn.dataTable.tables(true)).DataTable().columns.adjust().responsive.recalc();
                }
            }
        })

我的数据表位于第3个标签上，因此选中了currentIndex。