Question

关于下面链接的问题：

jQuery DataTables Column Show/Hide Toggle using Bootstrap Modal

是否可以使用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.

Answer 1

<强>解

您需要更改负责切换可见性的代码：

$('.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() );
} );

<强>样本

请参阅this jsFiddle以获取代码和演示。

使用名称而不是索引编号

1 个答案: