2016-11-01 27 views
1

我已将两个自定义列添加到DataTable中。我的问题是我不确定如何在使用响应式布局时隐藏最右边的那个,并补偿最左边的一个。响应式自定义列与数据表

我已经这样做了,因为我使用服务器端代码来提供数据,这似乎是实现它的最干净的方式。

我也试过实现类控制,但它似乎仍忽略了突破点。

我已经添加了下面的代码。

 //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>'); 
    }); 

您可以在这里找到工作示例:Temporary page

任何帮助,将不胜感激。

+1

感觉就像UX在这个问题中发挥作用 - 真正是呈现数据的最佳方式?你应该在桌子本身上滚动吗?如果你不使用这些列并仅创建行。无论如何,这里是打开几个想法的链接:https://elvery.net/demo/responsive-tables/ – Jennift

+0

谢谢!这似乎很有用☺️ – Cozmoz

回答

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

告诉我datable框架doesent似乎知道这些新列。它仍然认为它有7个列,而它有9个。

当您创建数据表时,您可以添加列的大量配置,在这里您可以创建其他列。

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 
}) 

希望这有助于

编辑:https://jsfiddle.net/m8psojk3/1/

+0

嗨,感谢您的详细回复!整合这个我有点麻烦。你愿意提供一个JS小提琴吗? – Cozmoz

+0

我编辑答案以添加小提琴。 –

+0

非常感谢。我已经在原始文章中更新了该文件,试图让它与服务器端处理协同工作。我现在遇到了一个问题,它试图将所有的数据放入第一列。 – Cozmoz