Question

我的数据表已经失去了通过“asc”切换的能力。和＆＃39; desc＆＃39;点击。当我摆脱表格标题点击功能时它工作正常，但是当它们像在提供的示例中一样被添加时，能够在＆＃39; asc＆＃39;之间切换。和＆＃39; desc＆＃39;迷路了。我的代码似乎在干扰默认数据表代码的任何答案或建议？

问题

我无法让表格在＃as;＆＃39;之间切换。和＆＃39; dec＆＃39;如果确实有效，搜索功能的其他部分就会停止正常运行。

概述

我有一个按单个列搜索的表。您可以通过两种方式之一选择要搜索的列。

有一个下拉列表列出了所有列名称，当您选择该选项时，相应的表格标题会排序到＆＃39; asc＆＃39;然后，如果您点击表格标题，则可以在＆＃39; asc＆＃39;之间切换。和＆＃39; desc＆＃39;
您也可以单击表格标题，然后选择相应的选择选项。表格标题也将始终以＆＃39; asc＆＃39;并且您将能够在＆＃39; asc＆＃39;之间切换。和＆＃39; desc＆＃39;点击。

代码

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']]);，而不会在单击列标题时触发{<1}}。

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

数据表排序功能问题

1 个答案: