jquery - 问题升序和降序表列

Question

我在升序和降序表格列时遇到问题。在表标题上单击，我应该能够根据需要按升序和降序排序，但此代码似乎限制我只能单击一次。

jsfiddle:DEMO

jQuery

(function () {
    $('#example').dataTable({
        "paging": false,
        "filter": false,
        "order": [
        [0, "desc"]
    ]
});
})();

$('#dtSelect').change(function () {
var searchInput = $("#searchInput");

if ($(this).val() == "0") {

    $("#searchBtn").on('click', function () {
        $("tbody tr td:nth-child(1):not(:contains('" + searchInput.val() + "'))").parent("tr").css("display", "none");
        $("tbody tr td:nth-child(1):contains('" + searchInput.val() + "')").parent("tr").css("display", "");
    });
}

    else if ($(this).val() == "1") {

    $("#searchBtn").on('click', function () {
        $("tbody tr td:nth-child(2):not(:contains('" + searchInput.val() + "'))").parent("tr").css("display", "none");
        $("tbody tr td:nth-child(2):contains('" + searchInput.val() + "')").parent("tr").css("display", "");
    });
}

    else if ($(this).val() == "2") {

    $("#searchBtn").on('click', function () {
        $("tbody tr td:nth-child(3):not(:contains('" + searchInput.val() + "'))").parent("tr").css("display", "none");
        $("tbody tr td:nth-child(3):contains('" + searchInput.val() + "')").parent("tr").css("display", "");
    });
}

    else if ($(this).val() == "3") {

    $("#searchBtn").on('click', function () {
        $("tbody tr td:nth-child(4):not(:contains('" + searchInput.val() + "'))").parent("tr").css("display", "none");
        $("tbody tr td:nth-child(4):contains('" + searchInput.val() + "')").parent("tr").css("display", "");
    });
}

    else if ($(this).val() == "4") {

    $("#searchBtn").on('click', function () {
        $("tbody tr td:nth-child(5):not(:contains('" + searchInput.val() + "'))").parent("tr").css("display", "none");
        $("tbody tr td:nth-child(5):contains('" + searchInput.val() + "')").parent("tr").css("display", "");
    });
}

    else if ($(this).val() == "5") {

    $("#searchBtn").on('click', function () {
        $("tbody tr td:nth-child(6):not(:contains('" + searchInput.val() + "'))").parent("tr").css("display", "none");
        $("tbody tr td:nth-child(6):contains('" + searchInput.val() + "')").parent("tr").css("display", "");
    });
}

});

$('#dtSelect').change(function () {
    var column = $(this).val();
    var oTable = $('#example').dataTable();
    if (column !== "") {
        oTable.fnSort([
            [column, 'asc']
        ]);
    }
});

$('th:nth-child(1):first').click(function () {
    $('#dtSelect').val(0).change();
});

$('th:nth-child(2):first').click(function () {
    $('#dtSelect').val(1).change();
});

$('th:nth-child(3):first').click(function () {
    $('#dtSelect').val(2).change();
});

$('th:nth-child(4):first').click(function () {
    $('#dtSelect').val(3).change();
});

$('th:nth-child(5):first').click(function () {
    $('#dtSelect').val(4).change();
});

$('th:nth-child(6):first').click(function () {
    $('#dtSelect').val(5).change();
});

当我删除一些代码时，我可以根据需要按升序和降序排序。这让我相信，因为上面的代码中有 2 个更改事件，所以它们可能互相干扰。

jsfiddle:DEMO

jQuery

(function () {
    $('#example').dataTable({
        "paging": false,
        "filter": false,
        "order": [
        [0, "desc"]
    ]
});
})();

$('#dtSelect').change(function () {
var searchInput = $("#searchInput");

if ($(this).val() == "0") {

    $("#searchBtn").on('click', function () {
        $("tbody tr td:nth-child(1):not(:contains('" + searchInput.val() + "'))").parent("tr").css("display", "none");
        $("tbody tr td:nth-child(1):contains('" + searchInput.val() + "')").parent("tr").css("display", "");
    });
}

    else if ($(this).val() == "1") {

    $("#searchBtn").on('click', function () {
        $("tbody tr td:nth-child(2):not(:contains('" + searchInput.val() + "'))").parent("tr").css("display", "none");
        $("tbody tr td:nth-child(2):contains('" + searchInput.val() + "')").parent("tr").css("display", "");
    });
}

    else if ($(this).val() == "2") {

    $("#searchBtn").on('click', function () {
        $("tbody tr td:nth-child(3):not(:contains('" + searchInput.val() + "'))").parent("tr").css("display", "none");
        $("tbody tr td:nth-child(3):contains('" + searchInput.val() + "')").parent("tr").css("display", "");
    });
}

    else if ($(this).val() == "3") {

    $("#searchBtn").on('click', function () {
        $("tbody tr td:nth-child(4):not(:contains('" + searchInput.val() + "'))").parent("tr").css("display", "none");
        $("tbody tr td:nth-child(4):contains('" + searchInput.val() + "')").parent("tr").css("display", "");
    });
}

    else if ($(this).val() == "4") {

    $("#searchBtn").on('click', function () {
        $("tbody tr td:nth-child(5):not(:contains('" + searchInput.val() + "'))").parent("tr").css("display", "none");
        $("tbody tr td:nth-child(5):contains('" + searchInput.val() + "')").parent("tr").css("display", "");
    });
}

    else if ($(this).val() == "5") {

    $("#searchBtn").on('click', function () {
        $("tbody tr td:nth-child(6):not(:contains('" + searchInput.val() + "'))").parent("tr").css("display", "none");
        $("tbody tr td:nth-child(6):contains('" + searchInput.val() + "')").parent("tr").css("display", "");
    });
}

});

$('#dtSelect').change(function () {
    var column = $(this).val();
    var oTable = $('#example').dataTable();
    if (column !== "") {
        oTable.fnSort([
            [column, 'asc']
        ]);
    }
});

Answer 1

您已将默认排序设置为“desc”，但这段代码始终按“asc”排序，这就是点击仅有效一次的原因。

oTable.fnSort([
    [column, 'asc']
]);

一旦按“asc”排序，再次单击它会尝试再次对“asc”排序，因此不会发生任何变化。

看到这个jsfiddle对于工作版本。

更新

基于OP的评论 - 您需要获取当前列的排序方向并按相反的顺序排序，而不是总是按“asc”排序，为此您可以使用fnSettings().aaSorting 。看这个jsfiddle

var currentDir = oTable.fnSettings().aaSorting[0][1] == 'asc' ? 'asc' : 'desc';

这一行根据当前列的排序顺序创建一个名为 currentDir 的变量 - 如果它是 'asc' 则 currentDir = 'asc'，否则 currentDir = 'desc'