最小表排序插件 jQuery Sortberg.js

  • 源码大小:8.02KB
  • 所需积分:1积分
  • 源码编号:19JP-3442
  • 浏览次数:328次
  • 最后更新:2023年06月13日
  • 所属栏目:表格
本站默认解压密码:19jp.com 或 19jp_com

简介

Sortberg.js是一个轻量级、快速的jQuery表排序插件,它可以根据数据值自动选择合适的排序方法(按顺序或升序),并支持具有行span/colspan的复杂表。

参见:

  • 按列排序表的10个最佳JavaScript插件

如何使用它:

1.下载并加载jquery.sortberg.js查询在jQuery之后。

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery.sortberg.js"></script>

2.调用函数sortberg公司在HTML表上,插件将完成其余工作。

<table>
  <thead>
    <tr>
      <th>Company</th>
      <th>Contact</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Centro comercial Moctezuma</td>
      <td>Francisco Chang</td>
      <td>Mexico</td>
    </tr>
  </tbody>
</table>
$(function(){
  $('table').sortberg();
});

3.它还支持分组数据,如下所示:

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Phone</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>+1 234-567-8901</td>
    </tr>
    <tr class="grouped">
      <td colspan="2">Additional Info For Alice</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>+1 987-654-3210</td>
    </tr>
    <tr class="grouped">
      <td colspan="2">Additional Info For Bob</td>
    </tr>
  </tbody>
</table>
$(function(){
  $('table').sortberg({
    // default: 'details'
    groupClass: 'grouped'
  });
});

4.确定是否忽略区分大小写。默认值:false。

$(function(){
  $('table').sortberg({
    ignoreCase: true,
  });
});

5.添加您自己的排序逻辑。

var myLogic = function(a, b){
  return $(a).data('specialdata') - $(b).data('specialdata');
};

$('table').sortberg({
  comparator: myLogic
});

更新日志:

2022-08-03

  • 仅在单击第th个元素时对列进行排序,而不是在单击第h个元素内的子元素时对其进行排序

预览截图