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

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

You can use DataTable drawCallback , column and perform 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>