Jquery数据表头colspan

时间：2016-06-16 11:27:31

标签： javascript jquery datatables

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

有没有办法在不添加额外的标题行的情况下创建数据表？我在标题中需要colspan（如果我放弃前两列的排序，使用colspan标题，则无关紧要。）

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

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

1 个答案:

答案 0 :(得分：3)

只需添加三个资源，数据表就可以正常工作

<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>
相关问题
最新问题