【问题标题】:JQuery DataTables Merge Same Row DataJQuery DataTables 合并同一行数据
【发布时间】:2016-02-04 12:05:47
【问题描述】:

我正在使用 Jquery DataTables.net。 我想合并数据表上的重复值,例如:

--------------------------------------------
        A         |         1       |     2
--------------------------------------------
        A         |         1       |     4
--------------------------------------------
        A         |         2       |     5
--------------------------------------------

我希望他们是这样的:

---------------------------------------------
                   |               |     2
                   |         1     |---------
         A         |               |     4
                   |---------------|---------
                   |         2     |     5
---------------------------------------------

如何在 DataTables Jquery 上做到这一点? 谢谢。

【问题讨论】:

    标签: javascript jquery datatables html-table tablecell


    【解决方案1】:

    我们需要在 HTML Table 中处理这个.. 参见下面的概念。

    $(document).ready(function () {
        $('#example').dataTable();
        MergeGridCells();
    });
    
    function MergeGridCells() {
        var dimension_cells = new Array();
        var dimension_col = null;
        var columnCount = $("#example tr:first th").length;
        for (dimension_col = 0; dimension_col < columnCount; dimension_col++) {
            // first_instance holds the first instance of identical td
            var first_instance = null;
            var rowspan = 1;
            // iterate through rows
            $("#example").find('tr').each(function () {
    
                // find the td of the correct column (determined by the dimension_col set above)
                var dimension_td = $(this).find('td:nth-child(' + dimension_col + ')');
    
                if (first_instance == null) {
                    // must be the first row
                    first_instance = dimension_td;
                } else if (dimension_td.text() == first_instance.text()) {
                    // the current td is identical to the previous
                    // remove the current td
                    dimension_td.remove();
                    ++rowspan;
                    // increment the rowspan attribute of the first instance
                    first_instance.attr('rowspan', rowspan);
                } else {
                    // this cell is different from the last
                    first_instance = dimension_td;
                    rowspan = 1;
                }
            });
        }
    }
    <link rel="stylesheet" type="text/css" href="//ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
    <link rel="stylesheet" type="text/css" href="//ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables_themeroller.css">
    <script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js"></script>
    <div class="container">
        <table cellpadding="0" cellspacing="0" border="0" class="dataTable" id="example">
            <thead>
                <tr>
                    <th>Rendering engine</th>
                    <th>Browser</th>
                    <th>Platform(s)</th>
                    <th>Engine version</th>
                    <th>CSS grade</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Trident</td>
                    <td>Internet Explorer 4.0</td>
                    <td>Win 95+</td>
                    <td>4</td>
                    <td>X</td>
                </tr>
                <tr>
                    <td>Trident</td>
                    <td>Internet Explorer 5.0</td>
                    <td>Win 95+</td>
                    <td>5</td>
                    <td>C</td>
                </tr>
                <tr>
                    <td>Trident</td>
                    <td>Internet Explorer 5.5</td>
                    <td>Win 95+</td>
                    <td>5.5</td>
                    <td>A</td>
                </tr>
                <tr>
                    <td>Trident</td>
                    <td>Internet Explorer 6</td>
                    <td>Win 98+</td>
                    <td>6</td>
                    <td>A</td>
                </tr>
                <tr>
                    <td>Trident</td>
                    <td>Internet Explorer 7</td>
                    <td>Win XP SP2+</td>
                    <td>7</td>
                    <td>A</td>
                </tr>
                <tr>
                    <td>Trident</td>
                    <td>AOL browser (AOL desktop)</td>
                    <td>Win XP</td>
                    <td>6</td>
                    <td>A</td>
                </tr>
                <tr>
                    <td>Gecko</td>
                    <td>Firefox 1.0</td>
                    <td>Win 98+ / OSX.2+</td>
                    <td>1.7</td>
                    <td>A</td>
                </tr>
                <tr>
                    <td>Gecko</td>
                    <td>Firefox 1.5</td>
                    <td>Win 98+ / OSX.2+</td>
                    <td>1.8</td>
                    <td>A</td>
                </tr>
                <tr>
                    <td>Gecko</td>
                    <td>Firefox 2.0</td>
                    <td>Win 98+ / OSX.2+</td>
                    <td>1.8</td>
                    <td>A</td>
                </tr>
                <tr>
                    <td>Gecko</td>
                    <td>Firefox 3.0</td>
                    <td>Win 2k+ / OSX.3+</td>
                    <td>1.9</td>
                    <td>A</td>
                </tr>
                <tr>
                    <td>Gecko</td>
                    <td>Camino 1.0</td>
                    <td>OSX.2+</td>
                    <td>1.8</td>
                    <td>A</td>
                </tr>
                <tr>
                    <td>Gecko</td>
                    <td>Camino 1.5</td>
                    <td>OSX.3+</td>
                    <td>1.8</td>
                    <td>A</td>
                </tr>
                <tr>
                    <td>Gecko</td>
                    <td>Netscape 7.2</td>
                    <td>Win 95+ / Mac OS 8.6-9.2</td>
                    <td>1.7</td>
                    <td>A</td>
                </tr>
                <tr>
                    <td>Gecko</td>
                    <td>Netscape Browser 8</td>
                    <td>Win 98SE+</td>
                    <td>1.7</td>
                    <td>A</td>
                </tr>
                <tr>
                    <td>Gecko</td>
                    <td>Netscape Navigator 9</td>
                    <td>Win 98+ / OSX.2+</td>
                    <td>1.8</td>
                    <td>A</td>
                </tr>
                <tr>
                    <td>Gecko</td>
                    <td>Mozilla 1.0</td>
                    <td>Win 95+ / OSX.1+</td>
                    <td>1</td>
                    <td>A</td>
                </tr>
                <tr>
                    <td>Gecko</td>
                    <td>Mozilla 1.1</td>
                    <td>Win 95+ / OSX.1+</td>
                    <td>1.1</td>
                    <td>A</td>
                </tr>
                <tr>
                    <td>Gecko</td>
                    <td>Mozilla 1.2</td>
                    <td>Win 95+ / OSX.1+</td>
                    <td>1.2</td>
                    <td>A</td>
                </tr>
                <tr>
                    <td>Gecko</td>
                    <td>Mozilla 1.3</td>
                    <td>Win 95+ / OSX.1+</td>
                    <td>1.3</td>
                    <td>A</td>
                </tr>
                <tr>
                    <td>Gecko</td>
                    <td>Mozilla 1.4</td>
                    <td>Win 95+ / OSX.1+</td>
                    <td>1.4</td>
                    <td>A</td>
                </tr>
                <tr>
                    <td>Gecko</td>
                    <td>Mozilla 1.5</td>
                    <td>Win 95+ / OSX.1+</td>
                    <td>1.5</td>
                    <td>A</td>
                </tr>
                <tr>
                    <td>Gecko</td>
                    <td>Mozilla 1.6</td>
                    <td>Win 95+ / OSX.1+</td>
                    <td>1.6</td>
                    <td>A</td>
                </tr>
                <tr>
                    <td>Gecko</td>
                    <td>Mozilla 1.7</td>
                    <td>Win 98+ / OSX.1+</td>
                    <td>1.7</td>
                    <td>A</td>
                </tr>
                <tr>
                    <td>Gecko</td>
                    <td>Mozilla 1.8</td>
                    <td>Win 98+ / OSX.1+</td>
                    <td>1.8</td>
                    <td>A</td>
                </tr>
                <tr>
                    <td>Gecko</td>
                    <td>Seamonkey 1.1</td>
                    <td>Win 98+ / OSX.2+</td>
                    <td>1.8</td>
                    <td>A</td>
                </tr>
                <tr>
                    <td>Gecko</td>
                    <td>Epiphany 2.20</td>
                    <td>Gnome</td>
                    <td>1.8</td>
                    <td>A</td>
                </tr>
                <tr>
                    <td>Webkit</td>
                    <td>Safari 1.2</td>
                    <td>OSX.3</td>
                    <td>125.5</td>
                    <td>A</td>
                </tr>
                <tr>
                    <td>Webkit</td>
                    <td>Safari 1.3</td>
                    <td>OSX.3</td>
                    <td>312.8</td>
                    <td>A</td>
                </tr>
                <tr>
                    <td>Webkit</td>
                    <td>Safari 2.0</td>
                    <td>OSX.4+</td>
                    <td>419.3</td>
                    <td>A</td>
                </tr>
                <tr>
                    <td>Webkit</td>
                    <td>Safari 3.0</td>
                    <td>OSX.4+</td>
                    <td>522.1</td>
                    <td>A</td>
                </tr>
                <tr>
                    <td>Webkit</td>
                    <td>OmniWeb 5.5</td>
                    <td>OSX.4+</td>
                    <td>420</td>
                    <td>A</td>
                </tr>
                <tr>
                    <td>Webkit</td>
                    <td>iPod Touch / iPhone</td>
                    <td>iPod</td>
                    <td>420.1</td>
                    <td>A</td>
                </tr>
                <tr>
                    <td>Webkit</td>
                    <td>S60</td>
                    <td>S60</td>
                    <td>413</td>
                    <td>A</td>
                </tr>
                <tr>
                    <td>Presto</td>
                    <td>Opera 7.0</td>
                    <td>Win 95+ / OSX.1+</td>
                    <td>-</td>
                    <td>A</td>
                </tr>
                <tr>
                    <td>Presto</td>
                    <td>Opera 7.5</td>
                    <td>Win 95+ / OSX.2+</td>
                    <td>-</td>
                    <td>A</td>
                </tr>
                <tr>
                    <td>Presto</td>
                    <td>Opera 8.0</td>
                    <td>Win 95+ / OSX.2+</td>
                    <td>-</td>
                    <td>A</td>
                </tr>
                <tr>
                    <td>Presto</td>
                    <td>Opera 8.5</td>
                    <td>Win 95+ / OSX.2+</td>
                    <td>-</td>
                    <td>A</td>
                </tr>
                <tr>
                    <td>Presto</td>
                    <td>Opera 9.0</td>
                    <td>Win 95+ / OSX.3+</td>
                    <td>-</td>
                    <td>A</td>
                </tr>
                <tr>
                    <td>Presto</td>
                    <td>Opera 9.2</td>
                    <td>Win 88+ / OSX.3+</td>
                    <td>-</td>
                    <td>A</td>
                </tr>
                <tr>
                    <td>Presto</td>
                    <td>Opera 9.5</td>
                    <td>Win 88+ / OSX.3+</td>
                    <td>-</td>
                    <td>A</td>
                </tr>
                <tr>
                    <td>Presto</td>
                    <td>Opera for Wii</td>
                    <td>Wii</td>
                    <td>-</td>
                    <td>A</td>
                </tr>
                <tr>
                    <td>Presto</td>
                    <td>Nokia N800</td>
                    <td>N800</td>
                    <td>-</td>
                    <td>A</td>
                </tr>
                <tr>
                    <td>Presto</td>
                    <td>Nintendo DS browser</td>
                    <td>Nintendo DS</td>
                    <td>8.5</td>
                    <td>C/A<sup>1</sup>
    
                    </td>
                </tr>
                <tr>
                    <td>KHTML</td>
                    <td>Konqureror 3.1</td>
                    <td>KDE 3.1</td>
                    <td>3.1</td>
                    <td>C</td>
                </tr>
                <tr>
                    <td>KHTML</td>
                    <td>Konqureror 3.3</td>
                    <td>KDE 3.3</td>
                    <td>3.3</td>
                    <td>A</td>
                </tr>
                <tr>
                    <td>KHTML</td>
                    <td>Konqureror 3.5</td>
                    <td>KDE 3.5</td>
                    <td>3.5</td>
                    <td>A</td>
                </tr>
                <tr>
                    <td>Tasman</td>
                    <td>Internet Explorer 4.5</td>
                    <td>Mac OS 8-9</td>
                    <td>-</td>
                    <td>X</td>
                </tr>
                <tr>
                    <td>Tasman</td>
                    <td>Internet Explorer 5.1</td>
                    <td>Mac OS 7.6-9</td>
                    <td>1</td>
                    <td>C</td>
                </tr>
                <tr>
                    <td>Tasman</td>
                    <td>Internet Explorer 5.2</td>
                    <td>Mac OS 8-X</td>
                    <td>1</td>
                    <td>C</td>
                </tr>
                <tr>
                    <td>Misc</td>
                    <td>NetFront 3.1</td>
                    <td>Embedded devices</td>
                    <td>-</td>
                    <td>C</td>
                </tr>
                <tr>
                    <td>Misc</td>
                    <td>NetFront 3.4</td>
                    <td>Embedded devices</td>
                    <td>-</td>
                    <td>A</td>
                </tr>
                <tr>
                    <td>Misc</td>
                    <td>Dillo 0.8</td>
                    <td>Embedded devices</td>
                    <td>-</td>
                    <td>X</td>
                </tr>
                <tr>
                    <td>Misc</td>
                    <td>Links</td>
                    <td>Text only</td>
                    <td>-</td>
                    <td>X</td>
                </tr>
                <tr>
                    <td>Misc</td>
                    <td>Lynx</td>
                    <td>Text only</td>
                    <td>-</td>
                    <td>X</td>
                </tr>
                <tr>
                    <td>Misc</td>
                    <td>IE Mobile</td>
                    <td>Windows Mobile 6</td>
                    <td>-</td>
                    <td>C</td>
                </tr>
                <tr>
                    <td>Misc</td>
                    <td>PSP browser</td>
                    <td>PSP</td>
                    <td>-</td>
                    <td>C</td>
                </tr>
                <tr>
                    <td>Other browsers</td>
                    <td>All others</td>
                    <td>-</td>
                    <td>-</td>
                    <td>U</td>
                </tr>
            </tbody>
        </table>
    </div>

    演示:http://jsfiddle.net/kishoresahas/7j56sbvx

    【讨论】:

    • 除了第一个页面在其他分页页面上不起作用。
    • 非常感谢,这有助于完成我的要求。
    【解决方案2】:

    @Kishore Sahasranaman 答案不会合并所有重复的单元格值,因为它们被删除而不是被隐藏。它正在跳过 for 循环条件检查中的最后一列。

    $(document).ready(function () {
        $('#example').dataTable({
                "scrollX": true,
                "scrollY": "600px",
                "responsive" : false,
                "ordering" : false,
                "paging" : false,
                "searching" : false
        });
        MergeGridCells();
    });
    
    
    function MergeGridCells() {
        var dimension_cells = new Array();
        var dimension_col = null;
        var columnCount = $("#example tr:first th").length;
        for (dimension_col = 0; dimension_col <= columnCount; dimension_col++) {
            // first_instance holds the first instance of identical td
            var first_instance = null;
            var rowspan = 1;
            // iterate through rows
            $("#example").find('tr').each(function () {
    
                // find the td of the correct column (determined by the dimension_col set above)
                var dimension_td = $(this).find('td:nth-child(' + dimension_col + ')');
    
    
    
                if (first_instance === null) {
                    // must be the first row
                    first_instance = dimension_td;
                } else if (dimension_td.text() === first_instance.text()) {
                    // the current td is identical to the previous
                    // remove the current td
                   // dimension_td.remove();
                    dimension_td.attr('hidden', true);
                    ++rowspan;
                    // increment the rowspan attribute of the first instance
                    first_instance.attr('rowspan', rowspan);
                } else {
                    // this cell is different from the last
                    first_instance = dimension_td;
                    rowspan = 1;
                }
            });
        }
    }
    

    【讨论】:

    • 这是我们想要的完美工作,但我们可以合并两个单元格的 sl no
    【解决方案3】:

    DataTables 有一个称为rowsGroup 的功能。

    Here 是一个工作示例。

    希望对这里的新访客有所帮助。

    【讨论】:

      【解决方案4】:

      对@Kishore S. 代码进行了调整,我希望能够对任何列和我想要的任何表进行分组,但要做到这一点,我需要前一列值的哈希值,这样如果你只压缩第 3 列,它不会“桥接”上一列。 所以:

      ---------------------------------
      Value A    |  Label1     |   1  |
      Value A    |  Label2     |   1  |
      Value A    |  Label3     |   1  |
      Value B    |  Label1     |   1  |
      Value B    |  Label2     |   1  |
      Value B    |  Label3     |   1  |
      ---------------------------------
      

      将变为(包含第 1 列和第 3 列):

      ---------------------------------
                 |  Label1     |      |
      Value A    |  Label1     |   1  |
                 |  Label1     |      |
                 |  Label2     |   1  |
      Value B    |  Label3     |   1  |
                 |  Label4     |   1  |
      ---------------------------------
      

      代替:

      ---------------------------------
                 |  Label1     |      |
      Value A    |  Label1     |      |
                 |  Label1     |   1  |
                 |  Label2     |      |
      Value B    |  Label3     |      |
                 |  Label4     |      |
      ---------------------------------
      

      无论如何,如果有人需要,这里是调整: 调用:

      MergGridCells('MyTableID',[1,3]);
      
      function MergeGridCells(TableID,rCols) {
        var dimension_cells = new Array();
        var dimension_col = null;
        for(Col in rCols) {
          dimension_col=rCols[Col];
          // first_instance holds the first instance of identical td
          var first_Hash="";
          var first_instance = null;
          var rowspan = 1;
          // iterate through rows
          $("#"+TableID+"> tbody > tr").children("td").attr('hidden', false);
          $("#"+TableID+"> tbody > tr").children("td").attr('rowspan', 1);
          $("#"+TableID).find('tr').each(function () {
            // find the td of the correct column (determined by the dimension_col set above)
            var dimension_td = $(this).find('td:nth-child(' + dimension_col + ')');
            var dim_Hash="";
            for(x=1;x<dimension_col;x++){
              dim_Hash+=$(this).find('td:nth-child(' + x + ')').text();
            }
            if (first_instance === null) {
                // must be the first row
                first_instance = dimension_td;
            } else if (dimension_td.text() === first_instance.text() && first_Hash === dim_Hash) {
                // the current td is identical to the previous AND the Hashes are as well
                // remove the current td
                // dimension_td.remove();
                dimension_td.attr('hidden', true);
                ++rowspan;
                // increment the rowspan attribute of the first instance
                first_instance.attr('rowspan', rowspan);
            } else {
                // this cell is different from the last
                first_instance = dimension_td;
                first_Hash = dim_Hash;
                rowspan = 1;
            }
          });
        }
      }  
      
      

      更新 - 所以我的代码运行良好,但 dataTable 的 jQuery 后处理在渲染时仍然会导致问题,因为在浏览页面时行会变得不平衡。第一页总是正确的,其他的就会失败。要解决此问题,需要添加“重置”以在重绘之前取消合并所有内容(请参阅dataTable callback)。因此,下面的示例更新使 dataTable 在绘制后调用您的 Merge 函数(也修复了更改显示长度):

       "drawCallback": function( settings ) {
              MergeGridCells(TableID,rCols);
          },
      

      【讨论】:

        【解决方案5】:

        我认为对数据表使用默认行分组选项的最简单方法:

         $('TableID').DataTable({
               responsive: true,
               'rowsGroup': [0] // You can include all the columns you want to include in the merge
        });  
        

        然后确保包含这些 Javascript 文件;

        <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.12/datatables.min.js"></script>
        <script type="text/javascript" src="https://cdn.rawgit.com/ashl1/datatables-rowsgroup/fbd569b8768155c7a9a62568e66a64115887d7d0/dataTables.rowsGroup.js"></script>
        

        它应该像魅力一样工作☺

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 2020-11-13
          • 2019-04-30
          • 1970-01-01
          • 1970-01-01
          • 2015-11-03
          • 1970-01-01
          • 1970-01-01
          • 2015-07-14
          相关资源
          最近更新 更多