title: How can have multirows Footer in Datatables?
body: <p>I want make two rows at my footer datatables. First row of footer for sum columns and second row of footer for search columns.</p>
  <p>This is my code in javascript</p>
  <pre><code>$(function () {
      $('#ntable1 tfoot th').each( function () { //for search columns in footer
            var title = $(this).text();
            $(this).html( '&lt;input type=&quot;text&quot; placeholder=&quot;'+title+'&quot;/&gt;' );
      } );
        
      var table = $(&quot;#ntable1&quot;).DataTable({
          &quot;responsive&quot;: false, &quot;scrollX&quot;: true, &quot;lengthChange&quot;: true, &quot;autoWidth&quot;: false, 
          &quot;buttons&quot;: [
                      {
                          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)');
        
    });
  </code></pre>
  <p>Datatables code in html</p>
  <pre><code>&lt;table id=&quot;ntable1&quot; class=&quot;table table-bordered table-striped&quot;&gt;
   &lt;thead&gt; ... &lt;/thead&gt;
   &lt;tbody&gt; ... &lt;/tbody&gt;
   &lt;tfoot&gt;
  
    &lt;tr&gt; &lt;!-- for sum columns --&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
    &lt;/tr&gt; 
  
    &lt;tr&gt; &lt;!-- for search columns --&gt;
      &lt;th&gt;No&lt;/th&gt;
      &lt;th&gt;Nama Program&lt;/th&gt;
      &lt;th&gt;Tahun&lt;/th&gt;
      &lt;th&gt;Jumlah Kota&lt;/th&gt;
      &lt;th&gt;Nama Kota&lt;/th&gt;
      &lt;th&gt;Jumlah Sekolah&lt;/th&gt;
      &lt;th&gt;Jumlah Siswa&lt;/th&gt;
      &lt;th&gt;Pre Test&lt;/th&gt;
      &lt;th&gt;Post Test&lt;/th&gt;
      &lt;th&gt;%&lt;/th&gt;
      &lt;th&gt;Tingkat Kepuasan&lt;/th&gt;
      &lt;th&gt;Tabungan Pelajar (Account)&lt;/th&gt;
    &lt;/tr&gt;
   &lt;/tfoot&gt;
  &lt;/table&gt;
  </code></pre>
  <p>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.</p>