问题升序和降序表列

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 的 cmets - 您需要获取当前列的排序方向并按相反方向排序，而不是总是排序“asc”，为此您可以使用fnSettings().aaSorting。看到这个jsfiddle

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

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