Reputation: 171
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
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