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

您已将默认排序设置为＆＃39; desc＆＃39;，但这段代码总是排序＆＃39; asc＆＃39;这就是为什么点击只能工作一次。

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

一旦对其进行排序＆＃39; asc＆＃39;，再次点击它会尝试排序＆＃39; asc＆＃39;再次，因此没有变化。

请参阅此jsfiddle了解工作版本。

<强>更新

基于来自OP的评论 - 您需要获取当前列的排序方向并按相反方式排序，而不是始终排序＆＃39; asc＆＃39;，为此您可以使用{{1 }}。见jsfiddle

fnSettings().aaSorting

这一行是根据当前列的排序顺序创建一个名为currentDir的变量 - 如果它是＆＃39; asc＆＃39;然后var currentDir = oTable.fnSettings().aaSorting[0][1] == 'asc' ? 'asc' : 'desc';，否则currentDir = 'asc'

发出升序和降序表列

1 个答案: