DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

linebreaks render

linebreaks render

Rectec013Rectec013 Posts: 42Questions: 10Answers: 0
in Free community support

Hello , i have a json object like ["1","2"] and i want to use a render for linebreaks .
i tried {
"render": function(data, type, row){
return data.split(", ").join("<br/>");
}
but it doesn´t work .
any Idea ? Thanks

This question has an accepted answers - jump to answer

Answers

  • bindridbindrid Posts: 730Questions: 0Answers: 119

    Split is for a string. You are dealing with an array.

    return  data[0] + "<br /> + data[1];
  • bindridbindrid Posts: 730Questions: 0Answers: 119

    ooops, left off a quote above

    return  data[0] + "<br />" + data[1];
  • Rectec013Rectec013 Posts: 42Questions: 10Answers: 0

    thanks but it doesn´ t work .
    {
    "render": function(data, type, row){
    return data[0] + "<br />" + data[1];
    }
    i have in my table a comma separated text , and i am trying to find a way to put a <br /> at one or more columns .

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin

    Use Array.prototype.join to join an array.

    Allan

  • Rectec013Rectec013 Posts: 42Questions: 10Answers: 0

    Thanks Allan .
    The problem is that a have a text list with comma separated text .
    I need to show on my tabel one column by one , separated data .
    1,2,3,4,5,6,6,7,8,9
    1,2 column one
    3,4 column two
    Josh

  • bindridbindrid Posts: 730Questions: 0Answers: 119

    if your data is in the form of arrays of numbers as string as you show at the top,
    I built an array of numbers using random integers so it looks like;

    [ ["92", "94", "68", "6", "20", "8", "62", "17"],
["95", "77", "34", "93", "5", "74", "1", "44"],
["66", "82", "38", "60", "24", "77", "55", "35"],
["64", "18", "49", "98", "35", "58", "91", "76"],
["60", "23", "66", "72", "61", "37", "44", "18"] ]

    I created two tables, one that shows each value (8 x 10 table)

    I created a second table that is 4 x 10 table that combines numbers with a <br>. You can see it here http://live.datatables.net/qerogefi/1/edit

  • Rectec013Rectec013 Posts: 42Questions: 10Answers: 0

    Thanks for Help bindrid .
    what i have on my table is in each row (not column , sorry ) 2 number with comma separated .
    your Code Work perfectly by the way :)
    Josh

  • bindridbindrid Posts: 730Questions: 0Answers: 119

    I don't give up easy.

    "1,85,69,96,80,51,10,31,80,50,33,5,93,91,58,73,34" for data at

    http://jsbin.com/beyaxek/edit?html,js,output

  • Rectec013Rectec013 Posts: 42Questions: 10Answers: 0

    thanks for Help but i can t open it :( can you post it in another plattform please .

  • bindridbindrid Posts: 730Questions: 0Answers: 119
    Answer ✓ 
    $(document).ready( function () {
  
       // generate fake data string for testing then display it
      var data1 ="1";
      for(var i = 0; i < 16; ++i){
            data1 += "," + String(getRandomInt(1, 100));
       }
       $("#gennum").html(data1);
       // now turn the fake data into an array
       var data2 = data1.split(",");
       var colCount = Math.floor(data2.length/2 + data2.length%2);
       var cols = [];
       for(var j = 0; j < colCount; ++j){
           cols.push({data:null, title:"Set " + (j + 1)});
  
       }
       // now figure out how many columns I need
       
       // DataTable is expecting double dim array for rows and clolumns so 
       var data3 = [];
       data3.push(data2);
  
 
  var table1 = $('#example2').DataTable({data:data3,
      columnDefs:[{targets:"_all",
      render: function(data, type, row, meta){
          return row[meta.col * 2] + "<br/>" + (row[((meta.col * 2)+1)] ||"");
                                          
          }}],
       columns:cols
   });
                             
  
} );

function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min)) + min;
}

    html:

    <!DOCTYPE html>
<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
      <div id="gennum"></div>
    <div class="container">
    </div>
        <div class="container">
      <table id="example2" class="display nowrap" width="100%">
        <thead></thead>
        <tfoot></tfoot>
        <tbody></tbody>
      </table>
    </div>
  </body>
</html>
  • Rectec013Rectec013 Posts: 42Questions: 10Answers: 0

    Thanks bindrid , it works :) :)
    Josh

This discussion has been closed.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.