今天由于業(yè)務(wù)需要,要在客戶端對(duì)一個(gè)報(bào)表進(jìn)行排序,所以就想到了jquery插件,下面簡(jiǎn)單介紹一下配置步驟,備忘:
1、下載jquery-latest.js和jquery.tablesorter.js包,如果想讓報(bào)表更美觀,也可以下載官方推薦的幾款布局文件。
2、將1下載的包放到報(bào)表頁(yè)面項(xiàng)目某一目錄下,我是在頁(yè)面當(dāng)前目錄下新建了一個(gè)js目錄,將jquery-latest.js和jquery.tablesorter.js放到里面,另外新建了一個(gè)自己的custom.js用來(lái)寫(xiě)客戶端代碼,同時(shí)我也建了一個(gè)css目錄用來(lái)為報(bào)表頁(yè)面更換皮膚,里面放了blue、green等不同的皮膚。
3、報(bào)表頁(yè)面引入資源文件
<script type="text/javascript" src="js/jquery-latest.js"></script>
<script type="text/javascript" src="js/jquery.tablesorter.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<link rel="stylesheet" type="text/css" href="css/blue/style.css">
4、表格加上class="tablesorter",另外比較重要的就是要加上thead和tbody標(biāo)簽,thead標(biāo)簽里的tr標(biāo)簽要加上class="header"才能控制顯示皮膚圖片,切忌。
5、在custom.js中編寫(xiě)對(duì)報(bào)表的基本要求,比如每一列按照什么數(shù)據(jù)類(lèi)型排序,哪幾列初始化時(shí)升序或者降序排列等等,注意列的索引是從0開(kāi)始的,簡(jiǎn)單貼一點(diǎn)代碼以明義:
$(document).ready(function(){
$("#mytable").tablesorter({ //mytable是報(bào)表table的id
1: {sorter:"integer"}, //表格的第二列按照integer數(shù)據(jù)類(lèi)型進(jìn)行排序
2: {sorter:"integer"},
3: {sorter:"double"},
sortList: [[1,1],[2,0],[3,1]] //初始化表格時(shí)第二列按照降序排序,第三列按照升序排列,第四列按照降序排列
});
} );
聯(lián)系客服