如何将另一个 child 添加到响应式数据表

Question

如何将另一个（两个）child（ren）添加到响应数据table。

如果 table 太窄，我单击 + 按钮这没有任何作用

对此有什么想法吗？

function format ( d ) {
    return '<div class="player"></div>';
}

https://jsfiddle.net/v1xnj3u4/

Answer 1

这似乎有效，但它不会创建另一行，而只是将您指定的 div 添加到创建的行：

"responsive": {
    "details": {
        "renderer": function ( api, rowIdx ) {
            // Select hidden columns for the given row
            var data = api.cells(rowIdx, ':hidden').eq(0).map(function(cell){
                var header = $(api.column(cell.column).header());
                return $("<tr></tr>").append($("<td></td>",{
                    "text": header.text()+':'
                })).append($("<td></td>",{
                    "text": api.cell( cell ).data()
                })).prop('outerHTML');
            }).toArray().join('');
            return data ?
                $('<table/>').append( data ).prop('outerHTML') + $("<div></div>", {"class":"player"}).prop('outerHTML') :
                false;
        }
    }
},

JSFiddle 上的工作示例，感谢您的挑战，我很喜欢学习它 ;-)

Answer 2

如果隐藏其中一列，您可以使 (+) 图标一直保留，您可以为此目的创建一个虚拟列并使用其中一个响应插件 special classes none 作为该虚拟列的 'className: 'none'。

在下面的示例中，我为此目的使用了最后一列，因为在行详细信息中它也将显示在最后。

然后在枚举 custom renderer 中的列时，如果该特殊列 header 与某个预定值匹配（我使用 'Extra 10' 即 header 最后一列）。

请参阅此 JSFiddle 进行演示。

PS：我使用 excellent answer and example by @annoyingmouse 作为这个答案的基础，所以我的投票也投给了他。

如何将另一个 child 添加到响应式数据表

How can I add another child to a responsive datatable

javascript

jquery

datatables