応答性の高いカスタム列とデータテーブル

Question

DataTableに2つのカスタム列を追加しました。私の問題は、レスポンシブなレイアウトを使用し、一番左のものを補うときには、右端にあるものを隠す方法がわかりません。

私はデータをフィードするためにサーバー側のコードを使用しているので、この方法で実装しました。これは、これを実装する最もクリーンな方法のようです。

私はクラスコントロールを実装しようとしましたが、それでもブレークポイントを無視しているようです。

以下のコードで追加しました。 Temporary page

任意の助けをいただければ幸いです。

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

あなたはここで働いサンプルを見つけることができます。

Answer 1

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

これらの新しい列については、データフレームワークが知っているようです。それはまだそれが7つの列を持っていると考えている。

あなたはあなたが列の広範な構成を追加することができますdatatableをinisiate、ここで追加の列を作成することができます。

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/