表格排序函数仅部分列可用，排序逻辑异常问题求助

Hey there! Let's walk through fixing your table sorter step by step. I see a few key issues in your code that are causing those wonky sorting behaviors, and we'll add the ascending/descending toggle feature you want too.

Key Issues in Your Original Code #

Let's break down what's going wrong:

• Mixed-up sort logic: You had string and number comparison reversed in your sortAsc function, leading to incorrect ordering (especially for numbers like "10" vs "2").
• No sort direction tracking: There's no way to toggle between ascending and descending order when clicking a header multiple times.
• Incorrect sorting target: You tried to sort the <tbody> element itself, but we need to sort the <tr> rows inside it.
• Unformatted sort values: Numbers were stored as strings in data-sort, causing string-based comparison errors.

Fixed Code with Explanations #

Here's the revised version of your function, with comments explaining each change:

// TABLESORTER
function accordionTable(i, elem) {
  const table = $(elem);
  const tbody = table.find('tbody');
  
  // Map table cells to sortable values, formatting numbers correctly
  function mapTDs(i, elem) {
    const txt = $("td", elem).eq(th_index).text().trim();
    // Format value based on column type (number vs string)
    const sortValue = th_sortType === "int" ? Number(txt) : txt;
    $(elem).attr("data-sort", sortValue);
  }

  // Dynamic sort function that respects direction and type
  function sortRows(a, b) {
    const aData = $(a).attr("data-sort");
    const bData = $(b).attr("data-sort");
    
    let comparison = 0;
    if (th_sortType === "int") {
      // Numeric comparison
      comparison = Number(aData) - Number(bData);
    } else {
      // String comparison (case-insensitive)
      comparison = aData.localeCompare(bData, undefined, { sensitivity: 'base' });
    }
    
    // Reverse comparison if we're sorting descending
    return th_sortDirection === "desc" ? -comparison : comparison;
  }

  // Header click handler
  table.on("click", "th", function() {
    const $header = $(this);
    th_sortType = $header.data('sort');
    th_index = $header.index();
    
    // Toggle sort direction (default to asc first click)
    const currentDirection = $header.data("sort-direction") || "asc";
    th_sortDirection = currentDirection === "asc" ? "desc" : "asc";
    $header.data("sort-direction", th_sortDirection);
    
    // Update row sort values for the clicked column
    tbody.find('tr').each(mapTDs);
    
    // Sort rows and reattach to table
    tbody.find('tr').sort(sortRows).detach().appendTo(tbody);
  });
}

$('table').each(accordionTable);

What Changed: #

1. Sort Direction Tracking: We added a data-sort-direction attribute to each header to track whether we're sorting ascending or descending, toggling it on each click.
2. Fixed Sort Logic:
   • Numeric columns are converted to actual numbers before comparison, so "10" correctly sorts after "2".
   • String comparisons use localeCompare for proper alphabetical sorting (case-insensitive, so "Apple" and "apple" are treated equally).
   • The sort result is reversed when descending order is active.
3. Targeted Row Sorting: We now sort the <tr> elements inside the tbody, not the tbody itself.
4. Cleaner Value Handling: We trim whitespace from cell text to avoid unexpected sorting due to extra spaces.

How to Use: #

Make sure your table headers have the correct data-sort attribute set:

• For numeric columns: <th data-sort="int">Number Column</th>
• For string columns: <th data-sort="string">Text Column</th>

Now clicking any header will sort that column in ascending order first, then toggle to descending on the next click—all columns should work correctly, including your first and last columns that were previously broken.

内容的提问来源于stack exchange，提问作者Marco Tiberio