Question

我在DataTables中添加了两个自定义列。我的问题是我不确定如何在使用响应式布局时隐藏最右边的那个并补偿最左边的那个。

我这样做是因为我使用服务器端代码来提供数据，这似乎是实现它的最简洁方法。

我也尝试过实现类控制，但它似乎仍然忽略了断点。

我已将它们添加到下面的代码中。

      //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

任何帮助都将不胜感激。

Answer 1

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

告诉我，数据框架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/

响应式定制列＆amp;数据表

1 个答案: