Search code examples
jquerysortingdatatablecustom-data-attribute

Jquery DataTable update `data-sort` attribute at runtime not affecting sort

I have a datatable which has checkboxes in first td
some are coming checked while some are unchecked from database
by default it is not sorting checked/unchecked, so I also added data-sort attribute
now sort is working as per data-sort values on page load

but I want when checkbox is changed the data-sort should also be changed so that it sort correctly. I did below it is changing data-sort in dom but I think not in datatable.

var dt3;
$(function(){
   dt3 = $('.dt3').DataTable();

   $('body').on('change','input.chkV1',function(){
        var sortVal = $(this).is(':checked')?1:0;
        // $(this).parents('td').attr('data-sort',sortVal);
        // $(this).parents('td').data('sort',sortVal);
        $(this).parents('td').data('sort',sortVal).attr('data-sort',sortVal);
         
        dt3.draw();
    });
 });

I think dt3.draw(); only update cell data not attributes

Solution

  • Actually in datatables docs you could find the solutions but i have made one for your. But if you want to check also here the link.

    Bu i have made a sample for you to see all the details. Simple you add to DataTables extension a new sorting method. And then when you user $('#table').DataTable method you use columns and define your method if you use null as denination you can use default settings

    This is a fairly simple example, but you aren't constrained to just using form input elements, you could use anything and customise your DOM queries to suit yourself.

    DataTable.ext.order['dom-checkbox'] = function (settings, col) {
    return this.api()
        .column(col, { order: 'index' })
        .nodes()
        .map(function (td, i) {
            return $('input', td).prop('checked') ? '1' : '0';
        });
};

var table = $('#table').DataTable({
    columns: [
        { orderDataType: 'dom-checkbox' },
                null,
        null,
        null,
        null,
        null,
                null
    ]
});
    <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>DataTable Checkbox Sorting</title>
    <link href="https://cdn.datatables.net/v/dt/dt-1.13.10/datatables.min.css" rel="stylesheet"/>
  </head>
  <body>
  <table id="table" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Checked</th>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox" value="5"></td>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011-04-25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td><input type="checkbox" value="1"></td>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011-07-25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td><input type="checkbox" value="2"></td>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009-01-12</td>
                <td>$86,000</td>
            </tr>
            <tr>
                <td><input type="checkbox" value="6"></td>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2012-03-29</td>
                <td>$433,060</td>
            </tr>
        </tbody>
    </table>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/v/dt/dt-1.13.10/datatables.min.js"></script>
  </body>
</html>