A easy way to add ellipses to DataTables with dotdotdot.js

caperneoignis

Since I have not seen anything on this subject I figured I'd give a helping hand for anyone looking around for the same solution. The solution is quit simple when I finally got it working, and it works beautifully with DataTables!.

So some information, this is using: DataTables 1.10.10 and dotdotdot 1.7.4 and JQuery 2.1.4

I stumbled on this solution, when I noticed dotdotdot did not work or was not being executed on the tables that were located on the pages that were not the first page, when you first came to window housing the DataTable. It took me a while to figure out why. It was because the dotdotdot commands were not being executed on the other panels/pages when the window was first created. The first page was working, but none of the others. That is when I stumbled on to my solution. The cells when they were re-rendered did not trigger dotdotdot to run on the newly rendered cells. So the solution was to put dotdotdot into a function and then call it using fnRowCallback since that is supposed to call commands before the table is done being re-rendered.

<script type="text/javascript">
//the standard way of calling dataTables with the exception being we are giving rowCallback the dotinsert function
$(document).ready( function (){
      $("#testTable").dataTable( {
         "fnRowCallback": dotdotdotInsert
       });
  });
  //this is the function that allows dotdotdot to be called on the rows when they are rendered.
  function dotdotdotInsert(){
          $("div.courseDesc").dotdotdot({
               watch: true,
               after: "a.readmore",
              callback: dotdotdotCallback
          });
//This allows for the readmore link to work as expected, although the less portion is not working yet
 // the rest of this portion works great!
  $("div.courseDesc").on("click", "a.readmore", function () {            
            if ($(this).text() == "Read more") {
                var div = $(this).closest("div.courseDesc");
                div.trigger("destroy");
                $(this).text("Less");
                div.css("max-height", "");
                div.css("max-width", "500px");
           } else {
                var div = $(this).closest("div.courseDesc");
                $(this).text("Read more");
                div.css("max-height", "300px");
                div.css("max-width", "200px");
                div.dotdotdot({
                    after: "a.readmore",
                    callback: dotdotdotCallback
                });
             }
        });
    }
 //this is called by dotdotdot and removes the read more if it is not needed.
    function dotdotdotCallback(isTruncated, orgContent) {
        //if the item does not need to be truncated then do not put the link up
        if (!isTruncated) {
            $("a.readmore", this).remove();
        }        
    }
</script>

When I was not using fnRowCallback the dotdotdot method would not be called, after adding dotdotdot to a function and list that function as the callback for fnRowCallback, the elements function as they should.

Please let me know your thoughts, and let me know if you have any questions.

also here is the CSS of the rows in question

#courseDescription
{
    /**width being the same is fine, 
   we need the height to change a bit. **/
    max-height:300px;
    max-width: 200px;
    min-height: 150px;
    min-width: 200px;
    white-space: normal;
    word-wrap: break-word;
    display:inline-block;
}
div.tdContain
{
    /*max-height:300px;
    max-width: 200px;*/
   min-height: 150px;
    min-width: 100px;
    display:inline-block;
    white-space: normal;
    word-wrap: break-word;
}
div.courseDesc
{
    max-height:300px;
    max-width: 200px;
    display:inline-block;
    white-space: normal;
    word-wrap: break-word;
}

I have two different div classes for the rows in the dataTable because the description column is the only column that has a lot of text in it. So it is really the only cell i'm worried about expanding and contracting. The html for this is the standard html layout for a table and in fact is pretty much the basic table you will see in the examples here.

I hope someone finds this useful, and helps them display the data as they want. sorry for the formatting, it kinda got hosed in the copy and paste into here.

Oh! you have to place a div inside of the td cells, other wise this wont work since table cells dont really confine themselves to a max height/width. Also do not add the text-overflow: ellipses to the css style because dotdotdot will do that for you, and it will mess up if CSS has already placed them in the element.

This also works with rowCallback which replaced fnRowCallback in the new version of DataTables. I just tested it and it works the same as before.