在jQuery数据表中显示更多，显示更少

Avi 发表于 Dev

avi

我想在jQuery数据表的列中少显示而多显示。我发现许多在普通文本上执行此操作的示例，但是在桌子上却没有。

这是我的代码。

$('#custTable').dataTable({
               bJQueryUI: true,
              "processing": true,
              "serverSide": true,
              "contentType": "application/json",
              "dataType": "jsonp",
              "bStateSave": false,
              "bAutoWidth": false,
              "sAjaxSource": "http://url",
              "sAjaxDataProp": '',
              "crossDomain":true,
              "aoColumns": [{
                "mData":"createdBy"
              },{
                "mData": "createdBySafeId"  ,
                "mRender": function( data, type, full) {
    var showChar = 100;
    var ellipsestext = "...";
    var moretext = "more";
    var lesstext = "less";
        var content = JSON.stringify(data);;

        if(content.length > showChar) {

            var c = content.substr(0, showChar);
            var h = content.substr(showChar-1, content.length - showChar);

            var html = c + '<span class="moreellipses">' + ellipsestext+ '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';

            $(this).html(html);
        }

    $(".morelink").click(function(){
        if($(this).hasClass("less")) {
            $(this).removeClass("less");
            $(this).html(moretext);
        } else {
            $(this).addClass("less");
            $(this).html(lesstext);
        }
        $(this).parent().prev().toggle();
        $(this).prev().toggle();
        return false;
    });

                }
              },{
                "mData": "comment"
             },{
                "mData": "tag"
              }]
            });

但是单元格变成空白。提前致谢

avi

是的，您是对的。我已经更改了我的代码..现在可以正常工作了。

下面是代码：

 var showChar = 100;
    var ellipsestext = "...";
    var moretext = "more";
    var lesstext = "less";
        var contentt = JSON.stringify(data);
        var content = contentt.replace(/["]+/g, '').substring(1, contentt.length-1);



        if(content.length > showChar) {

            var c = content.substr(0, showChar);
            var h = content.substr(showChar-1, content.length - showChar);

            var html = c + '<span class="moreellipses">' + ellipsestext+ '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';

           return  html.toString();
        }

             $(".morelink").click(function(){
                    if($(this).hasClass("less")) {
                        $(this).removeClass("less");
                        $(this).html(moretext);
                    } else {
                        $(this).addClass("less");
                        $(this).html(lesstext);
                    }
                    $(this).parent().prev().toggle();
                    $(this).prev().toggle();
                    return false;
                });

return data;