javascript - Jquery 数据表标题 colspan

Question

This Jquery 数据表示例说我必须添加 <th>对于每一列，因为处理程序。我有 this例如，我添加了一行额外的空标题，以便能够创建数据表。

有没有一种方法可以在不添加这一行额外的标题的情况下创建数据表？我需要 colspan在标题中(如果我使用 colspan 标题松开前 2 列的排序并不重要)。

HTML代码:

<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 代码:

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

Answer 1

只需添加三个资源和数据表就可以了

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

同时删除本节

<tr>
  <th></th>
  <th></th>
  <th></th>
  <th></th>
  <th></th>
  <th></th>
  <th></th>
</tr>