使用JavaScript字母数字对HTML表格列进行排序

问题描述

我在对HTML表进行排序时遇到问题。标头是可单击的，并且会进行排序，但是无法正确地对表进行排序。我正在使用ACF Pro和FacetWP。该表是用PHP动态创建的，需要此表才能按字母数字排序。从理论上讲，这种排序算法应该可以工作，但是我不理解为什么它无法正确排序。任何帮助将不胜感激。谢谢！

cPrev = -1; // global var saves the prevIoUs c,used to
// determine if the same column is clicked again

function sortBy(c) {
  rows = document.getElementById("sortable").rows.length; // num of rows
  columns = document.getElementById("sortable").rows[0].cells.length; // num of columns
  arrTable = [...Array(rows)].map(e => Array(columns)); // create an empty 2d array

  for (ro = 0; ro < rows; ro++) { // cycle through rows
    for (co = 0; co < columns; co++) { // cycle through columns
      // assign the value in each row-column to a 2d array by row-column
      arrTable[ro][co] = document.getElementById("sortable").rows[ro].cells[co].innerHTML;
    }
  }

  th = arrTable.shift(); // remove the header row from the array,and save it

  if (c !== cPrev) { // different column is clicked,so sort by the new column
    arrTable.sort(
      function(a,b) {
        if (a[c] === b[c]) {
          return 0;
        } else {
          return (a[c] < b[c]) ? -1 : 1;
        }
      }
    );
  } else { // if the same column is clicked then reverse the array
    arrTable.reverse();
  }

  cPrev = c; // save in prevIoUs c

  arrTable.unshift(th); // put the header back in to the array

  // cycle through rows-columns placing values from the array back into the html table
  for (ro = 0; ro < rows; ro++) {
    for (co = 0; co < columns; co++) {
      document.getElementById("sortable").rows[ro].cells[co].innerHTML = arrTable[ro][co];
    }
  }
}

<body>
  <div style="overflow-x:auto;">
    <table id="sortable" style="width:100%;">
      <thead>
        <tr style="cursor:pointer">
          <th align="left">Address</th>
          <th onclick="sortBy(1)" align="left">City</th>
          <th onclick="sortBy(2)" align="left">State</th>
          <th onclick="sortBy(3)" align="left">Type</th>
          <th onclick="sortBy(4)" align="right">Available SF</th>
        </tr>
      </thead>
      <tbody id="table-body">
        <?PHP while ( have_posts() ): the_post(); ?>
        <tr>
          <td align="left">
            <a href="<?PHP the_permalink(); ?>">
              <?PHP the_field('building_address'); ?>
            </a>
          </td>
          <td align="left">
            <a href="<?PHP the_permalink(); ?>">
              <?PHP the_field('city'); ?>
            </a>
          </td>
          <td align="left">
            <a href="<?PHP the_permalink(); ?>">
              <?PHP the_field('state'); ?>
            </a>
          </td>
          <td align="left">
            <?PHP echo get_the_term_list($post->ID,'property_type','',','); ?>
          </td>
          <td align="right">
            <a href="<?PHP the_permalink(); ?>">
              <?PHP the_field('max_available_size'); ?>
            </a>
          </td>
        </tr>
        <?PHP endwhile; ?>
      </tbody>
    </table>
  </div>
</body>

解决方法

您可以在此处使用此功能，下面我将解释传递的函数参数的代码：
colNo是列数据明智排序数据的通过次数。
tableId与表ID sortable相同。
IsAsc的变量值为true，然后行设置升序，否则行设置降序。
函数调用sortTable(1,"sortable",true)的示例。

function sortTable(colNo,tableId,IsAsc) {
          var table,rows,switching,i,x,y;
          table = document.getElementById(tableId);
          switching = true;
          while (switching) {
            switching = false;
            rows = table.rows;  
            for (i = 1; i < (rows.length - 1); i++) {
              if(rows[i].getElementsByTagName("TD")[colNo] != undefined && rows[i + 1].getElementsByTagName("TD")[colNo] != undefined)
              {
                x = rows[i].getElementsByTagName("TD")[colNo].innerHTML.toLowerCase();
                y = rows[i + 1].getElementsByTagName("TD")[colNo].innerHTML.toLowerCase();
                if ((x < y && IsAsc == false) || (x > y && IsAsc == true)) {
                  rows[i].parentNode.insertBefore(rows[i+1],rows[i]);
                  switching = true;
                  break;
                }
              }
            }    
          }
        }

此功能还用于按日期，时间，数字，字母顺序对数据进行排序。

我随便给您的解决方案添加了一个代码段。

function sortTable(colNo,rows[i]);
                  switching = true;
                  break;
                }
              }
            }    
          }
        }

  <table id="theTable" border="1">
    <thead>
      <tr>
        <th>
          <span>Header 1</span>
          <button onclick="sortTable(0,'theTable',true)">Asc</button>
          <button onclick="sortTable(0,false)">Dsc</button>
        </th>
        <th>
          <span>Header 2</span>
          <button onclick="sortTable(1,true)">Asc</button>
          <button onclick="sortTable(1,false)">Dsc</button>
        </th>
        <th>
          <span>Header 3</span>
          <button onclick="sortTable(2,true)">Asc</button>
          <button onclick="sortTable(2,false)">Dsc</button>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Heavens</td>
        <td>and</td>
        <td>the</td>
      </tr><tr>
        <td>I</td>
        <td>created</td>
        <td>the</td>
      </tr><tr>
        <td>Took</td>
        <td>a</td>
        <td>nap</td>
      </tr><tr>
        <td>Earth</td>
        <td>Then</td>
        <td>I</td>
      </tr><tr>
        <td>At</td>
        <td>the</td>
        <td>begining</td>
      </tr>
      
      
      
      
    </tbody>
  </table>

columnsorting html javascript sorting

使用JavaScript字母数字对HTML表格列进行排序

问题描述

解决方法

相关问答