jQuery datatable custom sorting and filtering

Question

I am using jquery datatables in my MVC4 application. The most simple configuration of jquery datatables.

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.

$(".dataTable").dataTable({
   "bJQueryUI": true,
   "sPaginationType": "full_numbers"
}).columnFilter();

this works perfectly when I format the table with <thead>, <tbody> and <tfoot>.

Here's the image :

Ofcourse, not everything will work work with this basic configuration.

---

The problem

The payment status column contains not just some text, it contains a span and a hidden dropdown list. on click of <td>, The span gets hidden and dropdown becomes visible. on dropdown change it reverts back to a visible span and hidden dropdown.

The code :

 <td class=" " paymentid="106">
            <span>
                Completed
            </span>

           <select name:"paymentstatus"="" style="display:none;" onchange="changepaymentStatus($(this).parent().attr('paymentId'),$(this).val(),10);">
               <option value="0" selected="'selected'">Completed</option>
               <option value="1">Pending</option>
               <option value="2">Cancelled</option>
           </select>
        </td>

With all this mess present in the <td> element, it is not able to filter at all (for that column and sorting works incorrectly (for that column).

Solution

Hi take a look at this http://datatables.net/examples/plug-ins/sorting_sType.html this will do the job for you.