利用jQuery实现仿Excel表格排序筛选代码

利用jQuery实现仿Excel表格排序筛选代码
特效描述:利用jQuery实现 仿Excel表格 排序筛选代码,利用jQuery实现仿Excel表格排序筛选代码

代码结构

1. 引入CSS

<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/demo.css">
<link rel="stylesheet" href="dist/excel-bootstrap-table-filter-style.css" />

2. 引入JS

<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="dist/excel-bootstrap-table-filter-bundle.js"></script>

3. HTML代码

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <h2>Table 1</h2>
      <table id="table" class="table table-bordered table-intel">
        <thead>
          <tr>
            <th class="filter">Animal</th>
            <th class="filter">Class</th>
            <th class="filter">Collective Noun</th>
            <th class="filter">A Number</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Bear</td>
            <td>Mammal</td>
            <td>Sleuth</td>
            <td>1</td>
          </tr>
          <tr>
            <td>Ant</td>
            <td>Insect</td>
            <td>Army</td>
            <td>2</td>
          </tr>
          <tr>
            <td>Salamander</td>
            <td>Amphibian</td>
            <td>Congress</td>
            <td>3</td>
          </tr>
          <tr>
            <td>Owl</td>
            <td>Bird</td>
            <td>Parliament</td>
            <td>4</td>
          </tr>
          <tr>
            <td>Frog</td>
            <td>Amphibian</td>
            <td>Army</td>
            <td>5</td>
          </tr>
          <tr>
            <td>Shark</td>
            <td>Fish</td>
            <td>Gam</td>
            <td>6</td>
          </tr>
          <tr>
            <td>Kookaburra</td>
            <td>Bird</td>
            <td>Cackle</td>
            <td>7</td>
          </tr>
          <tr>
            <td>Crow</td>
            <td>Bird</td>
            <td>Murder</td>
            <td>8</td>
          </tr>
          <tr>
            <td>Elephant</td>
            <td>Mammal</td>
            <td>Herd</td>
            <td>9</td>
          </tr>
          <tr>
            <td>Barracude</td>
            <td>Fish</td>
            <td>Grist</td>
            <td>10</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <h2>Table 2</h2>
      <table id="table2" class="table table-bordered table-intel">
        <thead>
          <tr>
            <th class="filter">Animal</th>
            <th class="filter">Class</th>
            <th class="filter">Collective Noun</th>
            <th class="filter">A Number</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Bear</td>
            <td>Mammal</td>
            <td>Sleuth</td>
            <td>1</td>
          </tr>
          <tr>
            <td>Ant</td>
            <td>Insect</td>
            <td>Army</td>
            <td>2</td>
          </tr>
          <tr>
            <td>Salamander</td>
            <td>Amphibian</td>
            <td>Congress</td>
            <td>3</td>
          </tr>
          <tr>
            <td>Owl</td>
            <td>Bird</td>
            <td>Parliament</td>
            <td>4</td>
          </tr>
          <tr>
            <td>Frog</td>
            <td>Amphibian</td>
            <td>Army</td>
            <td>5</td>
          </tr>
          <tr>
            <td>Shark</td>
            <td>Fish</td>
            <td>Gam</td>
            <td>6</td>
          </tr>
          <tr>
            <td>Kookaburra</td>
            <td>Bird</td>
            <td>Cackle</td>
            <td>7</td>
          </tr>
          <tr>
            <td>Crow</td>
            <td>Bird</td>
            <td>Murder</td>
            <td>8</td>
          </tr>
          <tr>
            <td>Elephant</td>
            <td>Mammal</td>
            <td>Herd</td>
            <td>9</td>
          </tr>
          <tr>
            <td>Barracude</td>
            <td>Fish</td>
            <td>Grist</td>
            <td>10</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <h2>Table 3</h2>
      <p>姓名字段只提供搜索,不带过滤和排序</p>
      <table id="table3" 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>
    </div>
  </div>
</div>
<script type="text/javascript">
$(function () {
  $('#table').excelTableFilter({
	'captions':{ a_to_z: '升序排列', z_to_a: '降序排列', search: '搜索', select_all: '全部选择' }
  });
  $('#table2').excelTableFilter({
	'captions':{ a_to_z: '升序排列', z_to_a: '降序排列', search: '搜索', select_all: '全部选择' }
  });
  $('#table3').excelTableFilter({
		'captions':{ a_to_z: '升序排列', z_to_a: '降序排列', search: '搜索', select_all: '全部选择' }
  });
});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>

用户评论

18素材网

一个让开发更高效的素材分享平台,用于快速开发强大的Web界面。


官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:864918708
Css3+Html5讨论群
群号:864918708

加群请备注:从官网了解到