Using two differend columnDefs functions in datatable

martin1223345

I am trying to place multiple colomndefs in my script. But for some reason only one of them seems to work. Is it possible to use it twice in one tablescript? if so how? In the testcase it is not working properly either. In my own table the checkCol works without adding the colvis.

dom: 'Bfrtip',
                columnDefs: [  
                 {
                targets: [0,4,5,6],
                className: 'noVis'
              
            }
        ],
        buttons: [
            {
                extend: 'colvis',
                columns: ':not(.noVis)'
            
                },
                {targets: [checkCol], 
                render: function ( data, type, row ) {
                if ( type === 'display' && row.category == 6 || row.group_name != "Has")
                return ""; //Empty cell content
                 else {             //if column data is 1 then set attr to checked, use row id as input id (plus prefix)
                return '<label class="switch"><input type="checkbox" ' + ((data == 1) ? 'checked' : '') + ' value="' + row.id + '" class="active" /><div class="slider round"><span class="on">ON</span><span class="off">OFF</span></div></label>';
                    }
                    return data;
                    
                  },
                  
                  className: "dt-body-center"
                 },
                 {targets: 0, className: "dt-body-center"},
        
            
              ],
        
        });

http://live.datatables.net/xifuhava/1/edit

kthorngren

You have some of your columnDefs options inside the buttons config. You need something more like this:
http://live.datatables.net/sadosumi/1/edit

I didn't check that they work. its hard to keep track of all the brackets in Javascript

Kevin

martin1223345

Thanks!. For some reason in the testcase i can choose which colomns to select and which not. But in my own script this is not working. it sellects all colomns as options also the ones that should be excluded.. This is my complete script so far.. maybe something went wrong here?

<script type="text/javascript">
                var checkCol = 11;         //checkbox column
                $(document).ready(function() {
    
                var table = $('#accountTable').dataTable({
            
                "pageLength": 100,
                "lengthMenu": [[50, 100, 200, -1], [50, 100, 200, "All"]],
                "sFilterInput": "form-control search-box",
                "order": [],
                language: { search: '', searchPlaceholder: "Filter table..." },
                rowId: 'id',
                "processing": true,
            
            
                rowCallback: function ( row, data ) {
                if (moment(data.update_script, 'YYYY-MM-DD HH:mm:ss') < moment() && data.category == 6) {
                $(row).css('background-color', ' rgba(255, 0, 0, 0.2)');
                } else {
                $(row).css('background-color', '');
                }   
                var payuntill = moment(data.testpay, 'YYYY-MM-DD HH:mm:ss');
                var dnow = moment();
                if (payuntill.diff(dnow, 'days') <= 0) {
                $('td:eq(0)', row).css('background-color', ' rgba(255, 0, 0, 0.7)');
                }   
  
                if (payuntill.diff(dnow, 'days') > 0 && payuntill.diff(dnow, 'days') < 22) {
                $('td:eq(0)', row).css('background-color', ' rgba(255, 153, 0, 0.7)');
                }
  
                },
    
       
                "ajax": "selectdatatable_allacc.php",
                "columns": [
                
                { data:  null,
                title : '!!',
                render: function ( data, type, row ) {
                var testpay = moment(data.testpay, 'YYYY-MM-DD HH:mm:ss');
                var now = moment();
                if ( testpay.diff(now, 'days')<= 0)
                return '<font color='+row.cat_color+'>0</font>';
                else{ return '<font color='+row.cat_color+'>'+ testpay.diff(now, 'days') + '</font>'; 
                } }
                },
                {data: 'name',
                render: function ( data, type, row, meta ) {
                return '<font color='+row.cat_color+'>'+data+'</font>';
                } } , 
                {data: 'rang',
                render: function ( data, type, row, meta ) {
                return '<font color='+row.cat_color+'>'+data+'</font>';
                } } ,     
                {data: 'bullets',
                render: function ( data, type, row, meta ) {
                return '<font color='+row.cat_color+'>'+data+'</font>';
                }},
                {data: 'notes',
                render: function ( data, type, row, meta ) {
                return '<font color='+row.cat_color+'>'+data+'</font>';
                }},
                {data: 'ranker',
                render: function ( data, type, row, meta ) {
                return '<font color='+row.cat_color+'>'+data+'</font>';
                }},
                {data: 'typenaam',
                render: function ( data, type, row, meta ) {
                return '<font color='+row.cat_color+'>'+data+'</font>';
                }},
                {data: 'lead',
                render: function ( data, type, row, meta ) {
                return '<font color='+row.cat_color+'>'+data+'</font>';
                }},
                {data: 'mobcash',
                render: function ( data, type, row, meta ) {
                    if ( type === 'display' || type === 'filter' ) {
               return '<font color='+row.cat_color+'>'+ $.fn.dataTable.render.number( '.', '.', 0 ).display(data) + '</font>';
                    } return data;
               } },
                {data: 'plane',
                
                render: function ( data, type, row, meta ) {
                return '<font color='+row.cat_color+'>'+data+'</font>';
                }},
                {data: 'door',
                render: function ( data, type, row, meta ) {
                return '<font color='+row.cat_color+'>'+data+'</font>';
                }},
                {data: 'do_lead'},
            
                { 'data': null, title: '', wrap: true, "render": function (item) { return '<input type="submit" value="Dead" style="width:57px !important;" class="example_y" onClick="mobreset(' + item.id + ') "/>' } },
                { 'data': null, title: '', wrap: true, "render": function (item) { return '<input type="button" value=" Edit " id= ' + item.id + ' style="width:57px !important;" class="example_z edit_data" />' } },
                { 'data': null, title: '', wrap: true, "render": function (item) { return '<input type="submit" value="Login" style="width:57px !important;" class="example_x" onClick="mobLogin(' + item.id + ') "/>' } },     
                 ],  
                  
                 
                 dom: 'Bfrtip',
    columnDefs: [  
      {
        targets: [0,4,5,6],
        className: 'noVis'

      },
      {targets: [checkCol], 
       render: function ( data, type, row ) {
         if ( type === 'display' && row.category == 6 || row.group_name != "Hassinions")
           return ""; //Empty cell content
         else {             //if column data is 1 then set attr to checked, use row id as input id (plus prefix)
           return '<label class="switch"><input type="checkbox" ' + ((data == 1) ? 'checked' : '') + ' value="' + row.id + '" class="active" /><div class="slider round"><span class="on">ON</span><span class="off">OFF</span></div></label>';
         }
         return data;

       },

       className: "dt-body-center"
      },
      {targets: 0, className: "dt-body-center"},

    ],
    buttons: [
      {
        extend: 'colvis',
        columns: ':not(.noVis)'

      },

    ],

      });


    
    });
    </script> 

martin1223345

Thanks !. I have found a other way to accomplish what i need.

I used the following code to show and hide my types.

  columnDefs: [  
      {
        "visible": false, "targets": [6, 9],

      },
      {targets: [checkCol], 
       render: function ( data, type, row ) {
         if ( type === 'display' && row.category == 6 || row.group_name != "Hassinions")
           return ""; //Empty cell content
         else {             //if column data is 1 then set attr to checked, use row id as input id (plus prefix)
           return '<label class="switch"><input type="checkbox" ' + ((data == 1) ? 'checked' : '') + ' value="' + row.id + '" class="active" /><div class="slider round"><span class="on">ON</span><span class="off">OFF</span></div></label>';
         }
         return data;

       },

       className: "dt-body-center"
      },
      {targets: 0, className: "dt-body-center"},

    ],
   dom: 'Bfrtip',
        buttons: [
            {
                extend: 'collection',
                text: 'Table control',
                buttons: [
                    {
                        text: 'Show Type',
                        action: function ( e, dt, node, config ) {
                            dt.column( -9 ).visible( ! dt.column( -9 ).visible() );
                        }
                    },
                    {
                        text: 'Show Plane',
                        action: function ( e, dt, node, config ) {
                            dt.column( -6 ).visible( ! dt.column( -6 ).visible() );
                        }
                    }
                ]
            }
        ]
   

      });