如果文本长度超过 20，则显示显示更多/显示更少选项

Question

如果文本长度超过 20 个字符，我尝试在我的 Debatable 列描述中添加选项显示Show more 选项并折叠此列。 我尝试了几个选项，其中一个对我有用的是这样的

function loadDataTable() {
    dataTable = $('#tblData').DataTable({
        "ajax": {
            "url": "/Manager/Ticket/GetAll"
        },
        "columnDefs": [{
            "targets": 0,
            "data": "description",
            "render": function (data, type, row, meta) {
                return type === 'display' && data.length > 20 ?
                    '<span title="' + data + '">' + data.substr(0, 17) + '...</span>' :
                    data;
            }
        }],
        "columns": [
            {
                "data": "description",
                "width": "10%",
                //"render": function (data) {
                //    return '<a href="#" id="showmore">Prikazi vise</a>'
                //}
            },
            { "data": "shortDescription", "width": "10%" },
            { "data": "dateAndTime", "width": "10%" },
            { "data": "ticketType.name", "width": "10%" },
            { "data": "status", "width": "10%" },
            {
                "data": "applicationUser.name",
                "width": "10%",
                "render": function (data) {
                    return '<a id="' + data + '" class="text-info user-details" data-toggle="modal" data-target="#userDetails" href="' + data + '" target_blank>' + data + '</a>'
                }
            },
            {
                "data": "id",
                "render": function (data) {
                    return `
                            <div class="text-center">   
                                <a href="/Manager/Ticket/Details/${data}" class="btn btn-success text-white" style="cursor:pointer">
                                   <i class="fas fa-info-circle">Detalji/Chat</i>
                                </a>   
                                <a href="/Manager/Ticket/Upsert/${data}" class="btn btn-primary text-white" style="cursor:pointer">
                                    <i class="fas fa-edit">Uredi</i>
                                </a>                           
                            </div>
                           `;
                }, "width": "15%"
            }
        ]
    });
}

在我添加columnsDef之后

"columnDefs": [{
            "targets": 0,
            "data": "description",
            "render": function (data, type, row, meta) {
                return type === 'display' && data.length > 20 ?
                    '<span title="' + data + '">' + data.substr(0, 17) + '...</span>' :
                    data;
            }
        }],

此选项有效，但仅当用户悬停列时才会显示文本。我添加了... 并且我想创建这个树点需要像<a> 并且应该是可点击的，当用户点击它需要显示更多和显示更少选项。 我从这里开始检查几个帖子

REFERENCE 1

这里的问题是我是 jQuery 和 JavaScript 的菜鸟，我不知道如何实现这一方面。

这就是现在的样子

更新

我找到了一些解决方案，但根本不起作用。我改变了我的columnDef

"columnDefs": [{
        "targets": 0,
        "data": "description",
        "render": function (data, type) {
            return type === 'display' && data.length > 20 ?
                '<span id="outer" data-shrink="' + data.substr(0, 17) + '"  title="' + data + '"></span><span id="show">...</span>' :
                data;
        }
    }],

这是我的 JavaScript

$(document).ready(function () {
    $(".tblData").hide();
    $(".showmore").on("click", function () {
        var txt = $(".tblData").is(':visible') ? 'Vise' : 'Manje';
        $(".showmore").text(txt);
        $(this).next('.tblData').slideToggle(200);
    });
});

我成功地将... 添加为可点击，但是当我点击时没有显示文字。

更新

"columnDefs": [{
            "targets": 0,
            "data": "description",
            "render": function (data, type) {
                return type === 'display' && data.length > 20 ?
                    '<span id="outer" title="' + data + '">' + data.substr(0, 17) + '</span><span id="show">...</span>' :
                    data;
            }
        }],



$('#show').click(function () {
    var text = $('#outer').attr('title');
    $(this).text(text);
    $('#show').after('<a id="less" onclick="someFunction()" href="#"> Show less</a>');
    $('#outer').text('');
});


function someFunction() {
    console.log('test');
    $('#less').remove();
    var txt = $('#outer').attr('data-shrink');
    $('#show').text('');
    $('#outer').text(txt);
    $('#show').text('...');
}

Answer 1

var len = $('#outer').text();
if(len.length > 20) {
   var txt = $('#outer').attr('data-shrink');
   console.log(txt);
   $('#outer').text(txt);
   $('#show').text('...');
}

$('#show').click(function() {
  var text = $('#outer').attr('title');
  console.log('text', text.length);
  $(this).text(text);
  $('#show').after('<a id="less" onclick="someFunction()" href="#"> Show less</a>');
  $('#outer').text('');
});


function someFunction() {
  console.log('test');
  $('#less').remove();
  var txt = $('#outer').attr('data-shrink');
  $('#show').text('');
  $('#outer').text(txt);
  $('#show').text('...');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="outer" data-shrink="Das ist ein" title="Das ist ein ganzer Text langer Text">Das ist ein sehr langer Text</span><span id="show"></span>

只需将 html 替换为您的变量即可。