响应式自定义列与数据表

我已将两个自定义列添加到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

任何帮助，将不胜感激。

来源

2016-11-01 Cozmoz

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

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

$("#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/

来源

2016-11-02 16:00:02

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

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

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

响应式自定义列与数据表

回答

相关问题