formatting columns just for responsive.
formatting columns just for responsive.
I created a log page using datatables. the log messages were long . So, I formatted them to 50 characters and added a button to show details of each log. while this works great on desktop but on mobile it gets funky. So, I enabled the responsive option and added columns priority so they are work nice. but 50 characters were too long for the mobile view too. I want to know a way to reformat columns just for the responsive view and keep the 50 character format for desktop as it is.
```
(function () {
var app = angular.module('app');
app.controller('logController', ['$scope', '$filter', '$sce', function ($scope, $filter, $sce) {
var state = {};
var init = function () {
$(document).ready(function () {
logTable = $('#table_Logs').DataTable({
processing: true,
serverSide: true,
searchDelay: 500,
responsive: true,
ajax: {
url: '/API/Exceptions/pagged',
method: 'POST',
datatype: 'json',
data: function (serverParams) {
// replace column index with column names.
for (var i = 0; i < serverParams.order.length; i++) {
serverParams.order[i].column = serverParams.columns[serverParams.order[i].column].data;
}
// remove columns array, to send lower data to server.
delete serverParams['columns'];
return serverParams;
}
},
columns: [
{
data: 'timeStamp',
render: function (timeStamp) {
return $filter('date')(timeStamp, 'medium');
}
},
{
data: 'exception',
render: function (exception) {
return exception ? exception.slice(0, 50) : '';
}
},
{
data: 'message',
render: function (message) {
return message ? message.slice(0, 50) : '';
}
},
{
orderable: false,
render: function () {
return `<i class="showLog fa fa-fw fa-2x fa-plus-circle"></i>`;
}
}
],
columnDefs: [
{ responsivePriority: 1, targets: 0 },
{ responsivePriority: 2, targets: 1 },
{ responsivePriority: 3, targets: 3 },
],
responsive: {
details: 'false'
},
});
logTable.on('click', '.showLog', function () {
var tr = $(this).closest('tr');
var row = logTable.row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
var rowinfo = row.data();
if (rowinfo == undefined) {
rowinfo = logTable.row(tr.prev()).data();
}
row.child(format(rowinfo)).show();
tr.addClass('shown');
}
});
function format(logRow) {
return '<dl>' +
'<dt><h4 class="text-bold">Exception:</h3></td>' +
'<dd><pre class="error-log-pre">' + $sce.trustAsHtml(logRow.exception) + '</pre></td>' +
'<dt><h4 class="text-bold">Message:</h3></td>' +
'<dd><pre class="error-log-pre">' + $sce.trustAsHtml(logRow.message) + '</pre></td>' +
'<dt><h4 class="text-bold">Additioanl Properties:</h3></td>' +
'<dd><pre class="error-log-pre">' + logRow.properties + '</pre></td>';
}
});
};
$scope.state = state;
$scope.init = init;
}]);
})();
This discussion has been closed.
Answers
You could use the ellipsis renderer, and adjust the number of characters based on the width of the screen when you initialise the table.
Colin
I have tried that. it doesn't change in responsive.
We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin
Its whole Application which i cannot send all of it. But here is link to its HTML and Js file.
https://jsbin.com/luraporopo/edit?html,js,output
Thanks, but we need to see this problems so we can debug them.
Colin