tablesorter（JQuery 如何实现在同一个页面，通过点击不同的链接（action），显示不同的list）

本文目录

• JQuery 如何实现在同一个页面，通过点击不同的链接（action），显示不同的list
• 如何使用tablesorter对多行表头选择排序
• 关于jquery.tablesorter.pager分页插件 怎么默认显示最后一页以下代码为默认显示第一页
• mootools与jquery tablesorter 冲突
• jquery tablesorter 排序问题

JQuery 如何实现在同一个页面，通过点击不同的链接（action），显示不同的list

main.jsp更改如下

《%@ page language="java" pageEncoding="UTF-8"%》

  《DIV class="ui-layout-north"》

  《/DIV》

  《DIV class="ui-layout-west"》

   《dl id="sfqclick"》

    《dt class="leftIco"》

     省市

    《/dt》

    《dd》

     《a href="1.jsp"》查询省《/a》

     《a href="#"》查询市《/a》

    《/dd》

    《dt class="leftIco"》

     第二部分

    《/dt》

    《dd》

     《a href="#"》SubLink-1《/a》

     《a href="#"》SubLink-2《/a》

     《a href="#"》SubLink-3《/a》

    《/dd》

    《dt class="leftIco"》

     第三部分

    《/dt》

    《dd》

     《a href="#"》SubLink-1《/a》

     《a href="#"》SubLink-2《/a》

     《a href="#"》SubLink-3《/a》

    《/dd》

   《/dl》

  《/DIV》

1.jsp更改如下

《%@ page language="java"  pageEncoding="UTF-8"%》

《HTML》

 《HEAD》

  《TITLE》Layout Example《/TITLE》

  《link rel="stylesheet" href="css/style.css" type="text/css" /》

  《SCRIPT type="text/javascript" src="jquery.js"》《/SCRIPT》

  《SCRIPT type="text/javascript" src="jquery.layout.js"》《/SCRIPT》

  《script type="text/javascript" src="jquery.tablesorter.js"》《/script》

  《SCRIPT type="text/javascript"》

   $(document).ready(function () {

    $(’body’).layout({ applyDefaultStyles: true });

    //

    $("#sfqclick dt").click(function(){

     $(this).toggleClass("bottomIco")

         .next().slideToggle(1)

         .siblings("dd").slideUp("fast");

     $(this).siblings("dt").removeClass("bottomIco");

    });

   });

   // add parser through the tablesorter addParser method     

   $.tablesorter.addParser({         // set a unique id         

    id: ’grades’,         

    is: function(s) {             // return false so this parser is not auto detected

    return false;},

    format: function(s) {             // format your data for normalization            

    return s.toLowerCase().replace(/good/,2).replace(/medium/,1).replace(/bad/,0); },

   // set type, either numeric or text         

    type: ’numeric’     }); 

    $(function() {         

    $("table").tablesorter({            

    headers: {                 

    6: {                     

    sorter:’grades’  

    }            

    }        

   });   

   });

  $(document).ready(function(){

   $(’dd a:first’).click(function(){

    $.ajax({

     type: "POST",

        url: "findProvinceAll.action",

        dataType: "json",

        success: function(msg){

         alert( "Data Saved: " + msg );

        }

    });

   });

  });

《/SCRIPT》

《/HEAD》

《body》

《jsp:include page="main.jsp"》《/jsp:include》

《DIV class="ui-layout-center"》

《table cellspacing="1" class="tablesorter"》

 《thead》 

  《tr》     

   《th》省ID《/th》     

   《th》省名称《/th》     

  《/tr》 

 《/thead》 

 《tbody》 

  《tr》    

   《td id="prvoinceId"》《/td》   

   《td id="provinceName"》《/td》   

  《/tr》

 《/tbody》 

《/table》

《/DIV》

《/BODY》

《/HTML》

结果看图访问1.jsp

如何使用tablesorter对多行表头选择排序

代码如下:
《script type="text/javascript" src="js/jquery.js"》《/script》
《script type="text/javascript" src="js/jquery.tablesorter.js"》《/script》
《!-- 引入以下样式则表头出现排序图标，同时引入图片 --》
《link href="css/style.css" rel="stylesheet" type="text/css" 》

关于jquery.tablesorter.pager分页插件 怎么默认显示最后一页以下代码为默认显示第一页

在jquery里可以直接用isNaN()，因为他是JavaScript的类库。是由JavaScript语言写的。
例如：
《script type="text/javascript"》
$(document).ready(function(){
alert(isNaN($(’#id’).val()));
});
《/script》可以直接使用

mootools与jquery tablesorter 冲突

因为jQuery和MooTools都定义了 $ 的，所以会冲突，可以把jQuery的$释放，用法jQuery.noConflict();
但不建议引入两个库，因为jquery和mootools实现的交换基本一样

jquery tablesorter 排序问题

$.tablesorter.addParser({
id: "floatsorter", //指定一个唯一的ID
is: function(s){
return false;
},
format: function(s){
return s..replace(/,/,""); //将逗号去掉
},
type: "numeric" //按数值排序
});
$("#mytable").tablesorter({headers:{4:{sorter:"floatsorter"}}});
***隐藏网址***
可是我改了，O(∩_∩)O哈哈哈~