jquery-datatables - 数据表 colspan 排序

Question

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

Answer 1

只需使用一些 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 2

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

数据表 Colspan

行详细信息

Answer 3

Datatable 不支持 colspan，但我们总是使用 CSS 和 javascript 进行欺骗。这是我将调用跨度与数据表一起使用的技巧，但是您必须失去搜索和排序功能:(。

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

|标头1|标头2|标头3|
|数据 11|数据 12|数据 13|
|Col SPAN 第一名。行 |
|数据 21|数据 22|数据 23|
|第二行的 Col SPAN |
|数据 31|数据 32|数据 33|
|Col SPAN 第三名。行 |

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