Question

基本上我使用的是DataTables插件，它会对表格标题点击上的表格行进行排序。使用select选项下拉菜单时，我需要重现此行为。当您单击一次时，表格标题会在您再次单击时按升序对表格行进行排序，它会按降序排序。我使用下面的代码使选择选项下拉启动单击但如果我点击表标题不使用下拉列表它将不允许我按降序排序。如果需要更多解释，请在投票前询问。

$("select").change(function(){

    var searchInput = $("#searchInput");
    var oTable = $('table').dataTable();

    if($(this).val() == "1") {

        $(searchInput).val('');
        $("tbody tr").css("display", "");
        $('th:nth-child(3):first')[0].click();          

        $("#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() == "2") { 

        $("#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() == "3") { 

        $("#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() == "4") { 

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

    else if($(this).val() == "5") { 

        $("#searchBtn").on('click', function() {
                $("tbody tr td:nth-child(7):not(:contains('"+searchInput.val()+"'))").parent("tr").css("display", "none");
                $("tbody tr td:nth-child(7):contains('"+searchInput.val()+"')").parent("tr").css("display", "");
        });     
    }

    else if($(this).val() == "6") { 

        $("#searchBtn").on('click', function() {
                $("tbody tr td:nth-child(8):not(:contains('"+searchInput.val()+"'))").parent("tr").css("display", "none");
                $("tbody tr td:nth-child(8):contains('"+searchInput.val()+"')").parent("tr").css("display", "");
        });     
    }

    else if($(this).val() == "7") { 

        $("#searchBtn").on('click', function() {
                $("tbody tr td:nth-child(9):not(:contains('"+searchInput.val()+"'))").parent("tr").css("display", "none");
                $("tbody tr td:nth-child(9):contains('"+searchInput.val()+"')").parent("tr").css("display", "");
        });     
    }

    else if($(this).val() == "8") { 

        $("#searchBtn").on('click', function() {
                $("tbody tr td:nth-child(10):not(:contains('"+searchInput.val()+"'))").parent("tr").css("display", "none");
                $("tbody tr td:nth-child(10):contains('"+searchInput.val()+"')").parent("tr").css("display", "");
        });     
    }

    else if($(this).val() == "9") {

        $("#searchBtn").on('click', function() {
                $("tbody tr td:nth-child(11):not(:contains('"+searchInput.val()+"'))").parent("tr").css("display", "none");
                $("tbody tr td:nth-child(11):contains('"+searchInput.val()+"')").parent("tr").css("display", "");
        });     
    }

});



$('th:nth-child(3):first').click(function() {
    $('select').val(1).change();
});

$('th:nth-child(4):first').click(function() {
    $('select').val(2).change();
});

$('th:nth-child(5):first').click(function() {
    $('select').val(3).change();
});

$('th:nth-child(6):first').click(function() {
    $('select').val(4).change();
});

$('th:nth-child(7):first').click(function() {
    $('select').val(5).change();
});

$('th:nth-child(8):first').click(function() {
    $('select').val(6).change();
});

$('th:nth-child(1):last').click(function() {
    $('select').val(7).change();
});

$('th:nth-child(2):last').click(function() {
    $('select').val(8).change();
});

$('th:nth-child(3):last').click(function() {
    $('select').val(9).change();
});

Answer 1

不要触发click;直接致电fnSort()：

请参阅http://datatables.net/api#fnSort

即便：

$("select").change(function()
{
  var oTable = $('#example').dataTable();
  if ($(this).val() == "1")
  { 
    // Sort immediately with columns 0 and 1
    oTable.fnSort( [ [0,'asc'], [1,'asc'] ] );
  }
});

请务必使用适当的表格对象选择器替换'#example'。（你没有为此发布标记，否则我会使用你的实际表ID。）

此外，您可以通过对其进行泛化来更简单地（并且动态地，使维护/增强更容易）这样做。请参阅此工作示例:(点击显示代码段，然后运行）

var $tblSortable = $("#tblSortable").dataTable();

function sortTable() {
  var direction = $("#tblSorterDir").val();
  var colIdx = +($("#tblSorter").val()) - 1; // coerce val string to number, convert to 0-based index
  $tblSortable.fnSort([
    [colIdx, direction]
  ]);
}
$("#tblSorter,#tblSorterDir").on("change", sortTable);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
<link rel="Stylesheet" type="text/css" href="//cdn.datatables.net/1.10.4/css/jquery.dataTables.min.css"></link>
<h3>
CHOOSE SORT COLUMN: 
  <select id='tblSorter'>
    <option value="1">Col 1</option>
    <option value="2">Col 2</option>
    <option value="3">Col 3</option>
  </select>
</h3>
<h3>
CHOOSE SORT DIRECTION: 
  <select id='tblSorterDir'>
    <option value="asc">ASC</option>
    <option value="desc">DESC</option>
  </select>
</h3>
<table id="tblSortable">
  <thead>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1-1</td>
      <td>1-2</td>
      <td>1-3</td>
    </tr>
    <tr>
      <td>2-1</td>
      <td>2-2</td>
      <td>2-3</td>
    </tr>
  </tbody>
</table>

Answer 2

让我先说，永远不要写一个触发对象动作的函数。您的示例是尝试触发按钮上的单击事件而不是简单地调用函数。话虽如此，你应该让JSFiddle成为javascript测试和问题的最好朋友。这将使您的示例更容易阅读和测试。

正如@nothingisnecessary所述，您需要使用fnSort()函数来更新表格排序。鉴于我回答这个问题的时间有限，下面是一个超级干燥的例子。

Datatable Sorting with Dropdown

稍微注意一点，你应该尽量避免在课堂和id之外选择。您只会使代码变得更加复杂并且容易出现错误，并且使您身后的任何开发人员难以编辑/测试代码。

启动浏览器单击工作但导致错误

2 个答案: