1.css

.table-sort{

display:inline-block;

width:10px;

height:20px;

margin-left:5px;

cursor:pointer!important;

vertical-align:middle;

position:relative

}

.table-sorti{

border:6pxdashedtransparent;

position:absolute;

left:5px

}

.table-sort.sort-asc{

top:2px;

border-top:none;

border-bottom-style:solid;

border-bottom-color:#b2b2b2

}

.table-sort.sort-asc.cur,.table-sort.sort-asc:hover{

border-bottom-color:#fff

}

.table-sort.sort-desc{

bottom:3px;

border-bottom:none;

border-top-style:solid;

border-top-color:#b2b2b2

}

.table-sort.sort-desc.cur,.table-sort.sort-desc:hover{

border-top-color:#fff

}

2.html部分:

在相应的表头加上样式:sortIndex_?这个用来标识列,比如一个表格有5个列需要有排序功能,就可以依次设置5个thsortIndex_1、sortIndex_2……

<thclass="sortIndex_1">

面积<small>(亩)</small>

<spanclass="table-sort">

<iclass="sort-asc"></i>

<iclass="sort-desc"></i>

</span>

</th>

<thclass="sortIndex_2">

人数<small>(位)</small>

<spanclass="table-sort">

<iclass="sort-asc"></i>

<iclass="sort-desc"></i>

</span>

</th>

3.html部分,写在form标签以内,需要提交给后台的隐藏表单:orderByIndex-标识第几列需要排序;ascOrDesc-标识需要升序还是降序

<script>

<inputtype="hidden"class="form-control"name="orderByIndex"id="orderByIndex"value="${orderByIndex}"/>

<inputtype="hidden"class="form-control"name="ascOrDesc"id="ascOrDesc"value="${ascOrDesc}"/>

</script>

4.javaScript部分

<script>

$(function(){

initSort(2);//有几个列需要排序,这里数值就写几

});

</script>

<script>

varinitSort=function(maxColNumberNeedSort){

varorderByIndex=$("#orderByIndex").val();

varascOrDesc=$("#ascOrDesc").val();

for(vari=1;i<=maxColNumberNeedSort;i++){

varindexStr=".sortIndex_"+i;

$(indexStr).find(".table-sorti").each(function(){

$(this).removeClass("cur");

});

$(indexStr).bind("click",{index:i},changeArrowRefreshData);

}

if(orderByIndex!=undefined&&ascOrDesc!=undefined){

varindexStr=".sortIndex_"+orderByIndex;

if(ascOrDesc==0){//降序

$(indexStr).find(".table-sorti").eq(1).addClass("cur");

}else{//升序

$(indexStr).find(".table-sorti").eq(0).addClass("cur");

}

}

};

varchangeArrowRefreshData=function(event){

varindex=event.data.index;

var_this=$(this);

if(_this.find(".table-sorti").eq(0).hasClass("cur")){//想要降序排列

$("#ascOrDesc").val(0);

_this.find(".table-sorti").eq(0).removeClass("cur");

_this.find(".table-sorti").eq(1).addClass("cur");

}else{

$("#ascOrDesc").val(1);

_this.find(".table-sorti").eq(1).removeClass("cur");

_this.find(".table-sorti").eq(0).addClass("cur");

}

$("#orderByIndex").val(index);

getTableData(1);//在此方法实现你的分页获取数据逻辑,刷新表格数据.

};

</script>