DataTables get class of specific column

Question

I would like to recover the class of a specific column

Indeed I wish to count the number of unique class of a particular column

On the DataTables documentation, I found how to retrieve the data from a column :

  var table = $('#myTable').DataTable({
    "aaSorting": []
  });

  var nbr = table.column( 2 ).data().unique().count();
  console.log (nbr)

But I do not find how to retrieve the class of a specific column

EDIT :

<table id="myTable">
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
      <th>Column 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td class="867">Msg 1</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td class="867">Msg 2</td>
      <td></td>
      <td></td>
      <td></td>
    </tr> 
    <tr>
      <td></td>
      <td class="1087">Msg 3</td>
      <td></td>
      <td></td>
      <td></td>
    </tr> 
    <tr>
      <td></td>
      <td class="867">Msg 4</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>  
  </tbody>
</table>

In this example I should have the number 2 (for two distinct class) -- The class is added through a foreach (PHP)

What do you mean by 'class of a column'? A column in a table is a collection of cells, which may have multiple classes. — Rory McCrossan
– Rory McCrossan, Commented Oct 11, 2018 at 9:21

jeric john carillo · Accepted Answer · 2018-10-11 10:51:31Z

2

Since you have the data column already you can use attr to get the attribute value of class

var getTable = $('#myTable tbody tr');

getTable.each(function(){
  console.log(this).find('td:nth-child(2)').attr('class');
});

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<table id="myTable">
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
      <th>Column 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td class="867">Msg 1</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td class="867">Msg 2</td>
      <td></td>
      <td></td>
      <td></td>
    </tr> 
    <tr>
      <td></td>
      <td class="1087">Msg 3</td>
      <td></td>
      <td></td>
      <td></td>
    </tr> 
    <tr>
      <td></td>
      <td class="867">Msg 4</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>  
  </tbody>
</table>

it should give you the value of attribute class

edited Oct 11, 2018 at 10:51

answered Oct 11, 2018 at 9:31

jeric john carillo

1066 bronze badges

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

1 Comment

Rocstar Over a year ago

Thanks but it doesn't work, I have this error : Uncaught TypeError: table.column(...).attr is not a function

fdomn-m · Accepted Answer · 2018-10-11 09:30:45Z

You can use $("table tr td:nth-child(2)") to get all the cells from a specific column.

Then use .map with return this.className to extract the class names

Followed by a 'unique'/'distinct' action on the array to limit them: See https://stackoverflow.com/a/14438954/2181514

function onlyUnique(value, index, self) { 
    return self.indexOf(value) === index;
}

var clsnames = $("table tr td:nth-child(2)")
                   .map(function() { 
                       return this.className
                   })
                   .toArray()
                   .filter(onlyUnique);

console.log(clsnames.length)
$("#result>span").text(clsnames.length);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
      <th>Column 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td class="867">Msg 1</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td class="867">Msg 2</td>
      <td></td>
      <td></td>
      <td></td>
    </tr> 
    <tr>
      <td></td>
      <td class="1087">Msg 3</td>
      <td></td>
      <td></td>
      <td></td>
    </tr> 
    <tr>
      <td></td>
      <td class="867">Msg 4</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>  
  </tbody>
</table>
<div id='result'>Result: <span></span></div>

Collectives™ on Stack Overflow

DataTables get class of specific column

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related