17

DataTables の使用に問題があります。最後の列に colspan を追加すると、データテーブル プラグインがテーブルに適用されません。最後の colspan を削除して他の列に配置すると、機能します。

例えば ​​-

<table width="100%" border="0" cellspacing="0" cellpadding="0" id="stu_data_table">
   <thead>
      <tr>    
        <th>&nbsp;</th>
        <th colspan="2">&nbsp;</th>
        <th colspan="2">&nbsp;</th>
      </tr>
   </thead>
   <tbody>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
   </tbody>
</table>

$('#stu_data_table').dataTable({
});

これに対する解決策はありますか？

4

5 に答える 5

4

別の方法は、 を使用することChild rowsです。これにより、下の図に示すように、最終的に親の下に行が追加されます

ここに画像の説明を入力

コード

var table =jQuery('#bwki_sites_display').DataTable( {
    'pageLength': 10,
    'lengthMenu': [ 10, 20, 50, 100, 200 ],
    'order': [[ 0, 'desc' ]],

    }
);
table.rows().every( function () {
    var row = table.row( $(this));
    html = '<i class="fa fa-plus"></i>Colspan will come here';              
    row.child(html).show();
    $(this).addClass('shown');                                              
});
于 2016-01-21T10:10:15.483 に答える
4

dataTable は、colspan または rowspan をサポートしていません。

colspan を使用すると、dataTable は列数/計算を理解できず、undefined が返され、その場合はエラーがスローされます。

したがって、必要な作業は、dataTable に、期待される結果が得られない場合に備えて、代わりになるものは何かを伝えることです。

そのために、次を使用します: defaultContent プロパティ、そしてもちろんターゲット/影響を受ける列を指定します。

例: 3 つの td を持つテーブルでtd colspan="2"を使用する場合、他の 2 つのデフォルト値を設定する必要があります (1 つが既に存在し、それが最初であるため)。

コード：

"aoColumnDefs": [{
  "aTargets": [2,3],
  "defaultContent": "",
}]
于 2015-02-27T16:30:48.980 に答える
1

古いトピックであることは知っていますが、同じ問題がありました。<th colspan="2">は機能していますが、奇妙なことに、最後の列で使用されている場合にのみ機能していません。

それで

これは機能していません

<tr>    
    <th>&nbsp;</th> <!-- column 1 -->
    <th>&nbsp;</th> <!-- column 2 -->
    <th colspan="2">&nbsp;</th> <!-- column 3&4 -->
</tr>

しかし、これは機能しています。

<tr>    
    <th>&nbsp;</th> <!-- column 1 -->
    <th colspan="2">&nbsp;</th> <!-- column 2&3 -->
    <th>&nbsp;</th> <!-- column 4 -->
</tr>

で

于 2020-12-11T15:35:04.327 に答える