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. 选择我给出＆＃39;选项＆＃39;
的className的列
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

});