columns().nodes() not returning tags?

columns().nodes() not returning tags?

djkong7djkong7 Posts: 22Questions: 3Answers: 0

If I initialize a table like:

<table id="my-table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$3,120</td>
    </tr>
  </tbody>
</table>

<script>
  var table = $('#my-table').DataTable()
</script>

Printing the nodes of a column like:

console.log(table.column(0).nodes());

doesn't show the <th> nodes. Only the <td> nodes. How do I get the <th> nodes using column().nodes()?

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    Hi @djkong7 ,

    You use column().header() for the <th> nodes,

    Cheers,

    Colin

  • djkong7djkong7 Posts: 22Questions: 3Answers: 0

    I would agree with your answer but, I don't believe that it answers the question.

    What I'm really trying to get at is that I have a table similar to:

    <table id="my-table">
      <thead>
        <tr>
          <th>Name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Age</th>
          <th>Start date</th>
          <th>Salary</th>
        </tr>
        <tr>
          <th><input type="text" placeholder="Name"/></th>
          <th><input type="text" placeholder="Position"/></th>
          <th><input type="text" placeholder="Office"/></th>
          <th><input type="text" placeholder="Age"/></th>
          <th><input type="text" placeholder="Start date"/></th>
          <th><input type="text" placeholder="Salary"/></th>
        </tr>
      </thead>
     
      <tbody>
        <tr>
          <td>Tiger Nixon</td>
          <td>System Architect</td>
          <td>Edinburgh</td>
          <td>61</td>
          <td>2011/04/25</td>
          <td>$3,120</td>
        </tr>
      </tbody>
    </table>
     
    <script>
      var table = $('#my-table').DataTable({
        "orderCellsTop": true
      })
    </script>
    

    column(0).header() will only return

    <th>Name</th>
    

    but not

    <th>Name</th>
    <th><input type="text" placeholder="Name"/></th>
    

    The documentation says that column().nodes() should return both the <th> and <td> nodes but, I can't seem to find the <th> nodes.

  • kthorngrenkthorngren Posts: 21,341Questions: 26Answers: 4,954
    Answer ✓

    The developers (@allan and @colin) can confirm but I don't think it is expected that column().nodes() will return the header rows. I see what you are saying about th in the docs. But reading this in the doc implies to me that it is expected to return table row nodes.

    Please note that the order of the nodes in the returned array and which rows the nodes are obtained from (searched rows, visible rows etc) is controlled by the selector-modifier option of the columns() selector used to get the selected columns.

    Like you noted column().header() will only return the header with the ordering listener.

    My suggestion would be to use standard jQuery to get the nodes of the second header.

    Kevin

  • djkong7djkong7 Posts: 22Questions: 3Answers: 0

    @kthorngren
    If @allan or @colin confirm your understanding of the documentation is correct, I will mark your answer as correct.

  • allanallan Posts: 63,516Questions: 1Answers: 10,473 Site admin

    I'll post a fuller reply later (on mobile atm) bit what is expected from that method is that it will return th and td cells from inside the tbody for the column. If you want the header cell use column().header().

    Allan

  • allanallan Posts: 63,516Questions: 1Answers: 10,473 Site admin

    Hi,

    I've just committed a small change to the docs that clarifies that the nodes returned by this method come from the table body (its important to recall that both td and th cells are valid in both the header and body rows.

    Allan

  • djkong7djkong7 Posts: 22Questions: 3Answers: 0

    Thank you everyone for the replies and for the update to the docs.

This discussion has been closed.