在jQuery数据表中显示更多，显示更少 [英] show more show less in a jquery data table

问题描述

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

i want to put show less and show more in a column of a jquery data table . i found many example of doing this on a normal text ..but not on a table .

这是我的代码.

$('#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"
              }]
            });

但是该单元格将变为空白.预先感谢

but the cell is coming as blank . thanks in advance

推荐答案

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

yes, you are right .i've changed my code ..and now it's working.

下面是代码:

 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;

这篇关于在jQuery数据表中显示更多，显示更少的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！