1

This Jquery datatable example says I have to add a <th> for every column, because of handlers. I have this example, I added an extra row of empty headers, to be able to create a datatable.

Is there a way to create datatable without adding this extra row of headers? I need colspan in the header (doesn't matter if I loose the sorting for the first 2 columns, with colspan header).

HTML code:

<table id="reportTable0" border="0" class="table" cellspacing="1" cellpadding="0">

  <thead>
    <tr>
      <th rowspan="1" colspan="2" class="dim_ctg sorting">
        Measure&nbsp;
      </th>
      <th valign="top" colspan="1" class="dim_title">
        <div class="th-inner sortable both"> Academy 1 </div>
      </th>
      <th valign="top" colspan="1" class="dim_title">
        <div class="th-inner sortable both"> Academy 2 </div>
      </th>
      <th valign="top" colspan="1" class="dim_title">
        <div class="th-inner sortable both"> Academy 3 </div>
      </th>
      <th valign="top" colspan="1" class="dim_title">
        <div class="th-inner sortable both"> Academy 4 </div>
      </th>
      <th nowrap="" class="dim_ctg">
        <div class="th-inner sortable both">

          <span class="modal-trigger" data-toggle="modal" data-target="#' + modal3Id + '">AVG</span>



        </div>
      </th>
    </tr>
    <tr>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td align="left" class="dim_title_left"> Course name </td>
      <td align="left" class="dim_title_left" rowspan="1"> CASE_REPORT_1 </td>
      <td align="center" class="dim_val" nowrap="">
        <div align="right" class="val">77.64</div>
      </td>
      <td align="center" class="dim_val" nowrap="">
        <div align="right" class="val">76.33</div>
      </td>
      <td align="center" class="dim_val" nowrap="">
        <div align="right" class="val">76.85</div>
      </td>
      <td align="center" class="dim_val" nowrap="">
        <div align="right" class="val">76.33</div>
      </td>
      <td align="center" class="tot_val" nowrap="">
        <div align="right" class="sum">76.79</div>
      </td>
    </tr>
    <tr>
      <td align="left" class="dim_title_left"> Course name </td>
      <td align="left" class="dim_title_left" rowspan="1"> CASE_REPORT_2 </td>
      <td align="center" class="dim_val" nowrap="">
        <div align="right" class="val">79.60</div>
      </td>
      <td align="center" class="dim_val" nowrap="">
        <div align="right" class="val">78.44</div>
      </td>
      <td align="center" class="dim_val" nowrap="">
        <div align="right" class="val">79.39</div>
      </td>
      <td align="center" class="dim_val" nowrap="">
        <div align="right" class="val">77.58</div>
      </td>
      <td align="center" class="tot_val" nowrap="">
        <div align="right" class="sum">78.84</div>
      </td>
    </tr>
    <tr>
      <td align="left" class="dim_title_left"> Course name </td>
      <td align="left" class="dim_title_left" rowspan="1"> CASE_REPORT_3 </td>
      <td align="center" class="dim_val" nowrap="">
        <div align="right" class="val">79.40</div>
      </td>
      <td align="center" class="dim_val" nowrap="">
        <div align="right" class="val">80.07</div>
      </td>
      <td align="center" class="dim_val" nowrap="">
        <div align="right" class="val">80.67</div>
      </td>
      <td align="center" class="dim_val" nowrap="">
        <div align="right" class="val">80.04</div>
      </td>
      <td align="center" class="tot_val" nowrap="">
        <div align="right" class="sum">80.14</div>
      </td>
    </tr>
    <tr>
      <td align="left" class="dim_title_left"> Course name </td>
      <td align="left" class="dim_title_left" rowspan="1"> CASE_REPORT_4 </td>
      <td align="center" class="dim_val" nowrap="">
        <div align="right" class="val">80.72</div>
      </td>
      <td align="center" class="dim_val" nowrap="">
        <div align="right" class="val">80.76</div>
      </td>
      <td align="center" class="dim_val" nowrap="">
        <div align="right" class="val">80.89</div>
      </td>
      <td align="center" class="dim_val" nowrap="">
        <div align="right" class="val">81.36</div>
      </td>
      <td align="center" class="tot_val" nowrap="">
        <div align="right" class="sum">80.92</div>
      </td>
    </tr>
    <tr>
      <td align="left" class="dim_title_left"> Course name </td>
      <td align="left" class="dim_title_left" rowspan="1"> CASE_REPORT_5 </td>
      <td align="center" class="dim_val" nowrap="">
        <div align="right" class="val">80.69</div>
      </td>
      <td align="center" class="dim_val" nowrap="">
        <div align="right" class="val">80.31</div>
      </td>
      <td align="center" class="dim_val" nowrap="">
        <div align="right" class="val">80.83</div>
      </td>
      <td align="center" class="dim_val" nowrap="">
        <div align="right" class="val">80.83</div>
      </td>
      <td align="center" class="tot_val" nowrap="">
        <div align="right" class="sum">80.68</div>
      </td>
    </tr>
    <tr>
      <td align="left" class="dim_title_left"> Course name </td>
      <td align="left" class="dim_title_left" rowspan="1"> EXAM_1 </td>
      <td align="center" class="dim_val" nowrap="">
        <div align="right" class="val">84.12</div>
      </td>
      <td align="center" class="dim_val" nowrap="">
        <div align="right" class="val">82.37</div>
      </td>
      <td align="center" class="dim_val" nowrap="">
        <div align="right" class="val">84.13</div>
      </td>
      <td align="center" class="dim_val" nowrap="">
        <div align="right" class="val">83.36</div>
      </td>
      <td align="center" class="tot_val" nowrap="">
        <div align="right" class="sum">83.56</div>
      </td>
    </tr>
    <tr>
      <td align="left" class="dim_title_left"> Course name </td>
      <td align="left" class="dim_title_left" rowspan="1"> EXAM_2 </td>
      <td align="center" class="dim_val" nowrap="">
        <div align="right" class="val">80.21</div>
      </td>
      <td align="center" class="dim_val" nowrap="">
        <div align="right" class="val">81.91</div>
      </td>
      <td align="center" class="dim_val" nowrap="">
        <div align="right" class="val">81.25</div>
      </td>
      <td align="center" class="dim_val" nowrap="">
        <div align="right" class="val">79.45</div>
      </td>
      <td align="center" class="tot_val" nowrap="">
        <div align="right" class="sum">80.81</div>
      </td>
    </tr>
    <tr>
      <td align="left" class="dim_title_left"> Course name </td>
      <td align="left" class="dim_title_left" rowspan="1"> Final Mark </td>
      <td align="center" class="dim_val" nowrap="">
        <div align="right" class="val">82.07</div>
      </td>
      <td align="center" class="dim_val" nowrap="">
        <div align="right" class="val">81.29</div>
      </td>
      <td align="center" class="dim_val" nowrap="">
        <div align="right" class="val">81.52</div>
      </td>
      <td align="center" class="dim_val" nowrap="">
        <div align="right" class="val">81.28</div>
      </td>
      <td align="center" class="tot_val" nowrap="">
        <div align="right" class="sum">81.53</div>
      </td>
    </tr>
    <tr>
      <td align="left" class="dim_title_left"> Course name </td>
      <td align="left" class="dim_title_left" rowspan="1"> MIDTERM </td>
      <td align="center" class="dim_val" nowrap="">
        <div align="right" class="val">84.85</div>
      </td>
      <td align="center" class="dim_val" nowrap="">
        <div align="right" class="val">84.69</div>
      </td>
      <td align="center" class="dim_val" nowrap="">
        <div align="right" class="val">84.87</div>
      </td>
      <td align="center" class="dim_val" nowrap="">
        <div align="right" class="val">84.80</div>
      </td>
      <td align="center" class="tot_val" nowrap="">
        <div align="right" class="sum">84.81</div>
      </td>
    </tr>
    <tr>
      <td align="left" class="dim_title_left"> Course name </td>
      <td align="left" class="dim_title_left" rowspan="1"> MR_GB </td>
      <td align="center" class="dim_val" nowrap="">
        <div align="right" class="val">0</div>
      </td>
      <td align="center" class="dim_val" nowrap="">
        <div align="right" class="val">0</div>
      </td>
      <td align="center" class="dim_val" nowrap="">
        <div align="right" class="val">0</div>
      </td>
      <td align="center" class="dim_val" nowrap="">
        <div align="right" class="val">0</div>
      </td>
      <td align="center" class="tot_val" nowrap="">
        <div align="right" class="sum">0</div>
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td class="dim_ctg" nowrap="">
        <span class="modal-trigger" data-toggle="modal" data-target="#">Course </span>
      </td>
      <td class="dim_ctg" nowrap="">
        <span class="modal-trigger" data-toggle="modal" data-target="#">Component </span>
      </td>
      <td align="center" class="tot_sum" nowrap="">
        <div align="right" class="sum" id="divTC_12_1">80.99</div>
      </td>
      <td align="center" class="tot_sum" nowrap="">
        <div align="right" class="sum" id="divTC_12_2">80.10</div>
      </td>
      <td align="center" class="tot_sum" nowrap="">
        <div align="right" class="sum" id="divTC_12_3">80.58</div>
      </td>
      <td align="center" class="tot_sum" nowrap="">
        <div align="right" class="sum" id="divTC_12_4">80.13</div>
      </td>
      <td align="center" class="tot_sum" nowrap="">
        <div align="right" class="sum" id="divTC_12_5">80.46</div>
      </td>
    </tr>

  </tfoot>
</table>

JavaScript code:

var options = {
  sDom: 'rt'
};
$('#reportTable0').DataTable(options);
Improve this question

1 Answer 1

Reset to default
3

Just add three resource and datatable will work 

<script src="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css"></script>
<script src=" http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>    
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>

Also remove This Section

<tr>
  <th></th>
  <th></th>
  <th></th>
  <th></th>
  <th></th>
  <th></th>
  <th></th>
</tr>
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

jquery and datatable are added, you can check in JSFiddle's left panel, on External Resources section
many time its happens to jquery and datatable files are conflig so use this file and also remove that extra <tr> <th>
jsfiddle.net/myrluk3/ywuzg6zm/4 ... it seems that working, but I got a JS error because of the missing headers
Here in the example is working with that JS error, but in my application stops

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.