排序表基於 select 選項使用 jquery

Question

我正在嘗試使用 select options(names/type/doc/date) 對表格進行排序，然后單擊表格應顯示排序結果的按鈕。 在這上面花了將近一天的時間，不知道我哪里錯了。 我是否需要為以下每個選項調用相同的 function？ 請幫忙。 任何幫助，將不勝感激。 提前致謝。 下面是我的代碼。

 (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 - batoString();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>

Answer 1

你有很多不必要的代碼。 如果要對表進行排序，只需確定要排序的列索引即可。 您可以將列索引指定為 select 選項的值。

選擇一列后，確定排序方向和任何選項（如特殊格式）以預處理排序值。 至於日期排序，您需要將日期解析為Date對象或使用類似moment的庫（如下所示）。

我將排序 function 包裝到一個名為$.fn.sortTable的 jQuery 插件中。

 (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 - batoString();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/moment.js/2.29.1/moment.min.js"></script> <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 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>