jQuery DataTable Order Table Based On Checkbox

Question

I have a table:


        @foreach (var item in Model)
        {
            
        }
    
    
        
            
                @Html.DisplayNameFor(model => model.TypeOfEquipment)
            
            
                @Html.DisplayNameFor(model => model.Deleted)
            
            
        
    

    
                
                    @Html.DisplayFor(modelItem => item.TypeOfEquipment)
                
                
                    @Html.DisplayFor(modelItem => item.Deleted)
                
                
                    @Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
                    @Html.ActionLink("Details", "Details", new { id = item.Id }) |
                    @Html.ActionLink("Delete", "Delete", new { id = item.Id })

I am using jQuery DataTables to style it and give it functionality.

This produces this:

My goal:

Order by the Deleted column. I want deleted items to be at the bottom of the list.

Here is what I have so far:

$(document).ready(function() {
    var equipmentTable = $("#Equipment-Table").DataTable({
        "order": [1, "asc"],
        "aoColumnDefs": [
            { "bSortable": false, "aTargets": [1, 2] },
            { "bSearchable": false, "aTargets": [1, 2] }
        ]
    });
});

How can I make this happen?

Update


    
        @Html.DisplayFor(modelItem => item.TypeOfEquipment)
    
    @if (item.Deleted)
    {
        
            @Html.DisplayFor(modelItem => item.Deleted)
        
    }
    else
    {
        
            @Html.DisplayFor(modelItem => item.Deleted)
        
    }

    
        @Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
        @Html.ActionLink("Details", "Details", new { id = item.Id }) |
        @Html.ActionLink("Delete", "Delete", new { id = item.Id })
    



$(document).ready(function() {
    var equipmentTable = $("#Equipment-Table").DataTable({
        "aoColumnDefs": [
            { "bSortable": false, "aTargets": [1, 2] },
            { "bSearchable": false, "aTargets": [1, 2] }
        ]
    });

    $('#Equipment-Table input[type="checkbox"]').on('change', function () {
        // Update data-sort on closest 
        $(this).closest('td').attr('data-order', this.checked ? 1 : 0);

        // Store row reference so we can reset its data
        var $tr = $(this).closest('tr');

        // Force resorting
        equipmentTable
          .row($tr)
          .invalidate()
          .order([1, 'asc'])
          .draw();
    });
});

user_395910 · Answer

You are using the legacy DataTables API: you should avoid using that, because it is being replaced by a more verbose and readable one.

You can sort your checkbox column programatically by using a combination of the following strategy:

When the page is first rendered, set the data-sort / data-order attribute to reflect the (un)checked status. In the example below, I settled for 0 for unchecked and 1 for checked. This should be handled by your templating/layout logic.
We bind a click event handler to the checkbox input. When the onChange event is fired, we simply:
1. Dynamically update the data-sort/data-order attribute based on the checked status of the checkbox
2. Invalidate the cached data stored for the row (so DataTables will have to reindex the data-sort/data-order attribute), using .row().invalidate()
3. Resort the table using .sort()
4. Trigger redrawing using .draw(), as the step above does not reflow/redraw the table

Here is a proof-of-concept example:

$(document).ready(function() {
  var equipmentTable = $("#Equipment-Table").DataTable({
    "order": [1, "asc"]
  });

  // Listen to change event from checkbox to trigger re-sorting
  $('#Equipment-Table input[type="checkbox"]').on('change', function() {
    // Update data-sort on closest 
    $(this).closest('td').attr('data-order', this.checked ? 1 : 0);
    
    // Store row reference so we can reset its data
    var $tr = $(this).closest('tr');
    
    // Force resorting
    equipmentTable
      .row($tr)
      .invalidate()
      .order([ 1, 'asc' ])
      .draw();
  });
});






  
    
      
        Type of Eqiupment
      
      
        Deleted
      
      
    
  

  
    
      Lorem
      
      ...
    
    
      Ipsum
      
      ...
    
    
      Dolor
      
      ...
    
    
      Sit
      
      ...
    
    
      Amet
      
      ...

Update

It seems like OP is only interested in enforcing initial sorting of the table, while disabling user-initiated sorting and search. The checkboxes are also disabled by default, which means we do not need to bind event listeners to them since we do not expect the user to toggle this option. This can be done with the following config:

{
  "order": [1, "asc"],
  "columnDefs": [
    { "orderable": false, "targets": [0,1,2] },
  ],
  "searching": false
}

Proof-of-concept:

$(document).ready(function() {
  var equipmentTable = $("#Equipment-Table").DataTable({
    "order": [1, "asc"],
    "columnDefs": [{
      "orderable": false,
      "targets": [0, 1, 2]
    }],
    "searching": false
  });
});






  
    
      
        Type of Eqiupment
      
      
        Deleted
      
      
    
  

  
    
      Lorem
      
      ...
    
    
      Ipsum
      
      ...
    
    
      Dolor
      
      ...
    
    
      Sit
      
      ...
    
    
      Amet
      
      ...

jQuery DataTable Order Table Based On Checkbox

1 Answers

Update