title: jQuery DataTable Order Table Based On Checkbox
body: <p>I have a table:</p>
  
  <pre><code>&lt;table id="Equipment-Table" class="table table-bordered table-hover"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th class="text-center"&gt;
                  @Html.DisplayNameFor(model =&gt; model.TypeOfEquipment)
              &lt;/th&gt;
              &lt;th class="text-center"&gt;
                  @Html.DisplayNameFor(model =&gt; model.Deleted)
              &lt;/th&gt;
              &lt;th&gt;&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
  
      &lt;tbody&gt;
          @foreach (var item in Model)
          {
              &lt;tr class="text-center"&gt;
                  &lt;td&gt;
                      @Html.DisplayFor(modelItem =&gt; item.TypeOfEquipment)
                  &lt;/td&gt;
                  &lt;td&gt;
                      @Html.DisplayFor(modelItem =&gt; item.Deleted)
                  &lt;/td&gt;
                  &lt;td&gt;
                      @Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
                      @Html.ActionLink("Details", "Details", new { id = item.Id }) |
                      @Html.ActionLink("Delete", "Delete", new { id = item.Id })
                  &lt;/td&gt;
              &lt;/tr&gt;
          }
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I am using <a href="https://www.datatables.net/" rel="nofollow noreferrer">jQuery DataTables</a> to style it and give it functionality.</p>
  
  <p>This produces this:</p>
  
  <p><a href="https://i.stack.imgur.com/P6rWB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/P6rWB.png" alt="enter image description here"></a></p>
  
  <p>My goal:</p>
  
  <p>Order by the <code>Deleted</code> column.  I want deleted items to be at the bottom of the list.</p>
  
  <p>Here is what I have so far:</p>
  
  <pre><code>$(document).ready(function() {
      var equipmentTable = $("#Equipment-Table").DataTable({
          "order": [1, "asc"],
          "aoColumnDefs": [
              { "bSortable": false, "aTargets": [1, 2] },
              { "bSearchable": false, "aTargets": [1, 2] }
          ]
      });
  });
  </code></pre>
  
  <p>How can I make this happen?</p>
  
  <p><strong>Update</strong></p>
  
  <pre><code>&lt;tr class="text-center"&gt;
      &lt;td&gt;
          @Html.DisplayFor(modelItem =&gt; item.TypeOfEquipment)
      &lt;/td&gt;
      @if (item.Deleted)
      {
          &lt;td data-order="1"&gt;
              @Html.DisplayFor(modelItem =&gt; item.Deleted)
          &lt;/td&gt;
      }
      else
      {
          &lt;td data-order="0"&gt;
              @Html.DisplayFor(modelItem =&gt; item.Deleted)
          &lt;/td&gt;
      }
  
      &lt;td&gt;
          @Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
          @Html.ActionLink("Details", "Details", new { id = item.Id }) |
          @Html.ActionLink("Delete", "Delete", new { id = item.Id })
      &lt;/td&gt;
  &lt;/tr&gt;
  
  
  $(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 &lt;td&gt;
          $(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();
      });
  });
  </code></pre>