当前位置：首页 > 网页特效 > 图表

仿Excel样式的jquery表格排序插件

分类：图表日期：2024-05-14 点击(4) 评论(0)

简介

在页面中引入jquery，bootstrap和excel-bootstrap-table-filter-bundle.js文件，以及样式文件excel-bootstrap-table-filter-style.css。

```html
<link href="path/to/bootstrap.min.css" rel="stylesheet">  
<link href="path/to/excel-bootstrap-table-filter-style.css" rel="stylesheet">  
<script src="path/to/jquery.min.js"></script>
<script src="path/to/excel-bootstrap-table-filter-bundle.js"></script>
```
#####  HTML结构
在页面中添加一个bootstrap表格

```html
<table id="table" class="table table-bordered table-intel">
  <thead>
    <tr>
      <th class="filter">编号</th>
      <th class="no-sort no-filter">姓名</th>
      <th class="filter">成绩</th>
    </tr >
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>张三</td>
      <td>68</td>
    </tr>
    <tr>
      <td>2</td>
      <td>李四</td>
      <td>75</td>
    </tr>
    <tr>
      <td>3</td>
      <td>王五</td>
      <td>86</td>
    </tr>
    <tr>
      <td>4</td>
      <td>赵六</td>
      <td>76</td>
    </tr>
    <tr>
      <td>5</td>
      <td>韩七</td>
      <td>95</td>
    </tr>
  </tbody>
</table>    
```        
其中，你可以为表格的th元素添加no-sort、no-filter、no-searchclass类，表示不对该表格列进行排序、过滤和搜索。

##### 初始化插件 初始化插件
在页面DOM元素加载完毕之后，通过excelTableFilter()来初始化该jquery表格排序插件。

```html
$('#table').excelTableFilter();
```
##### 配置参数 
该jquery表格排序插件的可用配置参数有：

```html
$('#table').excelTableFilter({
    columnSelector: '.apply-filter', 
    sort: true,
    search: true,    
    captions: Object
});   
```               
- columnSelector：如果提供了该参数，那么插件只会对添加了该class类的th元素进行初始化。
- sort：是否对表格列进行排序。
- search：是否对表格列进行搜索。
- captions：标签文本，默认为：{ a_to_z: 'A to Z', z_to_a: 'Z to A', search: 'Search', select_all: 'Select All' }。

web299.com

仿Excel样式的jquery表格排序插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果