with regards question linked below:
jquery datatables column show/hide toggle using bootstrap modal
is possible use use data-column="column-name" instead of data-column="0"? using column re-order in cant depend upon index number. code here ... //scripts imports here
<script language="javascript"> $(document).ready( function () { var table; // datatable table= $('#example').datatable( { "processing": true, statesave: true, "deferrender": true, // make 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) { // 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> in advance.
solution
you need change code responsible toggling visibility this:
$('.toggle-vis').on( 'click', function (e) { // column api object var column = table.column( $(this).attr('data-column') + ':name'); // toggle visibility column.visible( ! column.visible() ); } ); demo
see this jsfiddle code , demonstration.
Comments
Post a Comment