formatting columns just for responsive.

gullfounder

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

})();

colin

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

gullfounder

I have tried that. it doesn't change in responsive.

colin

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

gullfounder

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

colin

Thanks, but we need to see this problems so we can debug them.

Colin