Jquery datatables 数据表colspan排序

Datatable jquery插件在引入colspan或rowspan时出错。

---

是否有其他方法可以解决此问题。

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

---

只需使用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 
  });
});

---

Datatable不支持colspan，但我们总是使用CSS和javascript。下面是我在datatable中使用调用范围的技巧，但您必须丢失搜索和排序功能：（

假设您有一张如下所示的桌子：

|校长1 |校长2 |校长3 |
|数据11 |数据12 |数据13 |
|第一行的列跨度|
|数据21 |数据22 |数据23 |
|第二行的列跨度|
|数据31 |数据32 |数据33 |
|第三行的列跨度|

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

校长1校长2校长3
数据11数据12数据13
第一行的列跨度
数据21数据22数据23
2st.行的列跨度

修复datatable错误并隐藏所有不必要的行

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

$（文档）.ready（函数（）{
\$（'#示例'）。数据表（{
“bSort”：错误，
“bFilter”：错误，
“fnRowCallback”：函数（nRow、aData、iDisplayIndex）{
如果（（iDisplayIndex+1）%2==1）
{
\$（'td:eq（0'），nRow）.attr（'colspan'，3）；
对于（var i=1；i，如果您不是从服务器端获取数据，则可以使用此代码

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

$（文档）.ready（函数（）{
$（'#示例'）。数据表（{
“bSort”：错误，
“bFilter”：错误，
“fnRowCallback”：函数（nRow、aData、iDisplayIndex）{
如果（（iDisplayIndex+1）%2==1）
{
$（'td:eq（0'），nRow）.attr（'colspan'，3）；
对于（var i=1；i'Row Detail'链接已断开）我已修复该链接
<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();

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