Responsive Extension And Html Content In A Cell With Jquery Datatables

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

Solution 1:

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.