带有按钮的DataTables额外列

Question

我正在使用DataTables。

代码

<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行的内容。

有可能吗？

Answer 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数据的第一个字段中返回的值。

Answer 2

我用jQuery的.append。

做到了

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

我禁用了该列的排序。据我所知，单元格的内容也可能是有效的可渲染HTML，您只需禁用排序。它可能会导致过滤问题，但您可以在DataTables中创建自己的过滤器功能。