CODEWITHSUNDEEP
datatablesyadcf
AnotherOther
AnotherOther

Reputation: 107

yadcf - Select - Split multiple values onto separate lines in cell

I am using yadcf on datatables.js to populate and filter a column Select e.g. a list of Countries. The select contains unique values for country such as:

Austria

France

Italy

USA

UK

A record can have multiple values for Country. For example a record might have "USA" and "UK". The countries display in the cell like this:

USA,UK

I want the values for Country to display on separate lines within the cell, like this:

USA

UK

Is it possible to do that?

Upvotes: 0

Views: 686

Answers (2)

Daniel
Daniel

Reputation: 37061

You could use the text_data_delimiter: '<br>' just make sure you got no white spaces in yout <td> cell, see live sample here

Code snippets:

$(document).ready(function(){
  oTable = $('#example').dataTable().yadcf([
    {
      column_number : 0,
      text_data_delimiter: '<br>'
    }]);
});

HTML:

  <table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
    <thead>
      <tr>
        <th>Some Data</th>
        <th>More Data</th>
        <th>Yes / No</th>
        <th>Values</th>
        <th>Tags</th>
      </tr>
    </thead>
    <tbody>
      <tr class="odd gradeX">
        <td>One<br>Two</td>
        <td>More Data 11</td>
        <td>Yes</td>
        <td>a_value,b_value</td>
        <td><span class="label lightblue">Tag1</span><span class="label lightblue">Tag2</span></td>
      </tr>
      <tr class="even gradeC">
        <td>Three<br>Four</td>
        <td>More Data 22</td>
        <td>No</td>
        <td>b_value,c_value</td>
        <td><span class="label lightblue">Tag1</span><span class="label lightblue">Tag3</span></td>
      </tr>      
    </tbody>
  </table>

Upvotes: 3

AnotherOther
AnotherOther

Reputation: 107

I came back to this today and solved it in datatables, specifically in the 'render' option.

If there was more than one country name in the data row, I parsed the array and added a BR. This makes the country names display on separate lines in the TD.

'render': function (data, string, row) {

    var countryNames = "";

    $.each(data, function (i, item) {
        countryNames += item + "<br />";
    })

    return countyNames;
}

Upvotes: 0

Related Questions