jQuery DataTable如何在另一行中显示一些类似的行单元数据，以动态添加行动态添加行

Question

我正在使用最新版本的jQuery DataTables。我问题是，exapmle html表是=====================ID名称Bill1 Bill2 Bill3--------------------------------------------------1拉杰什10 2 12基兰9 9 23 Rajesh 10 2 14 Chaitanya 19 8 15 Rajesh 10 6 16 Chaitanya 16 1 1我所需的输出：===================ID名称Bill1 Bill2 Bill3--------------------------------------------------1拉杰什10 2 13 Rajesh 10 2 15 Rajesh 10 6 1       总计30 10 34 Chaitanya 19 8 16 Chaitanya 16 1 1       总计35 9 22基兰9 9 2       总计9 9 2如何在类似的行之后添加动态行，并在它们上添加一些操作显示结果数据。我从服务器中获取数据作为JSON。行的数量和列的数量比上表中所示的要多。请帮助我实现这一目标。提前致谢。

Answer 1

您可以使用DataTable DrawCallback，列和执行JQUERY .EAT。

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