javascript - 基于使用 jquery 的选择选项的升序/降序表

Question

我正在尝试使用选择选项（名称/类型/文档/日期）来实现表格的排序，然后单击其他选择选项，包括升序和降序表格应该显示排序结果。请帮忙。任何帮助，将不胜感激。提前致谢。下面是我的代码，它有一个用于降序/升序的单选按钮。

(function($) {
  const
    cellValue = (row, index) => index !== -1 ? $(row).children('td').eq(index).text() : 0,
    compareCells = (index, options) =>
      (rowA, rowB) => {
        const colOpts = options[index] || {};
        let
          a = cellValue(rowA, index),
          b = cellValue(rowB, index);
        if (colOpts.dateFormat) {
          a = moment(a, colOpts.dateFormat).valueOf(),
          b = moment(b, colOpts.dateFormat).valueOf()
        }
        return $.isNumeric(a) && $.isNumeric(b) ? a - b : a.toString().localeCompare(b);
      };
  Object.assign($.fn, {
    scanSelectOptionData: function() {
      return [...this.get(0).options].reduce((acc, option, index) => {
        const colOpts = {};
        if (option.dataset.dateFormat) {
          colOpts.dateFormat = option.dataset.dateFormat;
        }
        return { ...acc, [option.value]: colOpts };
      });
    },
    sortTable: function(columnIndex, opts, reverse) {
      let rows = this.find('tbody tr').toArray().sort(compareCells(columnIndex, opts));
      return this.append(reverse ? rows.reverse() : rows);
    }
  });
})(jQuery);

$(document).ready(function() {
  const
    $table = $('#myTable'),
    $select = $('#nameselect > select'),
    $radio = $('input[name="sort-direction"]');

  const sortTable = () => {
    const
      columnIndex = parseInt($select.val(), 10),
      opts = $select.scanSelectOptionData(),
      reverse = $('input[name="sort-direction"]:checked').val() === 'DESC';
    $table.sortTable(columnIndex, opts, reverse);
  };

  $select.on('change', sortTable);
  $radio.on('change', sortTable);
});

table, th, td {
  border: thin solid grey;
}

table {
  border-collapse: collapse;
  margin-top: 1em;
}

th, td {
  padding: 0.5em;
}

#nameselect, .sort-direction-radio {
  display: inline-flex;
}

#nameselect > select {
  min-width: 10em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<div id="nameselect">
  <select required>
    <option value="-1">select</option>
    <option value="0">Names</option>
    <option value="1">Type</option>
    <option value="2">Doc</option>
    <option value="3" data-date-format="DD/MM/YYYY">Date</option>
  </select>
</div>

<div id="selectlogic" style="display:inline-flex">
  <select required>
    <option>select</option>
    <option value="0">Ascending</option>
    <option value="1">Descending</option>
    
  </select>
</div>

<div class="sort-direction-radio">
  <input type="radio" name="sort-direction" value="ASC" checked />ASC
  <input type="radio" name="sort-direction" value="DESC" />DESC
</div>

<table id="myTable">
  <thead>
    <tr id="table-header">
      <th>Name</th>
      <th>Type</th>
      <th>Doc</th>
      <th>Date</th>
    </tr>
  </thead>
  <tbody id="">
    <tr>
      <td>Mary</td>
      <td>text1</td>
      <td>word</td>
      <td>1/1/21</td>
    </tr>
    <tr class="" data-type="John">
      <td>John</td>
      <td>text2</td>
      <td>Excel</td>
      <td>31/1/21</td>
    </tr>
    <tr class="" data-type="Martin">
      <td>Martin</td>
      <td>text3</td>
      <td>pdf</td>
      <td>21/2/21</td>
    </tr>
    <tr class="" data-type="Rozi">
      <td>Rozi</td>
      <td>text4</td>
      <td>powepoint</td>
      <td>5/10/20</td>
    </tr>
  </tbody>
</table>

标签： javascriptjquery