UltraRonin commited on
Commit
6455697
·
1 Parent(s): f372a24
Files changed (1) hide show
  1. index.html +61 -93
index.html CHANGED
@@ -224,13 +224,14 @@ tr:hover a {
224
 
225
  function createTable(data, tableId) {
226
  let table = `<table id="${tableId}"><thead><tr>`;
227
- // for (let key in data[0]) {
228
- // table += `<th><a href="javascript:void(0);" onclick="sortTable('${tableId}', ${Object.keys(data[0]).indexOf(key)})">${key}</a></th>`;
229
- // }
 
230
 
231
- Object.keys(data[0]).forEach((key, index) => {
232
- table += `<th data-index="${index}" onclick="sortTable('${tableId}', ${index})">${key} <span class="sort-arrow"></span></th>`;
233
- });
234
 
235
  table += '</tr></thead><tbody>';
236
  data.forEach(row => {
@@ -251,105 +252,72 @@ tr:hover a {
251
  }
252
 
253
  function sortTable(tableId, n) {
254
- const table = document.getElementById(tableId);
255
- let switching = true;
256
- let dir = table.dataset.sortDir === "asc" ? "desc" : "asc";
257
- let switchcount = 0;
258
 
259
- const headers = table.querySelectorAll("th");
260
- headers.forEach((header, index) => {
261
- if (index !== n) {
262
- header.querySelector(".sort-arrow").textContent = "";
263
- }
264
- });
265
 
266
- const currentHeader = headers[n];
267
- const arrowSpan = currentHeader.querySelector(".sort-arrow");
268
- arrowSpan.textContent = dir === "asc" ? " ▲" : " ▼";
269
 
270
- while (switching) {
271
- switching = false;
272
- const rows = table.rows;
273
- for (let i = 1; i < rows.length - 1; i++) {
274
- let shouldSwitch = false;
275
- let x = rows[i].cells[n].innerHTML;
276
- let y = rows[i + 1].cells[n].innerHTML;
277
 
278
- // 判断是否为数字
279
- let xVal = isNaN(parseFloat(x)) ? x : parseFloat(x);
280
- let yVal = isNaN(parseFloat(y)) ? y : parseFloat(y);
281
 
282
- // 比较逻辑
283
- if (dir === "asc" && xVal > yVal) {
284
- shouldSwitch = true;
285
- } else if (dir === "desc" && xVal < yVal) {
286
- shouldSwitch = true;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
287
  }
288
-
289
- if (shouldSwitch) {
290
- rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
 
 
 
 
 
291
  switching = true;
292
- switchcount++;
293
  }
294
  }
 
295
 
296
- // 当一次都没有切换时,反转排序方向
297
- if (switchcount === 0) {
298
- dir = dir === "asc" ? "desc" : "asc";
299
- }
300
  }
301
  }
302
-
303
-
304
- // var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
305
- // table = document.getElementById(tableId);
306
- // switching = true;
307
- // dir = "asc";
308
- // while (switching) {
309
- // switching = false;
310
- // rows = table.rows;
311
- // for (i = 1; i < (rows.length - 1); i++) {
312
- // shouldSwitch = false;
313
- // x = rows[i].getElementsByTagName("TD")[n];
314
- // y = rows[i + 1].getElementsByTagName("TD")[n];
315
- // if (dir == "asc") {
316
- // if (isNaN(x.innerHTML)) {
317
- // if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
318
- // shouldSwitch = true;
319
- // break;
320
- // }
321
- // } else {
322
- // if (Number(x.innerHTML) > Number(y.innerHTML)) {
323
- // shouldSwitch = true;
324
- // break;
325
- // }
326
- // }
327
- // } else if (dir == "desc") {
328
- // if (isNaN(x.innerHTML)) {
329
- // if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
330
- // shouldSwitch = true;
331
- // break;
332
- // }
333
- // } else {
334
- // if (Number(x.innerHTML) < Number(y.innerHTML)) {
335
- // shouldSwitch = true;
336
- // break;
337
- // }
338
- // }
339
- // }
340
- // }
341
- // if (shouldSwitch) {
342
- // rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
343
- // switching = true;
344
- // switchcount++;
345
- // } else {
346
- // if (switchcount == 0 && dir == "asc") {
347
- // dir = "desc";
348
- // switching = true;
349
- // }
350
- // }
351
- // }
352
- // }
353
 
354
 
355
  Object.keys(urls).forEach(key => {
 
224
 
225
  function createTable(data, tableId) {
226
  let table = `<table id="${tableId}"><thead><tr>`;
227
+ for (let key in data[0]) {
228
+ // table += `<th><a href="javascript:void(0);" onclick="sortTable('${tableId}', ${Object.keys(data[0]).indexOf(key)})">${key}</a></th>`;
229
+ table += `<th><a href="javascript:void(0);" onclick="sortTable('${tableId}', ${Object.keys(data[0]).indexOf(key)})">${key} <span class="sort-arrow"></span></a></th>`;
230
+ }
231
 
232
+ // Object.keys(data[0]).forEach((key, index) => {
233
+ // table += `<th data-index="${index}" onclick="sortTable('${tableId}', ${index})">${key} <span class="sort-arrow"></span></th>`;
234
+ // });
235
 
236
  table += '</tr></thead><tbody>';
237
  data.forEach(row => {
 
252
  }
253
 
254
  function sortTable(tableId, n) {
255
+ var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
256
+ table = document.getElementById(tableId);
257
+ switching = true;
258
+ dir = "asc";
259
 
260
+ let headers = table.getElementsByTagName("th");
261
+ for (let i = 0; i < headers.length; i++) {
262
+ headers[i].querySelector(".sort-arrow").innerHTML = "";
263
+ }
 
 
264
 
265
+ let currentHeader = headers[n];
266
+ let arrow = currentHeader.querySelector(".sort-arrow");
 
267
 
 
 
 
 
 
 
 
268
 
 
 
 
269
 
270
+ while (switching) {
271
+ switching = false;
272
+ rows = table.rows;
273
+ for (i = 1; i < (rows.length - 1); i++) {
274
+ shouldSwitch = false;
275
+ x = rows[i].getElementsByTagName("TD")[n];
276
+ y = rows[i + 1].getElementsByTagName("TD")[n];
277
+ if (dir == "asc") {
278
+ if (isNaN(x.innerHTML)) {
279
+ if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
280
+ shouldSwitch = true;
281
+ break;
282
+ }
283
+ } else {
284
+ if (Number(x.innerHTML) > Number(y.innerHTML)) {
285
+ shouldSwitch = true;
286
+ break;
287
+ }
288
+ }
289
+ } else if (dir == "desc") {
290
+ if (isNaN(x.innerHTML)) {
291
+ if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
292
+ shouldSwitch = true;
293
+ break;
294
+ }
295
+ } else {
296
+ if (Number(x.innerHTML) < Number(y.innerHTML)) {
297
+ shouldSwitch = true;
298
+ break;
299
+ }
300
+ }
301
  }
302
+ }
303
+ if (shouldSwitch) {
304
+ rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
305
+ switching = true;
306
+ switchcount++;
307
+ } else {
308
+ if (switchcount == 0 && dir == "asc") {
309
+ dir = "desc";
310
  switching = true;
 
311
  }
312
  }
313
+ }
314
 
315
+ if (dir == "asc") {
316
+ arrow.innerHTML = "&#9650;"; // Up arrow
317
+ } else {
318
+ arrow.innerHTML = "&#9660;"; // Down arrow
319
  }
320
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
321
 
322
 
323
  Object.keys(urls).forEach(key => {