How can have multirows Footer in Datatables?

Question

I want make two rows at my footer datatables. First row of footer for sum columns and second row of footer for search columns.

This is my code in javascript

$(function () {
    $('#ntable1 tfoot th').each( function () { //for search columns in footer
          var title = $(this).text();
          $(this).html( '<input type="text" placeholder="'+title+'"/>' );
    } );
      
    var table = $("#ntable1").DataTable({
        "responsive": false, "scrollX": true, "lengthChange": true, "autoWidth": false, 
        "buttons": [
                    {
                        extend: 'copy',
                        exportOptions: {
                            columns: [':visible' ]
                        }
                    },
                    {
                        extend: 'excel',
                        exportOptions: {
                            columns: [':visible' ]
                        },
                        messageBottom: textTop,
                    },
                    {
                        extend: 'print',
                        footer: true,
                        exportOptions: {
                            columns: [':visible' ]
                        },
                        messageTop: textTop
                    },
                    {
                        extend: 'colvis',
                        exportOptions: {
                            columns: [':visible' ]
                        }
                    }
                  ],
        footerCallback: function (row, data, start, end, display) { //for sum of columns in footer
            var api = this.api();
 
            // Remove the formatting to get integer data for summation
            var intVal = function (i) {
                return typeof i === 'string' ? i.replace(/[\$,]/g, '') * 1 : typeof i === 'number' ? i : 0;
            };
 
            // Total over all pages
            total = api
                .column(3)
                .data()
                .reduce(function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0);
 
            // Total over this page
            pageTotal = api
                .column(3, { page: 'current' })
                .data()
                .reduce(function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0);
 
            // Update footer
            $('tr:eq(0) td:eq(3)', api.table().footer()).html(format('$' + pageTotal + ' ( $' + total + ' total)')); //not work
            // $(api.column(3).footer()).html('$' + pageTotal + ' ( $' + total + ' total)'); //not work
        },          
        initComplete: function () {
                // Apply the search
                this.api().columns().every( function () {
                    var that = this;
    
                    $( 'input', this.footer() ).on( 'keyup change clear', function () {
                        if ( that.search() !== this.value ) {
                            that
                                .search( this.value )
                                .draw();
                        }
                    } );
                } );
        }
      }).buttons().container().appendTo('#ntable1_wrapper .col-md-6:eq(0)');
      
  });

Datatables code in html

<table id="ntable1" class="table table-bordered table-striped">
 <thead> ... </thead>
 <tbody> ... </tbody>
 <tfoot>

  <tr> <!-- for sum columns -->
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr> 

  <tr> <!-- for search columns -->
    <th>No</th>
    <th>Nama Program</th>
    <th>Tahun</th>
    <th>Jumlah Kota</th>
    <th>Nama Kota</th>
    <th>Jumlah Sekolah</th>
    <th>Jumlah Siswa</th>
    <th>Pre Test</th>
    <th>Post Test</th>
    <th>%</th>
    <th>Tingkat Kepuasan</th>
    <th>Tabungan Pelajar (Account)</th>
  </tr>
 </tfoot>
</table>

If I add row in footer, my search column doesn't work. My problem only how to have multiple rows in footer datatables, which first row for calculate sum and second row for search column. Hope anyone can help.

Answer 1

When you import image from "./newgraph.png" you are importing the actual data that comprises the image, not the src link to the image. In this case, you don't want to import the image at all, you want something closer to:

  handleClick(event) {
    event.preventDefault();
    console.log("A new image with path ./newgraph.png is generated somehow");
    console.log("The next line doesnt work: ");
    this.setState({ img: "path/to/your/image.png });
  }