HTML表格排序

Question

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

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

Name-----Address----Sales Person

任何帮助是极大的赞赏.

Answer 1

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

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

如果没有,您需要有一个指向那些调用服务器端脚本来调用排序的表头的链接.

Answer 2

这是另一个图书馆。

所需的更改是 -

1. 添加可排序js
   

2. 将类名添加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>

Answer 3

我在浏览器中对 HTML 表格进行排序的方式使用了简单、朴素的 Javascript。

基本流程是：

1. 为每个表格标题添加一个点击处理程序
2. 单击处理程序记录要排序的列的索引
3. 表被转换为数组数组（行和单元格）
4. 该数组使用 javascript 排序函数进行排序
5. 排序数组中的数据被插入回 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);
    });
}

那应该这样做。

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

Answer 4

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

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>