Форматирование данных для отзывчивости

Question

Я создал страницу журнала, используя таблицы данных. сообщения журнала были длинными. Итак, я отформатировал их до 50 символов и добавил кнопку, чтобы показать детали каждого журнала. в то время как это прекрасно работает на настольном компьютере, но на мобильном устройстве это становится забавным. Итак, я включил опцию отзывчивости и добавил приоритет столбцов, чтобы они работали хорошо. но 50 символов были слишком длинными для мобильного просмотра. Я хочу знать, как переформатировать столбцы только для адаптивного представления и сохранить 50-символьный формат для рабочего стола, как есть.

<code>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) + '

'+' Сообщение: '+'

' + $sce.trustAsHtml(logRow.message) + '

'+' Свойства Additioanl: '+'

' + logRow.properties + '

'; }}); }; $ scope.state = state; $ scope.init = init;

}]);