`

DataTables垂直滚动条IE下的问题

IE 
阅读更多

     第一次使用tab加载页面时,由于页面内容是由dataTables负责渲染,tab页的宽度会成为0。这时datables读取它的容器的宽度时获取的值就是0,计算添加了滚动条(宽度为0或者设定值)的table宽度时就会产生负数。IE下赋值异常。

        原代码:

//这时width要赋值为负数
n.style.width = _fnStringToCss($(n).outerWidth()-oSettings.oScroll.iBarWidth );
 

 

       新代码:

               /*
                 * 如果容器($(n))的width为0会造
                 *成$(n).outerWidth()-oSettings.oScroll.iBarWidth的值为负数
                 * 在IE中这种情况下会报错,造成dataTables初始化失败
                 * by apusic
                 */
                if($(n).outerWidth()-oSettings.oScroll.iBarWidth < 0){
                    n.style.width = "0px";
                }else{
                    n.style.width = _fnStringToCss( 
                            $(n).outerWidth()-oSettings.oScroll.iBarWidth );
                }
 
分享到:
评论

相关推荐

    DataTables的垂直滚动条.zip

    本教程将重点讲解如何在 DataTables 中实现垂直滚动条,以解决当表格内容过多,无法在有限的屏幕空间内完全显示时的问题。 首先,我们需要确保已经正确地引入了 DataTables 的相关库文件。这包括 jQuery 库、...

    datatables固定头与滚动条适配文件

    本文件“datatables固定头与滚动条适配文件”着重解决了一个特定的问题,即“FixedHeader 2 is not supported with DataTables' scrolling mode at this time”。这个问题通常发生在尝试在`DataTables`中同时使用`...

    bootstrap表格固定表头并且tbody部分添加滚动条

    Bootstrap表格在设计网页时是一种非常常用的组件,尤其在处理大量数据时,为了提供更好的用户体验,我们经常需要在tbody部分添加竖向滚动条,同时保持表头固定不动。这样,当用户滚动内容时,表头始终保持可见,便于...

    datatables表格分页、检索、排序、滚动条

    Datatables支持水平和垂直滚动条,确保用户可以轻松浏览整个表格。滚动条的引入不仅保持了页面的整洁性,也使得用户能够在有限的空间内查看全部数据。 5. 配置与定制: Datatables的强大之处在于其高度可定制性。...

    jquery给表格加滚动条

    - 可以使用jQuery插件,如DataTables,它提供了更丰富的表格功能,包括自动分页、排序、过滤等,同时也支持自定义滚动条样式。 - 对于大数据量的表格,可以考虑使用虚拟滚动,只渲染视口内的行,提高性能。 - 考虑到...

    表格 题头拖动 超出宽度显示省略号(中文亦可) 滚动条 兼容IE,FF,safari

    本话题主要涉及以下几个关键知识点:表格题头的拖动、超出宽度显示省略号、滚动条的使用以及跨浏览器兼容性,特别是针对IE、Firefox(FF)和Safari这三大主流浏览器。 1. **表格题头拖动**:这是一种交互设计特性,...

    实例讲解DataTables固定表格宽度(设置横向滚动条)

    本文将通过实例讲解DataTables固定表格宽度(设置横向滚动条),并解决表格宽度问题。 标题:实例讲解DataTables固定表格宽度(设置横向滚动条) 描述:通过本文,您将学习到如何使用DataTables固定表格宽度,设置横向...

    表格加滚动条

    这种插件旨在为表格添加垂直或水平滚动条,以适应不同屏幕尺寸和浏览器环境,特别是兼容像IE、Google Chrome、Firefox这样的主流浏览器。这不仅能够保持页面的整洁,还能让用户更方便地查看和浏览大量的数据。 表格...

    datatables

    - **客户支持**:客户服务系统中,使用Datatables展示客户信息、问题记录等。 6. **学习资源** - 官方网站:https://datatables.net/ 提供详细的文档、示例和API参考。 - GitHub仓库:...

    Scroller:用于DataTables的虚拟滚动插件

    滚动条Scroller是DataTables的虚拟呈现插件,它允许快速在屏幕上绘制大型数据集。 虚拟渲染的意思是只绘制了表格的可见部分(以及向两侧的一点以使滚动平滑),而滚动容器给人的印象是整个表格都是可见的。 这是通过...

    jQuery Datatables表头不对齐的解决办法

    在使用jQuery Datatables进行网页数据展示时,可能会遇到表头(thead)与表格内容(tbody)对齐问题,尤其是在浏览器窗口大小变化或者响应式布局中。这个问题通常表现为表头与内容列宽不一致,造成视觉上的错位。...

    开发工具 dataTables.bootstrap.min

    开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min...

    bootstrap dataTables使用方法

    12. `sScrollY`: 当数据量大时,启用垂直滚动条。例如,`"sScrollY": "200px"`表示设置滚动高度为200像素。 13. `bFilter`: 设置为`false`会禁用表格顶部的搜索框。 14. `bDestroy`: 通过设置此选项为`true`,可以...

    开发工具 jquery.dataTables.min

    开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery....

    dataTable.fixedColumns.js修复版

    该版本为dataTable.fixedColumns.js修复版,解决固定列出现滚动条的问题,以及一些显示的处理,详见博客:https://blog.csdn.net/lhmyy521125/article/details/86549317

    jquery-dataTables简单实例

    默认情况下,DataTables会自动分页。你可以通过`pageLength`参数设置每页显示的行数: ```javascript $('#example').DataTable({ pageLength: 10 // 每页显示10行 }); ``` 7. **搜索与过滤** DataTables提供...

    Laravel开发-datatables

    在本文中,我们将深入探讨如何在Laravel框架中利用datatables进行开发,特别是针对Laravel 4版本。Datatables是一款非常流行的jQuery插件,它能够为网页中的HTML表格提供强大的功能,如排序、搜索、分页等。在...

Global site tag (gtag.js) - Google Analytics