javascript - 在 DataTables 中使用的 HTML 下拉列表值以按它们排序

Question

我有一个下拉菜单和一个 javascript 代码，它生成一个可在桌面上搜索、排序的表格。我想做的是为移动用户提供一个下拉菜单，以选择他们想要对数据进行排序的列，因为表格是响应式的，并且不再具有与桌面相同的视图。我有以下菜单：

<select name="sortBy" id="sortBy" >
    <option value="">[ choose a column ]</option>
    <option value="0">Added</option>        
    <option value="1">Name</option>        
    <option value="2">Change (1hr) %</option>              
    <option value="3">Liquidity</option>              
</select>

然后我有javascript：

$(document).ready(function () {
     var oTable = $('#dataTable').DataTable({
              "pageLength": 30,
              "paging": true,
              "lengthChange": false,
              "searching": true,
              "ordering": true,
              "order": [],
              "info": true,
              "autoWidth": true

              });

    $("#sortBy").change(function () {

        oTable.order([1, 'asc']).draw();
        })   

});

它的部分工作是下拉列表对表格进行排序，但仅使用第 1 列。如何从下拉菜单中获取选项值到 javascript 中，以便对所选内容进行动态排序。就像是：

$(document).ready(function () {
     var oTable = $('#dataTable').DataTable({
              "pageLength": 30,
              "paging": true,
              "lengthChange": false,
              "searching": true,
              "ordering": true,
              "order": [],
              "info": true,
              "autoWidth": true

              });

    $("#sortBy").change(function () {

        oTable.order([**VARIABLE**, 'asc']).draw();
        })

标签： javascripthtmldatatables

Answer 1

非常感谢您的帮助，整个更正和工作的代码是：

    $(document).ready(function () {
         var oTable = $('#dataTable').DataTable({
                  "pageLength": 30,
                  "paging": true,
                  "lengthChange": false,
                  "searching": true,
                  "ordering": true,
                  "order": [],
                  "info": true,
                  "autoWidth": true

                  });
        
        
        
        $("#sortBy").change(function () {
            var colIdx = $('#sortBy :selected').val();
            oTable.order([colIdx, 'asc']).draw();
            })   
});