javascript - jQuery datatable custom sorting and filtering - Stack Overflow

admin管理员组

文章数量:1410737

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 bees 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).

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 bees 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).

• javascript
• jquery
• asp
• datatable
• datatables

Share Improve this question Follow asked Apr 17, 2013 at 6:36 Bilal FazlaniBilal Fazlani 6,9871010 gold badges4646 silver badges9494 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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

本文标签： javascriptjQuery datatable custom sorting and filteringStack Overflow