Question

How can I add another(two) child(ren) to a responsive datatable.

If the table is too narrow and I click the + button this does nothing

Any thoughts on this?

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中的列时，如果该特殊列标题与某个预定值匹配（我使用'Extra 10'这是最后一列的标题），则可以显示该列所需的内容。

请参阅此JSFiddle进行演示。

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

How can I add another child to a responsive datatable

2 个答案: