DataTables - отображать кнопку в ячейке каждой строки

Question

Я использую плагин jQuery DataTables, и в рамках инициализации я использую "drawCallback", чтобы внести изменения в внешний вид строк.

Мой код выглядит следующим образом:

 "drawCallback": function() { 
      table.rows().every(function() { 
       var d = this.data(); 
       var option = this.find('.options'); 

       if (d.activated) { 
        option.html('<button class="btn btn-mini btn-primary pull-right"> Enabled</button>'); 
       } else { 
        option.html('<button class="btn btn-mini btn-danger pull-right"> Disabled</button>'); 
       } 
      }); 

     } 

Однако this.find('.options') часть ничего не делает.

По существу я хочу:

1. получить текущий ряд
2. выберите столбец я дал имя класса «опции»
3. вставить кнопку там, имеющую отношение к данным ряда

HTML:

<table id="example"> 
<thead> 
<tr> 
    <th></th> 
    <th>Last Name</th> 
    <th>First Name</th> 
    <th>Email</th> 
    <th></th> 
</tr> 
</thead> 
</table> 

DataTables инициализации:

var table = $('#example').DataTable({ 
    columns: [ 
     { 
      "className":  'center', 
      "data":   null, 
      "defaultContent": '' 
     }, 
     { 
      data: 'last_name' 
     }, 
     { 
      data: 'first_name' 
     }, 
     { 
      data: 'email' 
     }, 
     { 
      "className":  'options', 
      "data":   null, 
      "defaultContent": '' 
     } 
    ], 

    // ...and so on 

Первоначально я имел следующий код, который работал:

$('td.options').html('<button class="btn btn-mini btn-primary pull-right"> Enabled</button>'); 

, но это было без разбора данных строк и просто приклеиваются на ту же кнопку для каждой строки.

Answer 1

Используйте опцию columns.render для определения функции, создающей контент для ячейки.

var table = $('#example').DataTable({ 
    columns: [ 
     { 
      "className":  'center', 
      "data":   null, 
      "defaultContent": '' 
     }, 
     { "data": 'last_name' }, 
     { "data": 'first_name' }, 
     { "data": 'email' }, 
     { 
      "className":  'options', 
      "data":   null, 
      "render": function(data, type, full, meta){ 
       if (full.activated) { 
        return '<button class="btn btn-mini btn-primary pull-right"> Enabled</button>'; 
       } else { 
        return '<button class="btn btn-mini btn-danger pull-right"> Disabled</button>'; 
       } 
      } 
     } 
    ], 

    // ...and so on 

});