使用jQuery DataTables在单元格中的响应式扩展和HTML内容

时间:2015-10-09 04:53:08

标签: javascript datatables

我在我的应用程序中使用jQuery DataTables。

我希望移动设备可以访问我的应用程序。我在我的应用程序中实现了http://jsfiddle.net/ryanoc/ebRXw/。但是按钮无法显示。数据如下所示:[object Object]

我在jQuery DataTables中使用render选项来显示按钮

"render": function(data, type, full ){
    var btn = '<a href="' + BASEURL + 'room/edit/'+ data.id +'" class="btn btn-primary btn-xs"><i class="fa fa-edit"></i>&nbsp;Edit</a>&nbsp;';
    return btn;
},

1 个答案:

答案 0 :(得分:1)

  

<强>解

将以下选项添加到DataTables初始化代码中。

responsive: {
    details: {
        type: 'inline',
        renderer: function (api, rowIdx) {
            var theRow = api.row(rowIdx);

            var data = api.cells(rowIdx, ':hidden').eq(0).map(function (cell) {
                var header = $(api.column(cell.column).header());

                return '<tr>' +
                    '<td><b>' +
                    header.text() + ':' +
                    '</b></td> ' +
                    '<td>' +
                    $( api.cell( cell ).node() ).html() +
                    '</td>' +
                    '</tr>';
            }).toArray().join('');

            return data ?
                $('<table/>').append(data) :
                false;
        }
    }
}
  

<强>样本

请参阅this jsFiddle以获取代码和演示。