오래된 개발자!!!

화면에 출력할 값이 너무 길어 툴팁 (title) 으로 원본데이터는 다 보이고  줄여서 보이게 하는 방법 정리.

CSS

.truncate {
    max-width: 200px;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

Datatable : columnDefs 부분

{
    targets: [1, 3], // 적용할 컬럼 번호 (2번째, 4번째)
    render: function(data, type, row, meta) {
        const maxLength = 50; // 원하는 최대 길이
        if (type === 'display') {
            return data && data.length > maxLength
                ? '<span class="truncate" title="' + data + '">' + data.substr(0, maxLength) + '...</span>'
                : data;
        }
        return data; // 그 외에는 원본 그대로
    }
}

Datatable : Excel 버튼 부분

buttons: [
    {
        extend: "excelHtml5",
        text: "Excel 다운로드",
        exportOptions: {
            columns: ':visible',
            format: {
                body: function (data, row, column, node) {
                    try {
                        // HTML 문자열을 안전하게 파싱
                        const $el = $('<div>').append($.parseHTML(data));
                        const original = $el.find('[title]').attr('title');
                        return original || $el.text() || data;
                    } catch (e) {
                        return data;
                    }
                }
            }
        }
    }
]