Study Note

有时候通过bootstrap或者jquery进行前端展现的时候,需要对一些数据进行排序操作,之前我介绍过一个jqgrid的例子,今天再介绍一下可以通过jquery的排序:

插件sortElements,github地址是:https://github.com/padolsey/jquery.fn/tree/master/sortElements

实现效果:sortJquery

使用方法:

1.页面中引入jQuery:

<script type="text/javascript" src="jquery.js"></script>

2.引入引入sortElements.js

<script type="text/javascript" src="jquery.sortElements.js"></script>

3.js代码

$(document).ready(function(){  
     var table = $('#mytable');//table的id
     $('#sort_header')//要排序的headerid,多个的话使用$('#sort_header1,sort_header2')
    .each(function(){
      var th = $(this),
        thIndex = th.index(),
        inverse = false;
      th.click(function(){
        table.find('td').filter(function(){
          return $(this).index() === thIndex;
        }).sortElements(function(a, b){
          return $.text([a]) > $.text([b]) ?
            inverse ? -1 : 1
            : inverse ? 1 : -1;
        }, function(){
          return this.parentNode; 
        });
        inverse = !inverse;
      });
    });
});

4.html代码

<table id="mytable">
  <tr>
    <th id="sort_header">sort1</th>
    <th>sort2</th>
    <th>test</th>
  </tr>
  <tr>
    <td>10</td>
    <td>10</td>
    <td>10</td>
  </tr>
  <tr>
    <td>2</td>
    <td>2</td>
    <td>2</td>
  </tr>
<tr>
    <td>3</td>
    <td>3</td>
    <td>3</td>
  </tr>
 </table>