Answers

• allan Posts: 61,864Questions: 1Answers: 10,136 Site admin

  December 2016 Answer ✓

  It does make sense, but I'm afraid the ellipsis renderer doesn't work like that since it is string based.

  What you would have to do is have a div in your cell which has white-space: nowrap; text-overflow: ellipsis; overflow: hidden; set in the CSS. That will activate the browser's built in ellipsis.

  Allan
• borconi Posts: 56Questions: 19Answers: 1

  December 2016

  Kudos for the div tip. I tried that directly on the TD but it only works if the TD has a set width, somehow the bulb never light up to just wrap the content into another element, oh well I think I need to take a brake this are obvious signs of tiredness....

  Thanks Allan
• allan Posts: 61,864Questions: 1Answers: 10,136 Site admin

  December 2016

  Yeah - proper ellipsis in tables is surprisingly difficult, which is why I put the rendering plug-in together. It could use a DOM method to get the ellipsis spot on, but that would be really slow since it would involve writing into the DOM and reading back a lot.

  A width on the cell would stop the browser just trying to expand the cell forever to fit the text in.

  Allan
• borconi Posts: 56Questions: 19Answers: 1

  December 2016

  Hmm... I might be doing something wrong, if I wrap a DIV around my data the cell width just grows to match the div....

  Here is my datatable definition:

    
     var curr_table=$('#example').DataTable({
          paging: true,
          info:false,
          "bFilter": true,
          ajax: "overview_data.php",
          "bPaginate": true,
          "iDisplayLength": 200,
           processing: true,
          "aLengthMenu": [[25, 50, 100, 200, 500, 1000, -1], [25, 50, 100,200,500,1000, "All"]],
          scrollY: $(document).height()-270,
          
          columns: [
              
              { data: null,
              render:function(data,type,row) {
                  return "<div class=my_elipsis>" + data.Name + "</div>"}
              },
              { data: null,
              render:function(data,type,row) {
                  return "<div class=my_elipsis>" + data.short_add + "</div>"}
              },
              { data: null,
              render:function(data,type,row) {
                  return "<div class=my_elipsis>" + data.long_description + "</div>"}
              },
              { data: null,
              render:function(data,type,row) {
                  return "<div class=my_elipsis>" + data.Company_Name + "</div>"}
              },
              { data: null,
              render: function ( data, type, row ) {
                  if (data.completed==null)
                      completed=0;
                  else
                      completed=data.completed;
                      return "<span>" +  data.planned + " / " + completed + "</span><img src=./icons/magnifier.png class=magnifier data-id="+data.id+" scheduled="+data.planned+">";
              }
              },
          
              { data: "next_clean"}
              
          ]
    });
  

  And here is the my_elipsis div CSS:

  .my_elipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  

  But instead of the div being limited to the table cell width, the table cell width expands to fit all the text in one line.

  I'm using DataTables with BootStrap.

  Any idea what I'm doing wrong?

  I have tried to add explicit width to the column definition as well but it was simply ignored.
  Thank you.
• borconi Posts: 56Questions: 19Answers: 1

  December 2016

  Ok, I found the problem I was missing table-layout:fixed from my table CSS. Sorted.