0

Im using DataTables.Js in my project. I want to add a nested table after each row, but without Ajax or javascript,JUST PURE HTML. below is an example.

#example th {
  background: #eeb;
  border: solid 1px #eba;
}
#example td {
  background: #ddd;
  border: solid 1px #4a4;
}
#example table td {
  background: #ccf;
  border: solid 1px #555;
}
<table cellpadding="0" cellspacing="0" border="0" class="dataTable" id="example">
  <thead>
    <tr>
      <th>Rendering engine</th>
      <th>Browser</th>
      <th>Platform(s)</th>
      <th>Engine version</th>
      <th>CSS grade</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Trident</td>
      <td>Internet Explorer 4.0</td>
      <td>Win 95+</td>
      <td>4</td>
      <td>X</td>
    </tr>
    <tr>
      <td colspan="5">
        <table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">
          <tbody>
            <tr>
              <td>Full name:</td>
              <td>Airi Satou</td>
            </tr>
            <tr>
              <td>Extension number:</td>
              <td>5407</td>
            </tr>
            <tr>
              <td>Extra info:</td>
              <td>And any further details here (images etc)...</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
    <tr>
      <td>Trident</td>
      <td>Internet Explorer 5.0</td>
      <td>Win 95+</td>
      <td>5</td>
      <td>C</td>
    </tr>
  </tbody>
</table>

The table renders but the sorting filters don't work. How can I go around this so that the sorting filters work and the details rows always respond to the parent row filtering?

Improve this question
5
  • I added css borders+backgrounds to see what is what. Not real pretty but the point was to make things more visible. Commented Jan 20, 2017 at 14:51
  • 2
    Then a real comment: how does using a Javascript library (DataTables.Js) go together with your statement "I want to add a nested table ... without Ajax or javascript,JUST PURE HTML"? Sounds rather contradictory, you'll need to explain better how & why. Commented Jan 20, 2017 at 14:54
  • The thing is I want to show data in summary. E.G, For an exam that has three components, I want to show all the components first listed with their score then the average score but filter only with the average score, for all the exams Commented Jan 20, 2017 at 15:12
  • You say "sorting filters don't work" -> show how you coded this (by editing the question). You want "details rows always respond" -> please clarify what you consider detail rows, and possible coding attempts too. Then you also talk about a summary on exams and components, this may seem clear to you but not to me (where are 'exams' and 'components' in the table? where do you want the summary? is it just one summary or multiple? how and what does it summarize?). Commented Jan 20, 2017 at 15:41
  • You can't have sorting/filtering without javascript with datatables. Commented Jan 21, 2017 at 0:30
Related questions
1
Trouble with jquery ajax and datatables
1
Datatable in jquery
2
Jquery DataTable
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.