具有jQuery DataTables的单元格中的响应扩展和HTML内容 [英] Responsive extension and HTML content in a cell with jQuery DataTables

问题描述

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

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

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

 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;编辑< / a>& nbsp;'; 
 return btn; 
}，
  

解决方案

解决方案

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

  response：{
 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列）.header（））; 
 
返回'< tr>'+ 
'< td>< b>'+ 
 header.text ：'+ 
'< / b>< / td>'+ 
'< td>'+ 
 $（api.cell（cell）.node（））.html （）+ 
'< / td>'+ 
'< / tr>'; 
}）toArray（） 
 
返回数据？ 
 $（'< table />'）。append（data）：
 false; 
} 
} 
} 
  

DEMO

请参阅这个jsFiddle 进行代码和演示。

I use jQuery DataTables in my application.

I want my application be accessed by mobile devices. I implement http://jsfiddle.net/ryanoc/ebRXw/ in my application. But the button can not be displayed. The data look like this : [object Object]

I use render option in jQuery DataTables to display the button

"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;
},

解决方案

SOLUTION

Add the following option to your DataTables initialization code.

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;
        }
    }
}

DEMO

See this jsFiddle for code and demonstration.

这篇关于具有jQuery DataTables的单元格中的响应扩展和HTML内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！