利用tablesorter实现表格排序

<!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>
时间: 2024-10-14 10:26:15

利用tablesorter实现表格排序的相关文章

使用jquery的tablesorter插件进行表格排序

今天在学习bootstrap的时候,突然看见tablesorter这个东东了,立马百度了一下,发现了这个东东.. 下面说一下今天我在项目中看见前辈们用的表格排序 tablesorter的官方网站:http://tablesorter.com/docs/ 使用方法:1.下载tablesorter http://tablesorter.com/jquery.tablesorter.zip 2.解压文件,将jquery和jquery.tablesorter.min.js导入到项目文件中 3.修改htm

jQuery表格排序组件-tablesorter

一.引入文件 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.tablesorter.js"></script> <!-- 引入以下样式则表头出现排序图标,同时引入图片 --> <link href=

使用jQuery UI 实现表格排序

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>表格排序</title> <link rel="stylesheet" href="jquery-ui-1.12.0/jquery-ui.css"></head> <body><table id="myTabl

非常好用的jQuery表格排序插件

非常好用的 jQuery表格排序插件 https://mottie.github.io/tablesorter/docs/ CDN https://www.bootcdn.cn/jquery.tablesorter/ http://www.jq22.com/jquery-info7356 原文地址:https://www.cnblogs.com/nanahome/p/10585728.html

老二牛车Axure夜话:中继器系列视频教程之中继器表格排序

老二牛车Axure夜话:中继器系列视频教程之中继器表格排序 案例描述:使用中继器表格排序 知识点: 中继器的排序 效果图: 本站在线效果预览:http://www.iniuche.com/repeaterlesson/repeatersort/start.html#p=home(firefox原型文件) AxShare在线效果预览: 原型下载地址:中继器表格排序.rp 在线视频: 实现步骤: 更新中…..

[Js]表格排序

思路:遍历每个li,病并把它们存放到数组中去,然后通过sort()方法进行排序 <body>    <input type="button" value="排序按钮" id="btn1">    <ul id="ul1">        <li>58</li>        <li>8</li>        <li>31</

jquery 表格排序,实时搜索表格内容

jquery 表格排序,实时搜索表格内容 演示 XML/HTML Code <table class="table-sort"> <thead> <tr> <th class="table-sort">First Name</th> <th class="table-sort">Last Name</th> <th class="table-sor

table排序,多个表格排序

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

html表格排序之完全详解

<!DOCTYPE HTML> <html>  <head>     <title> 表格排序 </title>     <meta charset="utf-8">     <meta name="Generator" content="EditPlus">     <meta name="Author" content="t