Question

引入colspan或rowspan时，Datatable jquery插件会出错。有没有其他方法可以通过它。

Answer 1

Datatables不支持colspan。您可以向表中添加可以是任何格式的详细信息行，例如单击展开行。

Answer 2

只需使用一些jQuery手动执行：

$(function(){
  var tableRows = $('#myDatatable tbody tr');
  $.each(tableRows, function (index, value) {
    var cells = $(value).find('td');
    $(cells[1]).remove(); // for example I want to remove cell 1
    $(cells[0]).attr('colspan','2'); // for example I want to set colspan = 2 for cell 0 
  });
});

Answer 3

Datatable不支持colspan，但我们总是使用CSS和javascript进行操作。这是我使用数据表调用span的技巧，但你必须失去搜索和排序功能：（。

假设你有一张类似下面的表格：

|头1 |头2 | Header3 |
|数据11 |数据12 |数据13 |
| Col SPAN For 1st。行|
|数据21 |数据22 |数据23 |
|第二行Col SPAN |
|数据31 |数据32 |数据33 |
| Col SPAN For 3rd。行|

<table>
<thead>
<tr> <th> Header1</th>  <th> Header2</th> <th> Header3</th> </tr>
</thead>
<tbody>
<tr><td>Data 11</td><td>Data 12</td><td>Data 13</td></tr>
<tr><td >Col SPAN For 1st.  Row</td></td></td></tr>
<tr><td>Data 21</td><td>Data 22</td><td>Data 23</td></tr>
<tr><td colspan=3>Col SPAN For 2st.  Row</td></td></td></tr>
</tbody>

修复数据表错误并隐藏所有不必要的行

$(document).ready(function() {
            \$('#example').dataTable( {
                "bSort" : false,
                "bFilter": false,
                "fnRowCallback": function( nRow, aData, iDisplayIndex ) {
                    if((iDisplayIndex + 1)%2 == 1)
                    {
                        \$('td:eq(0)', nRow).attr('colspan',3);
                        for(var i =1; i<=2;i++){
                        \$('td:eq('+i+')', nRow).attr('colspan',0);
                        \$('td:eq('+i+')', nRow).hide();
                        }                       
                    }
                    return nRow;
                    }
            } );
        } );

Answer 4

如果您没有从服务器端获取数据，则可以使用此代码。

jQuery.fn.dataTableExt.oApi.fnFakeRowspan = function ( oSettings, iColumn, bCaseSensitive ) {
  for(var i in oSettings.aoData){
    var pageSize = oSettings._iDisplayLength;
    var oData = oSettings.aoData[i];
    var cellsToRemove = [];
    for (var iColumn = 0; iColumn < oData.nTr.childNodes.length; iColumn++) {
      var cell = oData.nTr.childNodes[iColumn];
      var rowspan = $(cell).data('rowspan');
      var hide = $(cell).data('hide');

      if (hide) {
        cellsToRemove.push(cell);
      } else if (rowspan > 1) {
        cell.rowSpan = rowspan;
      }
    }
    for(var j in cellsToRemove){
      var cell = cellsToRemove[j];
        oData.nTr.removeChild(cell);      
    }
  } 
  oSettings.aoDrawCallback.push({ "sName": "fnFakeRowspan" });
  return this;
};

在HTML中不使用rowspan属性。而是使用：

<table id = "myTable">
    <tr>
        <td data-rowspan = "3">
            Content with rowspan = 3
        </td>
    </tr>
    <tr>
        <td data-hide = "true">
            Content with rowspan = 3
        </td>
    </tr>
    <tr>
        <td data-hide = "true">
            Content with rowspan = 3
        </td>
    </tr>
</table>

在初始化后在数据表上调用它。

$('#myTable').dataTable().fnFakeRowspan();

Answer 5

$(document).ready(function() {
            $('#example').dataTable( {
                "bSort" : false,
                "bFilter": false,
                "fnRowCallback": function( nRow, aData, iDisplayIndex ) {
                    if((iDisplayIndex + 1)%2 == 1)
                    {
                        $('td:eq(0)', nRow).attr('colspan',3);
                        for(var i =1; i<=2;i++)
                        {
                        $('td:eq('+i+')', nRow).attr('colspan',0);
                        }                       
                    }
                    return nRow;
                    }
            } );
        } );

数据表colspan排序

5 个答案: