`

jQuery DataTables插件 单个/批量设置列的显示/隐藏状态

阅读更多
DataTables插件初始化时,可以通过设定列的 bVisible : true/false 来控制该列是否显示。
设置途径有2种:
1. 通过aoColumnDefs中设置
2. 通过aoColumns中设置

如果要在表格初始化之后设置,也有2种方法:
1. 通过调用 dataTable.fnSetColumnVis( columnIndex, true/false); 来设置单个列。
2. 批量设置:
// 设置表格中每一列的显示
var columns = [{bVisible: true}, {bVisible: false}, {bVisible: true}];
// 获得oSettings对象
var setting = dataTable.fnSettings();
// 使用jQuery的extend函数,第一个参数true表示深度遍历
$.extend(true, setting.aoColumns, columns);
// 通过添加新的数据,触发表格重绘。
var dataTable.fnAddData( dataArray );


说明:setting.aoColumns的数据结构如下:
aoColumns : [
  {  ...
     bVisible : true/false,
     ...
  },
  {  ... },
  {  ... }, ...
]


可以通过添加新数据,调用内部的重绘机制,实现根据新的设置,批量处理列的显示情况。也可以调用fnDraw()函数,重绘。
分享到:
评论

相关推荐

    Datatables jquery表格插件

    Datatables是一款基于jQuery的开源表格插件,广泛应用于网页数据展示和管理。它以其丰富的功能、高度的灵活性和良好的社区支持而备受青睐。这个插件的主要目标是将静态或者动态生成的HTML表格转变为具有强大交互性的...

    jQuery datatables插件

    **jQuery DataTables 插件详解** jQuery DataTables 是一个强大且功能丰富的JavaScript库,用于将HTML表格转化为交互式数据展示工具。它支持多种高级功能,包括数据排序、列过滤、隐藏列以及更多自定义选项,使得...

    jquery datatables 所需文件 官方下载的

    <script type="text/javascript" charset="utf8" src="js/DataTables-1.10.4/js/jquery.dataTables.js"></script> ``` 然后,对表格元素应用DataTables: ```javascript $(document).ready(function() { $('#...

    jQuery常用插件介绍/收集

    **jQuery常用插件介绍/收集** jQuery是一款广泛应用于前端开发的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画制作等任务。本文将详细介绍一些常用的jQuery插件,并探讨它们在实际项目中的应用...

    开发工具 jquery.dataTables.min

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

    Jquery dataTables插件

    jQuery DataTables插件是一款强大的数据展示工具,专为HTML表格设计,它提供了丰富的功能,如静态分页、排序、固定表头以及AJAX事件处理,让网页中的数据管理变得简单而高效。以下是对这个插件及其相关功能的详细...

    jquery 分页插件 dataTables

    4. **自定义展示**:可以设置表格的显示列,隐藏不重要的信息。 5. **数据过滤**:支持行级别的过滤,为每一列提供独立的过滤输入框。 6. **服务器端处理**:如果数据量过大,可以配置为服务器端处理模式,减轻...

    JQuery DataTables示例,包含分页、拖拽、导出

    **jQuery DataTables 深入理解与应用** jQuery DataTables 是一个强大且功能丰富的JavaScript库,用于增强HTML表格。它提供了各种高级特性,如分页、排序、过滤、搜索、数据加载以及更多,大大提升了用户体验。在这...

    DONET的JQuery.Datatables集成插件(Mvc.JQuery.Datatables)

    【标题】:“DONET的JQuery.Datatables集成插件(Mvc.JQuery.Datatables)” 在.NET开发中,特别是使用ASP.NET MVC框架时,数据展示是一个常见的需求。`Mvc.JQuery.Datatables`是一个非常实用的插件,它允许开发者...

    jquery datatables 插件 后台代码

    **jQuery DataTables 插件后台代码详解** jQuery DataTables 是一款功能强大的JavaScript库,用于将HTML表格转换为高度交互、可排序、可搜索且具有分页功能的数据展示平台。它支持Ajax数据源,能轻松地与后端服务器...

    jquery dataTables组件

    5. **扩展功能**:如行选择、列隐藏、自定义列显示、数据导出等,DataTables提供了丰富的扩展功能供开发者选择。 ### 五、实践应用 在Eclipse中,你可以创建一个简单的Web项目,将TXT文件内容读取到后端,再通过...

    jquery-dataTables简单实例

    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js"></script> ``` 然后,选择一个HTML表格并应用DataTables插件: ```javascript $(document)...

    jquery dataTables及相关css

    在Web开发中,数据展示和管理是一项常见的任务,而jQuery DataTables插件为此提供了一种高效且功能丰富的解决方案。本文将深入探讨jQuery DataTables及其相关的CSS,以及如何结合使用它们来提升网页表格的交互性和...

    DataTables - jQuery表格插件

    DataTables是一款基于jQuery库的强大的表格插件,它极大地增强了HTML表格的功能,提供了丰富的排序、搜索、分页、列操作等交互性功能。这个插件的设计目标是为开发者提供一个高度可定制、易于使用的工具,使得网页上...

    jQuery+datatables插件实现ajax加载数据与增删改查功能示例

    1. jQuery+datatables插件实现:这是指使用jQuery结合datatables插件来实现特定的网页表格功能,例如数据的动态加载、分页、排序等。 2. ajax加载数据:涉及通过ajax技术从服务器端动态获取数据,并在网页上实时...

    Jquery dataTable显示指定列

    在本文中,我们将深入探讨如何使用Jquery dataTable插件来显示指定列,特别是在处理隐藏列的情况下。`Jquery dataTable` 是一个强大且功能丰富的JavaScript库,用于处理HTML表格,提供了排序、过滤、分页等特性,极...

    jquery.dataTables包.rar

    例如,`columnDefs` 可以定义列的显示规则,`language` 可以设置语言,`ordering` 控制是否启用排序,`paging` 是否开启分页,`searching` 是否开启搜索框等。通过这些选项,你可以根据项目需求定制出最适合的数据...

    jQuery DataTables插件自定义Ajax分页实例解析

    在本篇文章中,我们主要探讨了如何利用jQuery DataTables插件实现自定义Ajax分页功能。DataTables是一个强大的jQuery插件,它可以轻松地将普通的HTML表格转化为具有高级控制功能的表格,例如搜索、排序、分页等。在...

    jquery DataTables-1.9.4

    5. **扩展与插件**:DataTables 1.9.4版本支持多种扩展和插件,如列宽调整、固定列、行选择、CSV/Excel导出等功能,进一步增强了表格的实用性。 6. **国际化**:DataTables支持多语言,开发者可以轻松地切换表格的...

    jquery datatables实例

    然而,jQuery DataTables还支持更多的特性,如自定义列、排序规则、事件处理、插件集成等。你可以根据项目需求,深入学习并定制这些功能。 总的来说,jQuery DataTables通过与后台数据源的交互,提供了高效的数据...

Global site tag (gtag.js) - Google Analytics