How to merge rows with common data?

How to merge rows with common data?

Khalid TeliKhalid Teli Posts: 251Questions: 71Answers: 0

Hi,
I have a table with common data in some columns and I want to merge that data to show information just once.

Before merge, the table looks like this:

After merging it should look like this:

Can you please help me with some already available example or any other suggestions? Please
Thank you

Answers

  • kthorngrenkthorngren Posts: 21,447Questions: 26Answers: 4,974

    Maybe the RowGroup extension will help. What you show would use rowspan which Datatables doesn't support in the tbody.

    Kevin

  • Khalid TeliKhalid Teli Posts: 251Questions: 71Answers: 0

    @kthorngren Thank you

    I tried to use this and it does the job:

    createdRow: function(row, data, dataIndex){
            if(data.member_name != 'xyz'){
                $('td:eq(12)', row).attr('colspan', 5);
    
                $('td:eq(13)', row).css('display', 'none');
                $('td:eq(14)', row).css('display', 'none');
                $('td:eq(15)', row).css('display', 'none');
               $('td:eq(16)', row).css('display', 'none');
            }
        },
    

    However, the issue I am facing here is , it doesn't take the column visibility into account. For example , if I click on next page and some columns are hidden it doesn't adjust to column visibility.

  • kthorngrenkthorngren Posts: 21,447Questions: 26Answers: 4,974

    You probably need to do the same thing I suggested in your other thread. Since you are using a jQuery selector for the column, ie td:eq(12), you need to adjust for the column visibility for the indexes. Use column().index() with the visible parameter. See this example:

    http://live.datatables.net/lequreko/1/edit

    Column 1 is hidden and the visible index of column 4 is 3 (shown in the console output).

    Kevin

  • Khalid TeliKhalid Teli Posts: 251Questions: 71Answers: 0

    Hi @kthorngren
    I approached this problem with the same logic as in out other thread : https://datatables.net/forums/discussion/67464/changing-colour-of-cells-after-column-hiding#latest

     table.rows( {page: 'current'} ).every( function ( rowIdx, row,tableLoop, rowLoop ) {
           var data = this.data();
             if(data[0] != 'Garrett Winters'){
    
      var ida = table.column(1).index();
      var idb = table.column(2).index();
      var idc = table.column(3).index();
    
             $(api.cell(rowIdx, ida).node()).attr('colspan', 3);
              $(api.cell(rowIdx, idb).node()).css('display', 'none');
             $(api.cell(rowIdx, idc).node()).css('display', 'none');
             }
    

    What I dont understand here is, how can I pass the hidden parameters into $(api.cell(rowIdx, idb).node()).css('display', 'none'); so that when the column is hidden, it hides as well.

    http://live.datatables.net/lotaloyi/2/edit

    If you look at the example, when the office column(using the office button at top) is hidden the hidden column changes doesn't reflect in cell nodes and hence creates mis-aligned table.

    Thank you

  • kthorngrenkthorngren Posts: 21,447Questions: 26Answers: 4,974

    Not sure I understand what you are trying to do. The code you have is hiding one cell not a column. So this results in the other cells moving left.

    What is your goal with trying to hide a particular cell? This isn't a typical nor supported option with Datatables as it won't make adjustments to the table based on your hidden cell.

    Kevin

  • Khalid TeliKhalid Teli Posts: 251Questions: 71Answers: 0

    The code you have is hiding one cell not a column. So this results in the other cells moving left.

    Yes, that is right , when a cell is hidden the other cells move to the left.

    What I am trying to achieve is, when I click on the salary hide button, I want all the cells to to move left. Something like this:

    so, all the data aligns under their header names.

  • kthorngrenkthorngren Posts: 21,447Questions: 26Answers: 4,974

    If you want to hide a column use column().visible(). Datatables knows nothing about any direct DOM manipulations so you will see unexpected behaviors if you do.

    Kevin

  • Khalid TeliKhalid Teli Posts: 251Questions: 71Answers: 0

    Hi @kthorngren
    Thank you. Everything works fine now!

    Thanks for the help

This discussion has been closed.