javascript - jquery datatable如何动态添加行并在另一行中显示一些相似的行单元格数据

Question

I am using latest Version of Jquery Datatables. I problem is,

Exapmle html table is
======================

Id     name      bill1  bill2  bill3
------------------------------------
1     rajesh      10       2     1
2     kiran        9       9     2
3     rajesh      10       2     1
4     chaitanya   19       8     1
5     rajesh      10       6     1
6     chaitanya   16       1     1


my desired Output:
==================

Id     name      bill1  bill2  bill3
------------------------------------
1     rajesh      10       2     1
3     rajesh      10       2     1
5     rajesh      10       6     1

       Total      30       10    3

4     chaitanya   19       8     1
6     chaitanya   16       1     1

       Total      35       9     2
2     kiran        9       9     2

       Total       9       9     2

how to add dynamic row after similar group of rows and add some operations on them display the result data. i am getting data as json from server. number of rows and columns more than what i have shown in the above table.
please help me to acheive this.

Thanks in advance.

Answer 1

您可以使用 DataTable drawCallback , column并执行 jQuery .each() .

$(document).ready(function() {
    $('#example').DataTable( {
        "drawCallback": function ( settings ) {
            var api = this.api();
            var rows = api.rows( {page:'current'} ).nodes();
 
            api.column(1, {page:'current'} ).data().each( function ( name, i ) {
                let row = $(rows).eq( i );
                let b1 = row.find('td:eq(2)').text(),
                    b2 = row.find('td:eq(3)').text(),
                    b3 = row.find('td:eq(4)').text();
                
                //Redundancy control, do not check(<tr>) with Total
                if(!row.hasClass('name')){
                
                  //Check if Total(<tr>) exists
                  if ($('.'+name).length <= 0) {
                  
                      //Create <tr>, having class with Name (works with if above
                      row.after(
                          '<tr role="row" class="'+name+' name"><th>'+name+'</td><td>Total</td><td>'+b1+'</td><td>'+b2+'</td><td>'+b3+'</td></tr>');
                          
                  }else{
             
                    //If the Total(<tr>) already exists, add this before it.
                    let totalRow = $('.'+name);
                    row.insertBefore(totalRow);
                    
                    //Get Total values
                    let b1TRow = totalRow.find('td:eq(1)'), 
                        b2TRow = totalRow.find('td:eq(2)'),
                        b3TRow = totalRow.find('td:eq(3)');

                    //Update Total values
                    b1TRow.text(parseInt(b1TRow.text()) + parseInt(b1));
                    b2TRow.text(parseInt(b2TRow.text()) + parseInt(b2));
                    b3TRow.text(parseInt(b3TRow.text()) + parseInt(b3));
                    
                  }
                }
            }) ;
        }
    })
} );

.name{
  font-weight: bold;
  background-color: #CCC !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css"/>


<table id="example" class="display" width="100%">
    <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Bill1</th>
            <th>Bill2</th>
            <th>Bill3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Tiger</td>
            <td>10</td>
            <td>0</td>
            <td>6</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Garrett</td>
            <td>2</td>
            <td>9</td>
            <td>1</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Tiger</td>
            <td>2</td>
            <td>7</td>
            <td>9</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Ashton</td>
            <td>1</td>
            <td>7</td>
            <td>3</td>
        </tr>
        <tr>
            <td>5</td>
            <td>Garrett</td>
            <td>7</td>
            <td>1</td>
            <td>3</td>
        </tr>
    </tbody>
</table>