检查一下你是否可以使用下面提到的任何一个JQuery插件。简直太棒了，提供了广泛的选项来工作，集成起来更少的痛苦。：）
https://github.com/paulopmx/Flexigrid-柔性网格
http://datatables.net/index-数据表。
https://github.com/tonytomov/jqGrid
如果没有，则需要有一个指向那些表标题的链接，该链接调用服务器端脚本来调用排序。

这是另一个图书馆。
所需更改如下-
1.添加可排序js
1.将类名sortable添加到表中。
单击表格标题，对表格进行相应排序：

<script src="https://www.kryogenix.org/code/browser/sorttable/sorttable.js"></script>

<table class="sortable">
  <tr>
    <th>Name</th>
    <th>Address</th>
    <th>Sales Person</th>
  </tr>

  <tr class="item">
    <td>user:0001</td>
    <td>UK</td>
    <td>Melissa</td>
  </tr>
  <tr class="item">
    <td>user:0002</td>
    <td>France</td>
    <td>Justin</td>
  </tr>
  <tr class="item">
    <td>user:0003</td>
    <td>San Francisco</td>
    <td>Judy</td>
  </tr>
  <tr class="item">
    <td>user:0004</td>
    <td>Canada</td>
    <td>Skipper</td>
  </tr>
  <tr class="item">
    <td>user:0005</td>
    <td>Christchurch</td>
    <td>Alex</td>
  </tr>

</table>

我在浏览器中对HTML表排序的方式使用的是普通的、未经修饰的Javascript。
基本流程是：
1.向每个表格标题添加单击处理程序
1.单击处理程序记录要排序的列的索引
1.表格被转换为数组的数组（行和单元格）
1.使用JavaScript排序函数对该数组排序
1.已排序数组中的数据被插回HTML表中
当然，这个表应该是漂亮的HTML格式，比如...

<table>
 <thead>
  <tr><th>Name</th><th>Age</th></tr>
 </thead>
 <tbody>
  <tr><td>Sioned</td><td>62</td></tr>
  <tr><td>Dylan</td><td>37</td></tr>
  ...etc...
 </tbody>
</table>

因此，首先添加单击处理程序...

const table = document.querySelector('table'); //get the table to be sorted

table.querySelectorAll('th') // get all the table header elements
  .forEach((element, columnNo)=>{ // add a click handler for each 
    element.addEventListener('click', event => {
        sortTable(table, columnNo); //call a function which sorts the table by a given column number
    })
  })

这现在不起作用，因为在事件处理程序中调用的sortTable函数不存在。
我们写吧...

function sortTable(table, sortColumn){
  // get the data from the table cells
  const tableBody = table.querySelector('tbody')
  const tableData = table2data(tableBody);
  // sort the extracted data
  tableData.sort((a, b)=>{
    if(a[sortColumn] > b[sortColumn]){
      return 1;
    }
    return -1;
  })
  // put the sorted data back into the table
  data2table(tableBody, tableData);
}

现在我们进入了问题的核心，我们需要使用table2data函数从表中取出数据，使用data2table函数在排序后将数据放回表中。
他们来了...

// this function gets data from the rows and cells 
// within an html tbody element
function table2data(tableBody){
  const tableData = []; // create the array that'll hold the data rows
  tableBody.querySelectorAll('tr')
    .forEach(row=>{  // for each table row...
      const rowData = [];  // make an array for that row
      row.querySelectorAll('td')  // for each cell in that row
        .forEach(cell=>{
          rowData.push(cell.innerText);  // add it to the row data
        })
      tableData.push(rowData);  // add the full row to the table data 
    });
  return tableData;
}

// this function puts data into an html tbody element
function data2table(tableBody, tableData){
  tableBody.querySelectorAll('tr') // for each table row...
    .forEach((row, i)=>{  
      const rowData = tableData[i]; // get the array for the row data
      row.querySelectorAll('td')  // for each table cell ...
        .forEach((cell, j)=>{
          cell.innerText = rowData[j]; // put the appropriate array element into the cell
        })
    });
}

这样就行了。
您可能希望补充的几点内容（或您可能希望使用现成解决方案的原因）：一个改变排序方向和类型的选项，比如你可能希望对一些列进行数字排序（"10" > "2"为false，因为它们是字符串，可能不是你想要的）。标记一列为已排序的能力。某种数据验证。

排序HTML表的另一种方法。（基于**W3.JS HTML Sort**）

let tid = "#usersTable";
let headers = document.querySelectorAll(tid + " th");

// Sort the table element when clicking on the table headers
headers.forEach(function(element, i) {
  element.addEventListener("click", function() {
    w3.sortHTML(tid, ".item", "td:nth-child(" + (i + 1) + ")");
  });
});

th {
  cursor: pointer;
  background-color: coral;
}

<script src="https://www.w3schools.com/lib/w3.js"></script>
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" />
<p>Click the <strong>table headers</strong> to sort the table accordingly:</p>

<table id="usersTable" class="w3-table-all">
  <!--     
  <tr>
    <th onclick="w3.sortHTML('#usersTable', '.item', 'td:nth-child(1)')">Name</th>
    <th onclick="w3.sortHTML('#usersTable', '.item', 'td:nth-child(2)')">Address</th>
    <th onclick="w3.sortHTML('#usersTable', '.item', 'td:nth-child(3)')">Sales Person</th>
  </tr> 
  -->
  <tr>
    <th>Name</th>
    <th>Address</th>
    <th>Sales Person</th>
  </tr>

  <tr class="item">
    <td>user:2911002</td>
    <td>UK</td>
    <td>Melissa</td>
  </tr>
  <tr class="item">
    <td>user:2201002</td>
    <td>France</td>
    <td>Justin</td>
  </tr>
  <tr class="item">
    <td>user:2901092</td>
    <td>San Francisco</td>
    <td>Judy</td>
  </tr>
  <tr class="item">
    <td>user:2801002</td>
    <td>Canada</td>
    <td>Skipper</td>
  </tr>
  <tr class="item">
    <td>user:2901009</td>
    <td>Christchurch</td>
    <td>Alex</td>
  </tr>

</table>

对于一个简单的HTML表，我遇到了一个更简单的方法，即在为每一列定义table th标记时包含以下代码片段，其中#datatable-basic是table标记的id，而nth-child表示列：

onclick="w3.sortHTML('#datatable-basic', '.item', 'td:nth-child(1)')

完整的th标记如下所示：

<th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7"
                      onclick="w3.sortHTML('#datatable-basic', '.item', 'td:nth-child(4)')" >Date</th>

如果像我一样使用flask，那么每个row标记都需要一个item类

<tbody>
<tr class="item" > row text here</tr>
</tbody>

然后，您需要在模板中添加以下脚本：

<script src="https://www.w3schools.com/lib/w3.js"></script>

codepen中的完整工作示例可以在这里找到：https://codepen.io/acity7/pen/QWmqgQR
这是通过从https://www.w3schools.com/w3js/w3js_sort.asp构建代码来实现的，它非常容易实现对表进行排序，而无需使用数据库或更花哨的JS包（如Fancytable.js），后者可以按列动态排序。
额外的功能-这里是你如何可以添加在一个动态排序简单。
在表体标签中添加id，如id=“table”：

<tbody id="table">
</tbody>

将这些脚本添加到标题中：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script>
  $("#search").on("keyup", function() {
  var value = $(this).val().toLowerCase();
  $("#table tr").filter(function() {
    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
  });
});
  </script>

添加一个id=“search”的搜索栏来搜索tr标签，并直接在表中过滤它们：

<input id="search" type="text" class="form-control"  placeholder="Search for name and email......">

多个表，不同的数据类型，无外部库

https://github.com/VFDouglas/HTML-Order-Table-By-Column/blob/main/index.html
步骤：
1.向所有表头添加事件侦听器。
1.查找与单击的标题相关的表并获得订单图标。
1.声明一个对象以存储表行（tr）和所选列的值数组。
1.迭代这些值并检查数据类型以供将来排序。
1.排序值并更改表格标题（th）图标。
1.用订购的html替换旧的tbody。

编辑（2023年1月11日）：添加日期排序支持。

只需添加一个名为data-timestamp的属性，并将日期时间戳传递给它，其余的工作由代码负责。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <th>Coluna 1 <span>&uarr;</span></th>
                    <th>Coluna 2 <span>&uarr;</span></th>
                    <th>Coluna 3 <span>&uarr;</span></th>
                    <th>Coluna 4 <span>&uarr;</span></th>
                    <th>Coluna 5 <span>&uarr;</span></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>100</td>
                    <td>Nome do produto 22</td>
                    <td>ABCASD</td>
                    <td>22DDS</td>
                    <td>454645</td>
                </tr>
                <tr>
                    <td>99</td>
                    <td>Nome do produto 12</td>
                    <td>AACASD</td>
                    <td>22DDS</td>
                    <td>354645</td>
                </tr>
                <tr>
                    <td>300</td>
                    <td>Nome do produto 22</td>
                    <td>AcCASD</td>
                    <td>32DDS</td>
                    <td>554649</td>
                </tr>
                <tr>
                    <td>400</td>
                    <td>Nomde do produto 22</td>
                    <td>AcdCASD</td>
                    <td>3d2DDS</td>
                    <td>554645</td>
                </tr>
                <tr>
                    <td>10</td>
                    <td>Nome do produto 1</td>
                    <td>cCASD</td>
                    <td>DDS</td>
                    <td>4645</td>
                </tr>
            </tbody>
        </table>
        <br>
        <table>
            <thead>
                <tr>
                    <th>Coluna 1 <span>&uarr;</span></th>
                    <th>Coluna 2 <span>&uarr;</span></th>
                    <th>Coluna 3 <span>&uarr;</span></th>
                    <th>Coluna 4 <span>&uarr;</span></th>
                    <th>Coluna 5 <span>&uarr;</span></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>100</td>
                    <td>Nome do produto 22</td>
                    <td>ABCASD</td>
                    <td>22DDS</td>
                    <td>454645</td>
                </tr>
                <tr>
                    <td>99</td>
                    <td>Nome do produto 12</td>
                    <td>AACASD</td>
                    <td>22DDS</td>
                    <td>354645</td>
                </tr>
                <tr>
                    <td>300</td>
                    <td>Nome do produto 22</td>
                    <td>AcCASD</td>
                    <td>32DDS</td>
                    <td>554649</td>
                </tr>
                <tr>
                    <td>400</td>
                    <td>Nomde do produto 22</td>
                    <td>AcdCASD</td>
                    <td>3d2DDS</td>
                    <td>554645</td>
                </tr>
                <tr>
                    <td>10</td>
                    <td>Nome do produto 1</td>
                    <td>cCASD</td>
                    <td>DDS</td>
                    <td>4645</td>
                </tr>
            </tbody>
        </table>
        <br>
        <table>
            <thead>
                <tr>
                    <th>Coluna 12222222222 <span>&uarr;</span></th>
                    <th>Coluna 2 <span>&uarr;</span></th>
                    <th>Coluna 3 <span>&uarr;</span></th>
                    <th>Coluna 4 <span>&uarr;</span></th>
                    <th>Coluna 5 <span>&uarr;</span></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>100</td>
                    <td>Nome 221</td>
                    <td>ABCASD</td>
                    <td>D</td>
                    <td data-timestamp="1671667200">22/12/2022</td>
                </tr>
                <tr>
                    <td>99</td>
                    <td>Nome 12</td>
                    <td>AACASD</td>
                    <td>C</td>
                    <td data-timestamp="1671840000">24/12/2022</td>
                </tr>
                <tr>
                    <td>300</td>
                    <td>Nome 222</td>
                    <td>AcCASD</td>
                    <td>A</td>
                    <td data-timestamp="1671494400">20/12/2022</td>
                </tr>
                <tr>
                    <td>400</td>
                    <td>Nome 22</td>
                    <td>AcdCASD</td>
                    <td>B</td>
                    <td data-timestamp="1702857600">18/12/2023</td>
                </tr>
                <tr>
                    <td>10</td>
                    <td>Nome 11</td>
                    <td>cCASD</td>
                    <td>A</td>
                    <td data-timestamp="1672012800">26/12/2022</td>
                </tr>
            </tbody>
        </table>
        <script>
            window.onload = function() {
                document.querySelectorAll('th').forEach((element) => { // Table headers
                    element.addEventListener('click', function() {
                        let table = this.closest('table');

                        let order_icon = this.querySelector('span');
                        let order      = encodeURI(order_icon.innerHTML).includes('%E2%86%91') ? 'desc' : 'asc';
                        let separator  = '-----'; // Separate the value of it's index, so data keeps intact

                        let value_list = {}; // <tr> Object
                        let obj_key    = []; // Values of selected column

                        let string_count = 0;
                        let number_count = 0;

                        // <tbody> rows
                        table.querySelectorAll('tbody tr').forEach((line, index_line) => {
                            // Value of each field
                            let key = line.children[element.cellIndex].textContent.toUpperCase();

                            // Check if value is date, numeric or string
                            if (line.children[element.cellIndex].hasAttribute('data-timestamp')) {
                                // if value is date, we store it's timestamp, so we can sort like a number
                                key = line.children[element.cellIndex].getAttribute('data-timestamp');
                            }
                            else if (key.replace('-', '').match(/^[0-9,.]*$/g)) {
                                number_count++;
                            }
                            else {
                                string_count++;
                            }

                            value_list[key + separator + index_line] = line.outerHTML.replace(/(\t)|(\n)/g, ''); // Adding <tr> to object
                            obj_key.push(key + separator + index_line);
                        });
                        if (string_count === 0) { // If all values are numeric
                            obj_key.sort(function(a, b) {
                                return a.split(separator)[0] - b.split(separator)[0];
                            });
                        }
                        else {
                            obj_key.sort();
                        }

                        if (order === 'desc') {
                            obj_key.reverse();
                            order_icon.innerHTML = '&darr;';
                        }
                        else {
                            order_icon.innerHTML = '&uarr;';
                        }

                        let html = '';
                        obj_key.forEach(function(chave) {
                            html += value_list[chave];
                        });
                        table.getElementsByTagName('tbody')[0].innerHTML = html;
                    });
                });
            }
        </script>
    </body>
</html>

使用flexbox属性"order"可以很容易地对基于flexbox的表进行排序。
下面是一个例子：

function sortTable() {
  let table = document.querySelector("#table")
  let children = [...table.children]
  let sortedArr = children.map(e => e.innerText).sort((a, b) => a.localeCompare(b));

  children.forEach(child => {
    child.style.order = sortedArr.indexOf(child.innerText)
  })
}

document.querySelector("#sort").addEventListener("click", sortTable)

#table {
  display: flex;
  flex-direction: column
}

<div id="table">
  <div>Melissa</div>
  <div>Justin</div>
  <div>Judy</div>
  <div>Skipper</div>
  <div>Alex</div>
</div>
<button id="sort"> sort </button>

• • 说明**

sortTable函数将表中的数据提取到一个数组中，然后按字母顺序排序，然后循环遍历表项，并将CSS属性order赋值为等于排序数组中项的数据索引。