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

我想根据复选框对表格进行排序

为此，您需要比较列中checked的{{1}}属性。

在input方法中使用比较器，如下所示：

rows.sort

其中$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); }是单击标题列的索引。

这是一个完整的工作演示，对多列进行排序（代码注释中的解释）...

<强>段：

＆＃13;

idx

＆＃13;

var $buttons = $('.sort'), $tab = $("#tab");

$buttons.click(function(e) {
    var self = this,
    	$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);
    });
    
});

＆＃13;

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

＆＃13;

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

Answer 2

您可以使用jquery table sorter。

text endline deliminer

根据表列中的复选框列表对html表进行排序

2 个答案: