根據表列中的複選框列表對數據進行排序

Question

在我的html表中有一列（「IsReserved」）是複選框列表，其中一些列被選中，一些列沒有列出。 當用戶點擊IsReserved標題時，表格按它排序。 意味着第一次點擊asc順序和第二次單擊desc命令。 我想這個問題是由usig javascript或jquery完成的，如果有其他的話請。

總之我想根據「IsReserved」列中的複選框對錶格進行排序 謝謝。

function sortTable(f, n) { 
 
     var rows = $('#tab tbody tr').get(); 
 

 
     rows.sort(function (a, b) { 
 

 
      var A = $(a).children('td').eq(n).text().toUpperCase(); 
 
      var B = $(b).children('td').eq(n).text().toUpperCase(); 
 
      $("input:checkbox").attr("id") 
 
      parseInt($(a).data("sort")); 
 

 
      if (A < B) { 
 
       return -1 * f; 
 
      } 
 
      if (A > B) { 
 
       return 1 * f; 
 
      } 
 
      return 0; 
 
     }); 
 

 
     $.each(rows, function (index, row) { 
 
      $('#tab').children('tbody').append(row); 
 
     }); 
 
    } 
 

 
    var f_sl = 1; 
 
    var f_nm = 1; 
 
    //sort table by name 
 
    $("#name").click(function() { 
 
     f_sl *= -1; 
 
     var n = $(this).prevAll().length; 
 
     sortTable(f_sl, n); 
 

 
    }); 
 

 
    //sort table by code 
 
    $("#code").click(function() { 
 
     f_nm *= -1; 
 
     var n = $(this).prevAll().length; 
 
     sortTable(f_nm, n); 
 
    }); 
 

 
    //sort table by category 
 
    $("#category").click(function() { 
 
     f_nm *= -1; 
 
     var n = $(this).prevAll().length; 
 
     sortTable(f_nm, n); 
 
    }); 
 

 
    //sort table by saleprice 
 
    $("#saleprice").click(function() { 
 
     f_nm *= -1; 
 
     var n = $(this).prevAll().length; 
 
     sortTable(f_nm, n); 
 
    }); 
 

 
    //sort table by lead time 
 
    $("#leadtime").click(function() { 
 
     f_nm *= -1; 
 
     var n = $(this).prevAll().length; 
 
     sortTable(f_nm, n); 
 
    }); 
 

 
    //sort table by qty per unit 
 
    $("#qtu").click(function() { 
 
     f_nm *= -1; 
 
     var n = $(this).prevAll().length; 
 
     sortTable(f_nm, n); 
 
    }); 
 

 
    //sort table by current stock 
 
    $("#currentstock").click(function() { 
 
     f_nm *= -1; 
 
     var n = $(this).prevAll().length; 
 
     sortTable(f_nm, n); 
 
    }); 
 

 
    //sort table by record level 
 
    $("#recordlevel").click(function() { 
 
     f_nm *= -1; 
 
     var n = $(this).prevAll().length; 
 
     sortTable(f_nm, n); 
 
    }); 
 

 
    //end of sort table

<tbody data-bind="foreach: ProductViewList"> 
 
          <tr> 
 
           <td class="calign leftbordernone" style="width:50px"> 
 
            <a data-bind="attr: { 'href': '@Url.Action("EditProduct", "Inventory")?id=' + Id}" title="Edit Product"> 
 
             <img src="~/Images/edit.png" height="15" width="15" alt="" /> 
 
            </a> 
 
           </td> 
 
           <td class="calign leftbordernone" style="width:50px"> 
 
            <a data-bind="click: function() { DeleteProduct(Id); }" href="" title="Delete Product"> 
 
             <img src="~/Images/delete.png" height="15" width="15" alt="" /> 
 
            </a> 
 
           </td> 
 
           <td class=" lalign leftbordernone" style="width:90px" data-bind="text: ProductCode"></td> 
 
           <td class=" lalign" data-bind="text: ProductName"></td> 
 
           <td class=" lalign" style="width:70px" data-bind="text: CategoryName"></td> 
 
           <td class=" lalign" style="text-align:center;width:40px"> 
 
            <input type="checkbox" disabled="disabled" class="chkbox" data-bind="checked:IsActive" /> 
 
           </td> 
 
           <td class=" lalign" style="text-align:right" data-bind="text: formatPrice(SalesPrice)"></td> 
 
           <td class=" lalign" style="text-align:right" data-bind="text: QtyperUnit"></td> 
 
           <td class=" lalign" style="text-align:right" data-bind="text: LeadTime"></td> 
 
           <td class=" lalign" style="text-align:right" data-bind="text: CurrentStock"></td> 
 
           <td class=" lalign" style="text-align:right" data-bind="text: ReorderLevel"></td> 
 
           <td class=" lalign rightbordernone" style="text-align:center"> 
 
            <input type="checkbox" disabled="disabled" class="chkbox" data-bind="checked: Reserved" /> 
 
           </td> 
 
          </tr> 
 
         </tbody> 
 
        </table>

Answer 1

我想根據表複選框

排序爲了做到這一點，你需要的input的checked性能比較列裏。

在你​​方法使用比較程序是這樣的：

$rows.sort(function(a, b) { 
    var value1= $(a).find('td').eq(idx).find("input")[0].checked, 
     value2 = $(b).find('td').eq(idx).find("input")[0].checked; 

    return (value1 > value2); 
} 

哪裏idx是被點擊標題的列的索引。

這是一個完整的工作演示，對多列（代碼解釋評論）排序...

片段：

var $buttons = $('.sort'), $tab = $("#tab"); 
 

 
$buttons.click(function(e) { 
 
    var self = this, 
 
    \t $rows = $tab.find("tbody > tr"), 
 
     idx = $buttons.index(this);  // index of the header which is clicked 
 
    
 
    $rows.sort(function(a, b) { 
 
     var $obj1 = $(a).find('td').eq(idx), // which cell column based on index 
 
      $obj2 = $(b).find('td').eq(idx), 
 
      value1, value2; 
 
     
 
     if ($obj1.text().length > 0) {   // if the cell contains text 
 
      value1 = $obj1.text().toUpperCase(); // use the text value 
 
      value2 = $obj2.text().toUpperCase(); 
 
     } else {         // if the cell does not contain text 
 
      value1 = $obj1.find("input")[0].checked; // use the checked property.. 
 
      value2 = $obj2.find("input")[0].checked // .. of the input 
 
     } 
 

 
     // check if ascending or not 
 
     if ($(self).hasClass('asc')) return (value1 > value2); 
 
     else return (value1 < value2); 
 
     
 
    }); 
 
    
 
    $(this).toggleClass('asc'); // toggle class for next ascending-descending sort 
 
    
 
    // perform physical reordering 
 
    $.each($rows, function(index, row){ 
 
     $tab.append(row); 
 
    }); 
 
    
 
});

table, th, td { border: 1px solid #ddd; border-collapse: collapse; } 
 
th, td { padding: 4px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="tab"> 
 
    <thead> 
 
     <tr> 
 
      <th><a href="#" class="sort asc">IsReserved</a></th> 
 
      <th><a href="#" class="sort asc">Caption</a></th> 
 
      <th><a href="#" class="sort asc">Other</a></th> 
 
     </tr> 
 
    </thead> 
 
     <tr><td><input type="checkbox" /></td><td>One</td><td>1</td></tr> 
 
     <tr><td><input type="checkbox" checked /></td><td>Two</td><td>2</td></tr> 
 
     <tr><td><input type="checkbox" /></td><td>Three</td><td>3</td></tr> 
 
     <tr><td><input type="checkbox" checked /></td><td>Four</td><td>4</td></tr> 
 
    <tbody> 
 
    </tbody> 
 
</table>

小提琴：http://jsfiddle.net/abhitalks/m6nn4ved/1/

Answer 2

您可以使用jquery table sorter這一點。

$(document).ready(function() { 
    $("#tableid").tablesorter();  
});