Переключить видимость столбца с помощью имен вместо индекса числа

Что касается вопроса связана ниже:Переключить видимость столбца с помощью имен вместо индекса числа

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.

источник

2015-09-25 saren

Пожалуйста, сообщите нам, что именно вы пытаетесь выполнить, вместо того, чтобы ссылаться на другой вопрос; если этот вопрос когда-либо удаляется, то это не будет иметь никакого смысла. Измените свой вопрос, чтобы включить то, что вы пытаетесь сделать, и в том числе то, что вы уже пробовали. –

идентификатор клиента $ ('. Toggle-vis'). On ('click', function (е) { // Получить УАК столбец объекта столбца API = table.column ($ (это) .attr ('данные столбцов'));! // Переключить видимость column.visible (колонка .visible()); }); на сайте datatables https://datatables.net/examples/api/show_hide.html люди используют индексный номер data-column = "0", подобный этому, который работает, но не совместим в случае переупорядочения столбцов. – saren

Если возможно, не могли бы вы отредактировать исходное сообщение, чтобы включить код, а не размещать его в качестве комментария? В качестве подсказки при редактировании вопроса или ответа вы можете использовать Ctrl + K для применения форматирования кода к выделенным строкам текста; это предпочтительнее добавлять неформатированный код в вопросы, ответы или комментарии. –

РЕШЕНИЕ

Вы должны изменить свой код отвечает за переключение видимости на это:

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

DEMO

this jsFiddle См для кода и демонстрации.

источник

2015-09-25 22:17:30

Большое спасибо, это работает для меня :) – saren

Переключить видимость столбца с помощью имен вместо индекса числа

ответ

Смежные вопросы