码迷,mamicode.com
首页 > 编程语言 > 详细

利用tablesorter实现表格排序

时间:2017-08-24 20:02:45      阅读:179      评论:0      收藏:0      [点我收藏+]

标签:charset   aaa   this   ott   rtc   bottom   pos   position   排序   

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery.tablesorter.js"></script> 
<script type="text/javascript">
$(document).ready(function() 
    { 
        $(".table_result").tablesorter(); 
    } 
); 
</script>
<style type="text/css">
.table_result{
    width:100%;
    font-size: 12px;
    color: #666666;
    line-height: 18px;
    p0: expression(this.align=‘center‘);p1: expression(this.cellSpacing=1);p2: expression(this.cellPadding=0);p3: expression(this.border=0);
    background-color:#fcfcfc;
    border: 1px solid #c1c1c1;
    text-align: center;
}
.table_result_title{
    FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#bac6ca, EndColorStr=#dbe3e6);
    height: 20px;
    color: #000066;
    background-color: #dbe3e6;
    background-position: bottom;
 }
</style>
</head>

<body>
<table id="myTable" class="table_result" style="width: 100%"  cellpadding="1" cellspacing="0" border="1" bordercolor="#CCE6FE"> 
<thead> 
<tr> 
    <th class="table_result_title">AAAA</th> 
    <th class="table_result_title">BBBB</th> 
    <th class="table_result_title">CCCC</th> 
    <th class="table_result_title">DDDD</th> 
    <th class="table_result_title">EEEE</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
    <td>3</td> 
    <td>d</td> 
    <td>张三</td> 
    <td>¥50.00</td> 
    <td>dagadf</td> 
</tr> 
<tr> 
    <td>2</td> 
    <td>a</td> 
    <td>李四</td> 
    <td>¥50.00</td> 
    <td>bgshs</td> 
</tr> 
<tr> 
    <td>1</td> 
    <td>c</td> 
    <td>王二</td> 
    <td>¥100.00</td> 
    <td>ergse</td> 
</tr> 
<tr> 
    <td>4</td> 
    <td>b</td> 
    <td>麻子</td> 
    <td>¥50.00</td> 
    <td>nsdfg</td> 
</tr> 
</tbody> 
</table> 
</body>
</html>

 

利用tablesorter实现表格排序

标签:charset   aaa   this   ott   rtc   bottom   pos   position   排序   

原文地址:http://www.cnblogs.com/yeyerl/p/7424662.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!