mysql 隐藏列i,JavaScript-jQuery数据表隐藏列
发布日期:2021-08-20 05:18:53 浏览次数:21 分类:技术文章

本文共 4075 字,大约阅读时间需要 13 分钟。

JavaScript-jQuery数据表隐藏列

jQuery datatables插件有没有办法隐藏(显示)表列?

我想出了如何重新加载表数据:使用fnClearTable和fnAddData。

但是我的问题是,在我对表的一种视图中(例如隐藏模式),我不想显示某些列。

13个解决方案

55 votes

您可以通过以下命令隐藏列:

fnSetColumnVis( 1, false );

其中第一个参数是列的索引,第二个参数是可见性。

通过:[http://www.datatables.net/api]-函数fnSetColumnVis

Damb answered 2019-10-27T08:49:42Z

50 votes

如果有人再来这里对我有用

"aoColumnDefs": [{ "bVisible": false, "aTargets": [0] }]

ahaliav fox answered 2019-10-27T08:50:06Z

35 votes

动态隐藏列

先前的答案使用旧版DataTables语法。 在v 1.10+中,您可以使用column()。visible():

var dt = $('#example').DataTable();

//hide the first column

dt.column(0).visible(false);

要隐藏多列,可以使用columns()。visible():

var dt = $('#example').DataTable();

//hide the second and third columns

dt.columns([1,2]).visible(false);

这是一个小提琴演示。

初始化表时隐藏列

要在表初始化时隐藏列,可以使用columns选项:

$('#example').DataTable( {

'columns' : [

null,

//hide the second column

{'visible' : false },

null,

//hide the fourth column

{'visible' : false }

]

});

对于上述方法,您需要为应保持可见并且未指定其他列选项的列指定null。 或者,您可以使用columnDefs定位特定的列:

$('#example').DataTable( {

'columnDefs' : [

//hide the second & fourth column

{ 'visible': false, 'targets': [1,3] }

]

});

devlin carnate answered 2019-10-27T08:51:13Z

25 votes

您可以在数据表初始化期间定义它

"aoColumns": [{"bVisible": false},null,null,null]

Pankaj Patel answered 2019-10-27T08:51:38Z

15 votes

对于使用服务器端处理并使用隐藏列将数据库值传递到jQuery的任何人,我建议使用“ sClass”参数。 您将能够使用css display:在隐藏列的同时仍然能够检索其值。

CSS:

th.dpass, td.dpass {display: none;}

在数据表init中:

"aoColumnDefs": [ { "sClass": "dpass", "aTargets": [ 0 ] } ] // first column in visible columns array gets class "dpass"

//编辑:记得还要将隐藏的类添加到thead单元中

DrewT answered 2019-10-27T08:52:20Z

2 votes

您可以尝试如下隐藏/动态显示运行时

隐藏:     fnSetColumnVis(1,false,false);

示例:oTable.fnSetColumnVis(item,false,false);

节目 :fnSetColumnVis(1,true,false);

示例:oTable.fnSetColumnVis(item,false,false);

在这里,oTable是Datatable的对象。

Nimesh answered 2019-10-27T08:53:19Z

2 votes

借助api,您可以使用

var table = $('#example').DataTable();

table.column( 0 ).visible( false );

看这个信息:

在此处输入链接说明

goero_ag answered 2019-10-27T08:53:52Z

2 votes

如果使用json中的数据并使用Datatable v 1.10.19,则可以执行以下操作:

更多信息

$(document).ready(function() {

$('#example').dataTable( {

columns= [

{

"data": "name_data",

"visible": false

}

]

});

});

Alex Montoya answered 2019-10-27T08:54:25Z

1 votes

var example = $('#exampleTable').DataTable({

"columnDefs": [

{

"targets": [0],

"visible": false,

"searchable": false

}

]

});

Target属性定义列的位置.Visible属性负责列的可见性.Searchable属性负责搜索功能。如果将其设置为false,则该列不适用于搜索。

Susampath answered 2019-10-27T08:54:51Z

0 votes

$(document).ready(function() {

$('#example').DataTable( {

"columnDefs": [

{

"targets": [ 2 ],

"visible": false,

"searchable": false

},

{

"targets": [ 3 ],

"visible": false

}

]

});});

Vishnu S Babu answered 2019-10-27T08:55:08Z

0 votes

注意:现在接受的解决方案已经过时,并且是旧代码的一部分。 [http://legacy.datatables.net/ref]该解决方案可能不适用于使用较新版本的DataTables(现在已保留)的解决方案对于较新的解决方案:您可以使用:[https://datatables.net/reference/api/columns().visible()]

您可以实现按钮的替代方法:[https://datatables.net/extensions/buttons/内置]查看提供的链接下的最后一个选项,该选项允许使用一个可以切换列可见性的按钮。

Bhaulik answered 2019-10-27T08:55:43Z

0 votes

希望这会帮助你。我在某些列上使用此解决方案进行搜索,但是我不想在前端显示它们。

$(document).ready(function() {

$('#example').dataTable({

"scrollY": "500px",

"scrollCollapse": true,

"scrollX": false,

"bPaginate": false,

"columnDefs": [

{

"width": "30px",

"targets": 0,

},

{

"width": "100px",

"targets": 1,

},

{

"width": "100px",

"targets": 2,

},

{

"width": "76px",

"targets": 5,

},

{

"width": "80px",

"targets": 6,

},

{

"targets": [ 7 ],

"visible": false,

"searchable": true

},

{

"targets": [ 8 ],

"visible": false,

"searchable": true

},

{

"targets": [ 9 ],

"visible": false,

"searchable": true

},

]

});

});

Abo Baker answered 2019-10-27T08:56:08Z

-2 votes

看我的解决方案

我有这个HTML Ajax request

@L("Id")@L("IdentityNumber")@L("Name")@L("MobileNumber")@L("RegistrationStatus")@L("RegistrationStatusId")@L("Actions")

而我的Ajax request返回了类似的内容

Og2ro.png

所以我想隐藏ID索引[0]和RegistrationStatusId索引[5]

$(document).ready(function() {

$('#example').dataTable( {

"columnDefs": [

{ "aTargets": [0, 5], "sClass": "invisible"},// here is the tricky part

]

});

});

希望对您有帮助

Basheer AL-MOMANI answered 2019-10-27T08:57:00Z

转载地址:https://blog.csdn.net/weixin_33501587/article/details/115889034 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:fox li matlab,求翻译!这段话中文摘要利用FOX-LI数值迭代解法,对平面平行腔的柱面波进行数值求解.用Matlab软 件程序模拟出腔内...
下一篇:mysql innodb 查询锁,一条语句查清Mysql innodb 行锁阻塞情况

发表评论

最新留言

做的很好,不错不错
[***.249.68.78]2022年07月13日 09时38分05秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

最新文章