數據表排序功能問題

Question

我的數據表失去了點擊時按'asc'和'desc'切換的能力。當我擺脫表頭的點擊函數時，它正常工作，但是當它們像在提供的例子中一樣添加時，在'asc'和'desc'之間切換的能力就會丟失。我的代碼似乎干擾默認的數據源代碼的任何答案或建議？

問題

我不能讓表前往爲「ASC」和「月」，如果它的工作的功能，其他部分如搜索會停止正常工作之間切換。

概述

我有一個表，是由各個列搜索。您可以選擇以兩種方式之一搜索哪一列。

1. 有一個下拉列表，列出了所有的列名，當您選擇的選項對應的表頭排序爲「ASC」，然後如果你點擊表格標題可以「ASC」和「說明」之間進行切換。

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']]);，而不會在列h eader被點擊。

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