show more show less in a jquery data table

Question

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 .

here is my code .

$('#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

Answer 1

Below code is for showmore/showless button inside datatable for one column:

           $('#table-content').DataTable( {
            data: FinalInfo,  //here FinalInfo means final json data (hence give 
                                   your own parsed json data it will work)

                columns: [
                { title: "SL_NO"},
                { title: "PNO" },
                { title: "ANO" },
                { title: "URL",
                    "render": function(data, type, row, meta){
                           return '<a href="'+data+'"  target="_blank">FILE_URL</a>';
                     }
                },
                { title: "DOCUMENT_NAME", //here one column inside datatable

                 "render": function( data, type, full) {

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

                 if(content.length > showChar) {

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


                         var html = c + '<span class="moreellipses">' + ellipsestext+ '</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a onclick="read(this)" class="morelink">' + moretext + '</a></span>'; //here call the read() function
                        return  html.toString();

                     }
                     return data;
                              }
                },

                { title: "UPDATE_DATE" }

            ]


        } );

      function read(obj){

       if($(obj).hasClass("less")) {
           $(obj).removeClass("less");
           $(obj).html("Showmore");
       } else {
           $(obj).addClass("less");
           $(obj).html("Showless");
       }
       $(obj).parent().prev().toggle();
       $(obj).prev().toggle();
       return false;
} 

Answer 2

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

below is the code :

 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;