DataTables-在每行的单元格中显示一个按钮 [英] DataTables - display a button in a cell of every row

问题描述

我正在使用 jQuery DataTables 插件，并且在初始化过程中，我正在使用"drawCallback" 来更改行的外观.

I'm using the jQuery DataTables plugin and within the initialization I'm using the "drawCallback" to make changes to the look of the rows.

我的代码如下:

        "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')部分没有做任何事情.

However the this.find('.options') part isn't doing anything.

基本上我想:

1. 获取当前行
2. 选择我已授予选项"的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初始化:

DataTables initialisation:

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

最初我有以下有效的代码:

Originally I had the following code which worked:

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

但这是不区分行数据的，只是为每行粘贴了相同的按钮.

but this was indiscriminate of the row data and simply pasted the same button for each row.

推荐答案

使用 列.渲染 选项，以定义为单元格生成内容的函数.

Use columns.render option to define a function producing content for the cell.

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

});

这篇关于DataTables-在每行的单元格中显示一个按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！