【问题标题】:Set a default sort column in Sortable在 Sortable 中设置默认排序列
【发布时间】:2019-02-15 01:42:20
【问题描述】:

使用 jquery 插件Sortable,我想为每次加载选择一个默认列进行排序。

例如,按类名为“.column5”的列排序

如何使用可排序的 jquery 插件来做到这一点?

【问题讨论】:

  • 请提供您当前的表结构以及您解决问题的尝试

标签: javascript jquery jquery-ui-sortable


【解决方案1】:

根据文档,您可以在页面加载时执行此操作。

$(document).ready(function(){
  $("th.sort").each(function(){
    sorttable.innerSortFunction.apply(this, []);
  })
})
th, td {
  padding: 3px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.kryogenix.org/code/browser/sorttable/sorttable.js"></script>


<table class="sortable">
  <thead>
    <tr>
      <th>Name</th>
      <th class="sort">Salary</th>
      <th>Extension</th>
      <th>Start date</th>
      <th>Start date (American)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td>Bloggs, Fred</td>
        <td>$12000.00</td>
        <td>1353</td>
        <td>18/08/2003</td>
        <td>08/18/2003</td>
    </tr>
    <tr>
        <td>Turvey, Kevin</td>
        <td>$191200.00</td>
        <td>2342</td>
        <td>02/05/1979</td>
        <td>05/02/1979</td>
    </tr>
    <tr>
        <td>Mbogo, Arnold</td>
        <td>$32010.12</td>
        <td>2755</td>
        <td>09/08/1998</td>
        <td>08/09/1998</td>
    </tr>
    <tr>
        <td>Shakespeare, Bill</td>
        <td>$122000.00</td>
        <td>3211</td>
        <td>12/11/1961</td>
        <td>11/12/1961</td>
    </tr>
    <tr>
        <td>Shakespeare, Hamnet</td>
        <td>$9000</td>
        <td>9005</td>
        <td>01/01/2002</td>
        <td>01/01/2002</td>
    </tr>
    <tr>
        <td>Fitz, Marvin</td>
        <td>$3300</td>
        <td>5554</td>
        <td>22/05/1995</td>
        <td>05/22/1995</td>
    </tr>
  </tbody>
</table>

<pre><code>
$(document).ready(function(){
  $("th.sort").each(function(){
    sorttable.innerSortFunction.apply(this, []);
  })
})
</code></pre>

类可以是任何你想要的,但要确保 jQuery 调用也被改变了。

【讨论】:

  • 成功了!非常感谢。
猜你喜欢
  • 2012-04-05
  • 1970-01-01
  • 2013-12-14
  • 2023-04-01
  • 2023-03-28
  • 1970-01-01
  • 2011-12-02
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多