Question

所以基本上我正在运行一个mysql查询，它从我的数据库中获取数据并以易于阅读的布局显示给我的用户。姓名-----地址----销售人员

你得到了要点。现在我想让用户按照销售人员对html表进行排序。如何使用下拉菜单轻松完成？这就是我到目前为止......我只是不知道如何告诉菜单对html表进行排序。

<div class='menu'>
<ul>
    <li><a href='#'><span>Sales Person</span></a>
  <ul>
     <li><a href='#'><span>Melissa</span></a></li>
     <li><a href='#'><span>Justin</span></a></li>
     <li><a href='#'><span>Judy</span></a></li>
     <li><a href='#'><span>Skipper</span></a></li>
     <li><a href='#'><span>Alex</span></a></li>
  </ul>
   </li>
</div>

非常感谢任何帮助。

Answer 1

检查您是否可以使用下面提到的任何JQuery插件。简直太棒了，提供了广泛的选择，并且可以减少集成的难度。：）

http://tablesorter.com/docs/ - 表格分类器。
https://github.com/paulopmx/Flexigrid - Flexgrid
http://datatables.net/index - 数据表。
https://github.com/tonytomov/jqGrid

如果没有，则需要指向那些调用服务器端脚本以调用排序的表头的链接。

Answer 2

另一种对HTML表格进行排序的方法。（基于 W3.JS HTML Sort ）

<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)')" style="cursor:pointer">Name</th>
    <th onclick="w3.sortHTML('#usersTable', '.item', 'td:nth-child(2)')" style="cursor:pointer">Address</th>
    <th onclick="w3.sortHTML('#usersTable', '.item', 'td:nth-child(3)')" style="cursor:pointer">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>

Answer 3

我在浏览器中对HTML表进行排序的方式使用了纯朴的Javascript。

基本过程是：

向每个表标题添加点击处理程序
点击处理程序会记录要排序的列的索引
表格将转换为数组（行和单元格）
该数组使用javascript排序功能进行排序
已排序数组中的数据重新插入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
        })
      tableData.push(rowData);
    });
}

那应该做到的。

您可能希望添加的几项内容（或为什么要使用现成的解决方案的原因）：更改排序方向和类型的选项，即您可能希望对某些列进行数字排序（{ {1}}是错误的，因为它们是字符串，可能不是您想要的字符串）。将列标记为已排序的功能。某种数据验证。

Answer 4

这是另一个图书馆。

所需的更改是-
1.添加排序表js
2.将类名称sortable添加到表中。

<script src="https://www.kryogenix.org/code/browser/sorttable/sorttable.js"></script>
<table class="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: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>

Answer 5

基于Flexbox的表可以通过使用flexbox属性“ order”轻松地进行排序。

HTML表格排序

5 个答案: