CODEWITHSUNDEEP
javascriptjquerydatatables
István
István

Reputation: 5127

Jquery datatables header colspan

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);

Upvotes: 1

Views: 1214

Answers (1)

shivani
shivani

Reputation: 1028

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>

Upvotes: 3

Related Questions