我想从用户端中对html中的表格进行排序...因为我来宾的速度将更快,从使用方面,所有数据已经存在,因此无需等待服务器从数据库中检索数据并对其进行排序。
为此,我使用w3.js
> w3.getElements = function (id) {
> if (typeof id == "object") {
> return [id];
> } else {
> return document.querySelectorAll(id);
> } };
> w3.sortHTML = function(id, sel, sortvalue) {
> var a, b, i, ii, y, bytt, v1, v2, cc, j;
> a = w3.getElements(id);
> for (i = 0; i < a.length; i++) {
> for (j = 0; j < 2; j++) {
> cc = 0;
> y = 1;
> while (y == 1) {
> y = 0;
> b = a[i].querySelectorAll(sel);
> for (ii = 0; ii < (b.length - 1); ii++) {
> bytt = 0;
> if (sortvalue) {
> v1 = b[ii].querySelector(sortvalue).innerHTML.toLowerCase();
> v2 = b[ii + 1].querySelector(sortvalue).innerHTML.toLowerCase();
> } else {
> v1 = b[ii].innerHTML.toLowerCase();
> v2 = b[ii + 1].innerHTML.toLowerCase();
> }
> if ((j == 0 && (v1 > v2)) || (j == 1 && (v1 < v2))) {
> bytt = 1;
> break;
> }
> }
> if (bytt == 1) {
> b[ii].parentNode.insertBefore(b[ii + 1], b[ii]);
> y = 1;
> cc++;
> }
> }
> if (cc > 0) {break;}
> }
> } };
脚本表单W3Shools功能SORTHTML与少量数据(表中的ligne)一起工作得很好但是,当我尝试从更大的桌子上做时,跑步的时间确实可以接受。
我真的是JavaScript的新手...我试图理解为什么这么久为了重现问题,我使用W3中的示例来确保不是我的代码解决这个问题,而是我将很多时间重新复制到相同的数据中。
示例
让问题插入1000行等等..您将看到
> <!DOCTYPE html> <html> <title>W3.JS</title> <script src="https://www.w3schools.com/lib/w3.js"></script> <body>
>
> <h2>Sort Tables</h2>
>
> <p>Click the table headers to sort the table accordingly:</p>
>
> <table id="myTable">
> <thead> <tr>
> <th onclick="w3.sortHTML('#myTable', '.item', 'td:nth-child(1)')" style="cursor:pointer">Name</th>
> <th onclick="w3.sortHTML('#myTable', '.item', 'td:nth-child(2)')" style="cursor:pointer">Country</th>
> </tr>
> </thead> <tbody>
> <tr class="item">
> <td>Berglunds snabbkop</td>
> <td>Sweden</td>
> </tr>
> <tr class="item">
> <td>North/South</td>
> <td>UK</td>
> </tr>
> <tr class="item">
> <td>Alfreds Futterkiste</td>
> <td>Germany</td>
> </tr>
> <tr class="item">
> <td>Koniglich Essen</td>
> <td>Germany</td>
> </tr>
> <tr class="item">
> <td>Magazzini Alimentari Riuniti</td>
> <td>Italy</td>
> </tr>
>
>
> </tbody> </table>
>
> </body> </html>
我使用https://www.datatables.net库进行排序真的更有效。
,但是我仍然很有趣的是说明为什么这个简单的脚本如此效率低下...
我将分析数据脚本,以查看是什么使其与另一个脚本相提并论,但是如果Somme Good Samaritain可以花几分钟的时间来解释该脚本完全是完全不可行的,那么会欣赏。
谢谢