Sort tablesaw table onload 不仅仅是点击

Question

我正在使用 Tablesaw，它会在您单击 table 标题时对数据进行排序，但是该脚本不允许您在页面加载时创建特定的列 sortable。

所以我的问题是如何按我想要的任何列制作 table sortable？

台锯演示：http://filamentgroup.github.io/tablesaw/demo/sort.html

台锯https://www.filamentgroup.com/lab/tablesaw.html

我们还从数据库调用数据...这是我们的代码...

<?php 

    // Function to create the HTML table using the data stored in the database.
    function displayTable($table) {
      include "connection.php";
      $sql = "SELECT * FROM $table";
      $result = mysqli_query($conn, $sql)or die(mysql_error());

      if (!mysqli_num_rows($result)==0) {
        print "<table id='carTable' class='tablesaw paginated' data-tablesaw-sortable data-tablesaw-sortable-switch><thead>";
        print "<tr><th scope='col' data-tablesaw-sortable-col>Model</th><th scope='col' data-tablesaw-sortable-col>Pack</th><th scope='col' data-tablesaw-sortable-col>Colour</th><th scope='col' data-tablesaw-sortable-col>Registration</th><th scope='col' data-tablesaw-sortable-col data-sortable-numeric data-tablesaw-sortable-default-col>Price When New</th><th scope='col' data-tablesaw-sortable-col data-sortable-numeric>New Price</th><th scope='col' data-tablesaw-sortable-col data-sortable-numeric><span class='red'>Saving</span></th><th scope='col' data-tablesaw-sortable-col>Retail Centre</th></tr></thead><tbody>";

        while($row = mysqli_fetch_array($result)){
          $variant = $row['Variant'];
          $model = $row['Model'];
          $pack = $row['Pack'];
          $colour = $row['Colour'];
          $regNo = $row['RegNo'];
          $priceWhenNew = $row['PriceWhenNew'];
          $nearlyNewPrice = $row['NearlyNewPrice'];
          $saving = $row['Saving'];
          $retailCentre = $row['RetailCentre'];


          print "<tr><td>".$model."</td><td>".$pack."</td><td>".$colour."</td><td class='regno'>".$regNo."</td><td>&#163;".number_format($priceWhenNew)."</td><td>&#163;".number_format($nearlyNewPrice)."</td><td class='red'>&#163;".number_format($saving)."</td><td class='retailer'>".$retailCentre."</td><td><a href='#' class='wide-btn contact-btn'>CONTACT US FOR MORE INFO</a></td></tr>";

    } // End while loop
    print "</tbody></table>"; 
    }
    else {
      print "<h1>No results found.</h1>";
    }
    }
    ?>

Answer 1

您可以从按正确顺序从数据库中获取结果开始。假设您希望 table 默认按 "Model" 排序。您的 SQL-statement 需要：

$sql = "SELECT * FROM $table ORDER BY Model ASC";

此外，在以正确的顺序输出结果后，根据 https://github.com/filamentgroup/tablesaw 处的文档，您需要将 data-tablesaw-sortable-default-col 放入您希望默认排序的列中。

因此，在您的示例中，这将变为：

print "<tr>
<th scope='col' data-tablesaw-sortable-col data-tablesaw-sortable-default-col>Model</th>
<th scope='col' data-tablesaw-sortable-col>Pack</th>
<th scope='col' data-tablesaw-sortable-col>Colour</th>
<th scope='col' data-tablesaw-sortable-col>Registration</th>
<th scope='col' data-tablesaw-sortable-col data-sortable-numeric>Price When New</th>
<th scope='col' data-tablesaw-sortable-col data-sortable-numeric>New Price</th>
<th scope='col' data-tablesaw-sortable-col data-sortable-numeric><span class='red'>Saving</span></th>
<th scope='col' data-tablesaw-sortable-col>Retail Centre</th>
</tr></thead><tbody>";

Sort tablesaw table onload 不仅仅是点击

Sort tablesaw table onload not just on click

php

mysql

sorting

html-table

jquery-ui-sortable