正文

响应式数据表和引导选项卡的问题

 2023-02-22  172

关键词：

【中文标题】响应式数据表和引导选项卡的问题【英文标题】：Issue with Responsive DataTables And Bootstrap Tabs 【发布时间】：2015-12-17 20:57:26 【问题描述】：

我想在 Bootstrap 选项卡中使用数据表和响应式扩展。我有这个单独工作。

$(document).ready(function() 
    $('#example').DataTable( 
        responsive: true
     );
    $('#exampleInTab').DataTable( 
        responsive: true
     );
 );

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) 
    $($.fn.dataTable.tables(true)).DataTable()
        .columns.adjust()
        .responsive.recalc();
);

你可以看到问题here

【问题讨论】：

看不出是什么问题，你能再解释一下吗？当然可以。有两个表格：一个在第二个选项卡内部，另一个在底部（选项卡外部）。如果您调整窗口大小，底部表格可以正常工作，而选项卡表格则不能。可以看到here一个响应式数据表 【参考方案1】：

原因

您的代码存在多个问题：

responsive.recalc()

dataTables.responsive.js

1.0.1

1.0.0

解决方案

在 jQuery 库之后包含 Bootstrap 库

包括 Responsive 扩展版本 1.0.1 或更高版本

使用下面的代码：

$(document).ready(function () 
    $('#example').DataTable(
        responsive: true
    );

    $('#exampleInTab').DataTable(
        responsive: true
    );

    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) 
        $($.fn.dataTable.tables(true)).DataTable()
           .columns.adjust()
           .responsive.recalc();
    );    
);

演示

有关代码和演示，请参阅 updated jsFiddle。

链接

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

【讨论】：

谢谢 Gyrocode。我认为作为底部表格的工作资源是有效的......在我的真实代码中没问题......但我在调用adjust（）函数时在我的javascript中有其他错误【参考方案2】：

我尝试了上面的答案，但都没有奏效。我使用 JQuery Steps Wizard 作为选项卡。我还必须使用 $('#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();
                
            
        )

我的数据表位于第三个选项卡上，因此请检查 currentIndex。

【讨论】：

Jinja2 和 Flask：引导选项卡仅显示第一个选项卡的内容，而不显示其余选项卡的内容

】Jinja2和Flask：引导选项卡仅显示第一个选项卡的内容，而不显示其余选项卡的内容【英文标题】：Jinja2&Flask:BootstrapTabsdisplaythecontentforthefirsttabonlyandnottherest【发布时间】：2018-12-0223:49:34【问题描述】：我正在使用Jinja2和Python... 查看详情

使用引导程序进行分页的响应式数据表或表

】使用引导程序进行分页的响应式数据表或表【英文标题】：Responsivedatatableortablewithpaginationusingbootstrap【发布时间】：2014-02-2020:46:50【问题描述】：我正在寻找一些示例代码，以了解如何实现具有分页功能的数据表/表格，同时... 查看详情

复杂流程卡的移动响应式设计

】复杂流程卡的移动响应式设计【英文标题】：Mobileresponsivedesignforcomplexprocesscard【发布时间】：2021-08-2301:52:06【问题描述】：该设计适用于基于Angular构建的网站。一直在使用canvas和html。canvas用于在circle周围构建虚线和实线箭头... 查看详情

阻止引导选项卡的显示事件

】阻止引导选项卡的显示事件【英文标题】：Preventtheshoweventforbootstraptabs【发布时间】：2017-07-1401:14:32【问题描述】：我正在使用引导程序nav-tabs，当触发选项卡的显示事件时，我会进行if测试，如果失败，我会调用e.preventDefault()... 查看详情

带有活动选项卡的动态引导导航

】带有活动选项卡的动态引导导航【英文标题】：DynamicBootstrapnavigationwithactivetab【发布时间】：2016-10-2215:39:48【问题描述】：我已经在Bootstrap3.3.6上创建了我的项目，现在每当我点击任何将按原样重置的菜单时都会遇到导航问题... 查看详情

单击每个选项卡时，我可以刷新引导选项卡的内容吗？

】单击每个选项卡时，我可以刷新引导选项卡的内容吗？【英文标题】：CanIrefreshbootstraptabscontentwhenclickeachtabs?【发布时间】：2021-05-0609:45:35【问题描述】：我有如下引导选项卡。HTML标记：<ulclass="navnav-tabs"><liclass="active">... 查看详情

引导选项卡中的数据表大小不正确

】引导选项卡中的数据表大小不正确【英文标题】：Datatablesimproperlysizedinbootstraptab【发布时间】：2016-07-1608:33:08【问题描述】：我有一个页面，其中包含三个引导选项卡和每个选项卡中的数据表。第一个选项卡中的数据表工作正... 查看详情

引导导航选项卡的字体颜色在活动状态下没有变化

】引导导航选项卡的字体颜色在活动状态下没有变化【英文标题】：Fontcolorofbootstrapnav-tabsnotchanginginactivestate【发布时间】：2021-05-2000:32:27【问题描述】：我正在尝试在单击时更改引导导航选项卡的字体颜色。我可以使用css.nav-tab... 查看详情

响应式引导导航栏

】响应式引导导航栏【英文标题】：ResponsiveBootstrapNavbar【发布时间】：2014-12-1422:17:14【问题描述】：我正在尝试为我的网站制作一个导航栏，左侧有下拉菜单，中间有图片，右侧有可折叠项目。我正在使用较少的引导程序来设... 查看详情

响应式引导表

】响应式引导表【英文标题】：Responsivebootstraptable【发布时间】：2019-06-2808:48:10【问题描述】：我有一个不适合页面的表格，他们是一种调整表格大小甚至重新格式化表格的方法，以便条目可以在另一个下方继续，因为将条目分... 查看详情

使用引导网格系统的响应式设计

】使用引导网格系统的响应式设计【英文标题】：Responsivedesignusingbootstrapgridsystem【发布时间】：2021-11-0701:09:24【问题描述】：我有两种不同的桌面视图和移动视图布局。这是他们的样子到目前为止，我已经编写了这段代码，但... 查看详情

用于响应式导航的引导分隔符

】用于响应式导航的引导分隔符【英文标题】：bootstrapdividerforresponsivenavigation【发布时间】：2013-01-0620:04:32【问题描述】：我想在响应式导航上添加水平分隔线。这是移动设备上的引导响应视图。我想在最后两个菜单项之间添加... 查看详情

如何在小屏幕上禁用引导对齐选项卡的堆叠

】如何在小屏幕上禁用引导对齐选项卡的堆叠【英文标题】：Howtodisablestackingofbootstrapjustifiedtabsonsmallscreens【发布时间】：2014-03-2817:38:21【问题描述】：我见过thispost，但作为新用户，我无法发表评论要求澄清。我在Bootstrap中使用... 查看详情

html基于引导选项卡的多步骤(代码片段)

查看详情

如何处理内容大的响应式引导 3 表？

】如何处理内容大的响应式引导3表？【英文标题】：Howtohandleresponsivebootstrap3tableswithlargecontent?【发布时间】：2014-06-3011:58:03【问题描述】：我正在构建一个使用Bootstrap3响应式表格的Wordpress插件，但每行中表格数据单元格的内容... 查看详情

将响应式侧边栏菜单引导到顶部导航栏

】将响应式侧边栏菜单引导到顶部导航栏【英文标题】：Bootstrapresponsivesidebarmenutotopnavbar【发布时间】：2018-07-0611:12:20【问题描述】：所以我一直在寻找和寻找这方面的指导，但无济于事。基本上，我只是想要一个侧边栏，但是... 查看详情

iPhone上引导响应式设计中的页面宽度

】iPhone上引导响应式设计中的页面宽度【英文标题】：pagewidthinbootstrapresponsivedesignoniphone【发布时间】：2012-10-2723:16:56【问题描述】：我的引导响应式设计在各种浏览器上运行良好，但页面宽度在iPhone上受到限制。我已经添加了... 查看详情

添加响应式卡片视图引导程序

】添加响应式卡片视图引导程序【英文标题】：Addresponsivecardviewbootstrap【发布时间】：2022-01-2006:52:48【问题描述】：如何使用bootstraphtml,css添加卡片视图。我正在尝试与上图完全一样，但无法做到。这是我的代码：<linkhref="https... 查看详情