带有按钮的 DataTables 额外列答案

【问题标题】：DataTables extra column with button带有按钮的 DataTables 额外列
【发布时间】：2014-10-07 09:19:09
【问题描述】：

我正在使用数据表。

代码

<script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
        $('#table').dataTable( {
            "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
            "serverSide": true,
            "ajax": {
                    "url": "../server_processing/orders.php",
                    "type": "POST"
                    },
            "order": [[ 0, "desc" ]],
            "processing": true,
            "aoColumnDefs": [            
                {
                    "aTargets": [ 0 ], 
                    "mRender": function ( data, type, full ) {
                        return '<a href="order?id=' + full[0] + '">' + data + '</a>';
                    }
                },
                {
                    "mRender": function ( data, type, full ) {
                        return '<a href=\'view.php?id=\'' + full[0] + '\' class=\'btn btn-primary\'>View</a>';
                    }
                }
            ]
        } );
    } );
</script>

我想在末尾多加一列，每一行都有一个按钮：

<a href="view.php?id=XXXXXX" class="btn btn-primary">Contact Sales</a>

XXXXXX 应该是第 1 行的内容。

有可能吗？

【问题讨论】：

我遇到了同样的问题。看看这里：http://stackoverflow.com/q/13231758/1083946.

标签： jquery jquery-datatables

【解决方案1】：

没有任何代码我只能猜测你的表初始化和数据表版本，但使用 1.9 你可以做到这一点：

'aoColumns': [
{
  'mRender': function (data, type, full) {
     return '<a href=\'view.php?id=\'' + full[0] + '\' class=\'btn btn-primary\'>Contact Sales</a>';
}

full[0] 是您的 json 数据的第一个字段中返回的值。

【讨论】：

抱歉，我是想粘贴代码！我更新了它，我确实尝试了你的答案，但我没有添加额外的列？
您是否在 HTML 中添加了额外的列 <th>？你可以试试aoColumns 而不是aoColumnDefs

【解决方案2】：

我用 jQuery 的 .append 做到了。

为了确保点击事件绑定到按钮（分页），我使用了 $(document).on('click', '.btn-primary', function (e){ ... } ); 而不是通常的 $('.btn-primary').on('click', function (e) { ... }); .

我禁用了对该列的排序。据我所见，单元格的内容也可能是有效的可呈现 HTML，您只需禁用排序即可。这可能会导致一些过滤问题，但您可以在 DataTables 中创建自己的过滤功能。

【讨论】：