Javascript 使用名称而不是索引号切换列可见性
关于以下问题： 是否可以使用Javascript 使用名称而不是索引号切换列可见性,javascript,datatables,Javascript,Datatables,关于以下问题： 是否可以使用data column=“column name”而不是data column=“0”？ 因为我使用的是列重新排序，所以我不能依赖于索引号。 代码在这里。。。 //脚本在此处导入 <script language="JavaScript"> $(document).ready( function () { var table; // DataTable
data column=“column name”data column=“0”<script language="JavaScript">
$(document).ready( function () {
var table;
// DataTable
table= $('#example').dataTable( {
"processing": true,
stateSave: true,
"deferRender": true, // to make the search fast
// "dom": 'C<"clear">Rfltipr',
"ajax": {
"url": "/my/example.so",
"type": "GET"
},
"columns": [
{ "title": "name", "data": "name", "name": "name"},
{ "title": "city", "data": "addeddate", "name": "added date"}
]
});
table.columnFilter({
sPlaceHolder : "head:before",
aoColumns : [ {
type : "text"
}, {
type : "date-range",
bRegex : true,
bSmart : true
}}
]
});
$.datepicker.regional[""].dateFormat = 'yy-mm-dd';
$.datepicker.setDefaults($.datepicker.regional['']);
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000}
} );$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
});
$('.toggle-vis').on( 'click', function (e) {
// Get the column API object
var column= $('#example').dataTable().api().column($(this).attr('data-column') );
column.visible( ! column.visible() );
} );
/* $("input:checkbox:not(:checked)").each(function() {
var column = "."+$(this).attr("name");
$(column).hide();
});
$("input:checkbox").click(function(){
var column = $('#example').dataTable().api().column($(this).attr("name");
$(column).toggle();
});*/
});
</script>
<title>List</title>
</head>
<body >
<div id="dialog" title="change layout">
<p><input type="checkbox" class="toggle-vis" data-column="0" value="name" checked="checked" /> Name</p>
<p><input type="checkbox" class="toggle-vis" data-column="1" value="addeddate" checked="checked" /> added date</p>
</div>
<button id="opener">change layout</button>
<div id="gridContainer">
<div id="gridContent" class="display">
<table id="example" width="100%" cellspacing="0">
<thead>
<tr>
<th style="width:150px">Name </th>
<th style="width:350px">added date</th>
</tr>
<tr><th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody >
</tbody>
<tfoot></tfoot>
</table>
</div>
</div>
</body>
</html>
Thanks in advance.
$（文档）.ready（函数（）{
var表；
//数据表
table=$（'#示例'）。数据表（{
“处理”：对，
stateSave：没错，
“deferRender”：true，//以加快搜索速度
//“dom”：“CRfltipr”，
“ajax”：{
“url”：“/my/example.so”，
“类型”：“获取”
},
“列”：[
{“title”：“name”，“data”：“name”，“name”：“name”}，
{“标题”：“城市”，“数据”：“添加日期”，“名称”：“添加日期”}
]
});
表1.2列过滤器({
sPlaceHolder:“头：之前”，
AO列：[{
键入：“文本”
}, {
类型：“日期范围”，
布雷克斯：是的，
是的
}}
]
});
$.datepicker.regional[“”].dateFormat='yy-mm-dd'；
$.datepicker.setDefaults（$.datepicker.regional[''）；
$（函数（）{
$（“#dialog”）.dialog（{
自动打开：错误，
展示：{
效果：“盲”，
持续时间：1000
},
隐藏：{
效果：“爆炸”，
持续时间：1000}
}）；$（“#开场白”）。单击（函数（）{
$（“对话框”）。对话框（“打开”）；
});
});
$（'.toggle vis'）。打开（'click'，函数（e）{
//获取列API对象
var column=$（'#示例'）.dataTable（）.api（）.column（$（this.attr（'data-column'））；
column.visible（！column.visible（））；
} );
/*$（“输入：复选框：未（：选中）”）。每个（函数（）{
var column=“.”+$（this.attr（“name”）；
$（列）.hide（）；
});
$（“输入：复选框”）。单击（函数（）{
var column=$（'#示例'）.dataTable（）.api（）.column（$（this.attr（“name”）；
$（列）.toggle（）；
});*/
});
列表
名字
添加日期
更改布局
名称
添加日期
提前谢谢。
$('.toggle-vis').on( 'click', function (e) {
// Get the column API object
var column = table.column( $(this).attr('data-column') + ':name');
// Toggle the visibility
column.visible( ! column.visible() );
} );
有关代码和演示，请参见。请准确告诉我们您正试图完成的任务，而不是参考其他问题；如果该问题被删除，则此问题将毫无意义。请编辑您的问题，以包括您正在尝试执行的任务，以及您已经尝试过的任务。客户id$（“.toggle vis”）。打开（'click'，函数（e）{//获取列API对象var column=table.column（$（this.attr（'data-column'））；//切换可见性列。可见（！column.visible（））；}）；在datatables站点中，人们使用的是索引号data column=“0”类似于此，在列重新排序的情况下，它可以工作，但不兼容。如果可能，请编辑原始帖子以包含代码，而不是将其作为注释发布。作为提示，在编辑问题或答案时，您可以使用Ctrl+K将代码格式应用于选定的文本行；这比添加未格式化的co更可取在问题、答案或评论中删除。