jquery datatables word wrap not working

Question

My datatable's column looks wider if the value is too long.

i have following this and this. And setting the width :

aTable = $("#printdata").dataTable({
     "bAutoWidth" : false,
     "bRetrieve"  : true,
     "scrollY": 200,
     "scrollX": true,
     "deferRender": true,
     "scroller": {
          loadingIndicator: true
          },
     "bServerSide": true,
     "bProcessing": true,
     "sAjaxSource": 'show2ndsampling.php',
     "fnServerData": function (sSource,aoData,fnCallback){
          $.ajax({
                   "dataType":'json',
                   "type":'POST',
                   "url":sSource,
                   "data":aoData,
                   "success":function(json){
                          fnCallback(json);
                          }
                   });
          },
    "order"  : [[1,"desc"]],
    "aoColumns"  : [
    /*serial*/{ "width": "30%", target : 3 }
    ]

But there is no change in my datatable.

It means that you don't have spaces in your word. That's why this happens. — xAqweRx
– xAqweRx, Commented Jun 21, 2016 at 8:21

davidkonrad · Accepted Answer · 2016-06-21 09:03:18Z

8

I would do this

table.dataTable tbody td {
  word-break: break-word;
  vertical-align: top;
}

demo -> http://jsfiddle.net/qh63k1sg/

This is implied that autoWidth is set to false and you have given the columns a fixed width (as in the demo and as OP have described he does with aoColumns / columns).

answered Jun 21, 2016 at 9:03

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

neer · Accepted Answer · 2016-06-21 08:56:28Z

2

You can fix this with css.

table /* give class of table*/
{
   table-layout: fixed;
}

table td
{
  word-wrap:break-word;   
  overflow: hidden;
}

answered Jun 21, 2016 at 8:56

neer

4,0926 gold badges22 silver badges34 bronze badges

Comments

xAqweRx · Accepted Answer · 2016-06-21 08:44:38Z

1

For now, I can tell you, that the best way for displaying data is modifying your output.

It means:

if you create response on base of sql query -> you should optimize it and add a space in your quesry.
If you do it in template -> prepare data on templeate part, example on PHP
If you do it on frontend part, make it in JS way.

PHP way :

$result = array( /* your result */);
foreach($result as &$answer ){
   $answer = implode( ", ", explode( ",", $answer) );
}

JS way :

var result = [/* your result */];
for( var index = 0; index < result.length; i++ ){
  result[index] = result[index].split(",").join(", ");
}

answered Jun 21, 2016 at 8:44

xAqweRx

1,2361 gold badge10 silver badges23 bronze badges

Collectives™ on Stack Overflow

jquery datatables word wrap not working

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related