title: datatables + 2 footers + control which one is manipulated in the footer_callback function
body: <p>here is my <a href="https://jsfiddle.net/HattrickNZ/s4hr6hw7/" rel="nofollow">FIDDLE</a></p>
  
  <p>I want to have more control over this part of the code: </p>
  
  <pre><code>        $( api.column( 4 ).footer() ).html(
              '$'+pageTotal +' ( $'+ total +' total)'
          );
  </code></pre>
  
  <p>I would like to apply this on my <code>#total</code> footer. It is currently being applied to the <code>#search</code> footer, and is changing the value of the <code>#search</code> footer in the top right of the table, when I want it to change the <code>#total</code> footer in the bottom right.</p>
  
  <p>this is with the html like this order:</p>
  
  <pre><code>&lt;tfoot id="search"&gt;
              &lt;tr&gt;
                  &lt;th&gt;First name&lt;/th&gt;
                  &lt;th&gt;Last name&lt;/th&gt;
                  &lt;th&gt;Position&lt;/th&gt;
                  &lt;th&gt;Office&lt;/th&gt;
                  &lt;th&gt;Salary&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/tfoot&gt;
           &lt;tfoot id="total"&gt;
              &lt;tr&gt;
                  &lt;th colspan="4" style="text-align:right"&gt;Total:&lt;/th&gt;
                  &lt;th&gt;&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/tfoot&gt;
  </code></pre>
  
  <p>I can swap the footers around above, <a href="https://jsfiddle.net/HattrickNZ/s4hr6hw7/1/" rel="nofollow">FIDDLE</a> here, and it will appear the way I want but the multi column filter search will break. <strong>Can I achieve what I am trying here without breaking anything?</strong></p>