title: jQuery datatable custom sorting and filtering
body: <p>I am using jquery datatables in my MVC4 application. The most simple configuration of jquery datatables. </p>
  
  <p>Infact, I have placed this small jquery snippet in my layout.cshtml file which will take care of all tables in my application without doing anything custom. </p>
  
  <pre><code>$(".dataTable").dataTable({
     "bJQueryUI": true,
     "sPaginationType": "full_numbers"
  }).columnFilter();
  </code></pre>
  
  <p>this works perfectly when I format the table with <code>&lt;thead&gt;, &lt;tbody&gt; and &lt;tfoot&gt;.</code></p>
  
  <p>Here's the image : <img src="https://i.stack.imgur.com/v2qku.png" alt="enter image description here"></p>
  
  <p>Ofcourse, not everything will work work with this basic configuration.</p>
  
  <hr>
  
  <h2>The problem</h2>
  
  <p>The payment status column contains not just some text, it contains a span and a hidden dropdown list. on click of <code>&lt;td&gt;</code>, The span gets hidden and dropdown becomes visible. on dropdown change it reverts back to a visible span and hidden dropdown.</p>
  
  <p>The code : </p>
  
  <pre><code> &lt;td class=" " paymentid="106"&gt;
              &lt;span&gt;
                  Completed
              &lt;/span&gt;
  
             &lt;select name:"paymentstatus"="" style="display:none;" onchange="changepaymentStatus($(this).parent().attr('paymentId'),$(this).val(),10);"&gt;
                 &lt;option value="0" selected="'selected'"&gt;Completed&lt;/option&gt;
                 &lt;option value="1"&gt;Pending&lt;/option&gt;
                 &lt;option value="2"&gt;Cancelled&lt;/option&gt;
             &lt;/select&gt;
          &lt;/td&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/ayGgV.png" alt="enter image description here"></p>
  
  <p>With all this mess present in the <code>&lt;td&gt;</code> element, it is not able to filter at all (for that column and sorting works incorrectly (for that column).</p>