数据表排序功能问题

Question

我的数据表无法在点击时通过“asc”和“desc”进行切换。当我摆脱表头单击功能时它工作正常，但是当像在提供的示例中那样添加它们时，在“asc”和“desc”之间切换的能力就会丢失。我的代码似乎干扰了默认数据表代码有什么答案或建议吗？

问题

我无法让表格标题在“asc”和“dec”之间切换，如果它确实有效，其他部分功能（例如搜索）将停止正常运行。

概览

我有一个按各个列搜索的表。您可以选择以两种方式之一搜索哪一列。

1. 有一个下拉列表列出了所有列名，当您选择该选项时，相应的表格标题将排序为“asc”，然后如果您单击表格标题，您可以在“asc”和“desc”之间切换。

2. 您也可以简单地点击表格标题，相应的选择选项就会被选中。表格标题也将始终以“asc”开头，您可以在单击时在“asc”和“desc”之间切换。

代码

JSFiddle - DEMO

$('#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();
});

Answer 1

这是因为您正在链接 column header click 和 selecting in the drop down。

点击其中一个标题 - 比如说 Office - 它会触发 $('#dtSelect').change(function () 并将排序顺序设置为 ['Office', 'asc']

更改以下行：

if (column !== "") {

到

 if (column !== "" && event.currentTarget === this) {

这将仅在更改下拉值时触发oTable.fnSort([[column, 'asc']]);，而不是在单击列标题时。

jsfiddle：http://jsfiddle.net/_prakash/mu7t4e4y/19/