CODEWITHSUNDEEP
jqueryresponsive-designdatatables
Cozmoz
Cozmoz

Reputation: 171

Responsive Custom Columns & DataTables

I have added two custom columns into DataTables. My problem is I am unsure how to hide the one on the far right when using the responsive layout and compensate for the one on the far left.

I have done it this way as I am using server sided code to feed in the data and this seemed to be the cleanest way of implementing it.

I have also tried implementing class control but it still seems to ignore the breaking points.

I have added them with the code below.

      //Customised Rows
      'fnCreatedRow': function( nRow, aData, iDataIndex ) {
        //Add ID to Row
        $(nRow).attr('id', aData[0]);

        //New Custom Column Heading
        $(nRow).find('td').eq(0).before('<td>' + '<input type="checkbox" class="flat icheckbox_flat-green" name="table_records" value="'+aData[0]+'">' + '</td>');

        $(nRow).find('td').eq(-1).after('<td>' + '<a href="edit.php?'+aData[0]+'">Edit</a>' + '</td>');
      }

  //New Custom Column Heading
  $('thead').find('tr').each(function(){
      $(this).find('th').eq(0).before('<th><input type="checkbox" id="check-all" class="flat"></th>');
  });

  $('thead').find('tr').each(function(){
      $(this).find('th').eq(-1).after('<th class="desktop">Edit</th>');
  });

You can find a working sample here: Temporary page

Any help would be appreciated.

Upvotes: 1

Views: 1190

Answers (1)

Tom Glover
Tom Glover

Reputation: 3026

$("#datatable-leads").DataTable().columns()

Tells me the datable framework doesent seem to know about these new columns. It still thinks it has 7 columns while it has 9.

when you inisiate the datatable you can add a extensive configuration of the columns, here you can create additional columns.

var columns= [{data: "foo", title:"bar", render: function(data, type,full,meta) {
return '<input type="checkbox" class="flat icheckbox_flat-green" name="table_records" value="'+aData[0]+'">'}}]
$("#datatable-leads").DataTable({
   data:data,
   responsive: true,
   columns: columns
})

Hope this helps

Edit: https://jsfiddle.net/m8psojk3/1/

Upvotes: 1

Related Questions