Custom jQuery datatable sorting and filtering

Question

I am using jquery datatables in my MVC4 application. The simplest jquery datatables configuration.

Infact, I put this little jquery fragment into my layout.cshtml file, which takes care of all the tables in my application without doing anything normal.

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

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

Here is the image:

Of course, not everything will work with this basic configuration.

---

Problem

The payment status column contains not only some text, it also contains a range and a hidden drop-down list. when clicking <td> . The layer becomes hidden, and the drop-down list becomes visible. when changing the drop-down list, it returns back to the visible range and hidden drop-down list.

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 clutter present in the <td> element, it cannot be filtered at all (for this column and sorting it does not work correctly (for this column).

Answer 1

Hi, look at http://datatables.net/examples/plug-ins/sorting_sType.html , this will do your work.