- /*
- *author zhy
- *date 2014-1-1
- *for 一个或者多个table分页function
- *先从数据库读出数据再主动分页 仿天涯论坛
- */
- var jq = jQuery.noConflict();
- //var id="tab1-tab2-tab3"; //所有table的id用“-”组成字符串,如果是一个table则直接传id
- function TablePage(id,size){
- var test=id.indexOf("-");
- if(test>0){ //多个table
- var id_arrs=id.split("-");
- var nums=id_arrs.length; //id的个数
- if(nums==2){
- var tab1 = jq("#"+id_arrs[0]);
- var tab2 = jq("#"+id_arrs[1]);
- var tab3 = jq("#zhongyi");
- }else if(nums==3){
- var tab1 = jq("#"+id_arrs[0]);
- var tab2 = jq("#"+id_arrs[1]);
- var tab3 = jq("#"+id_arrs[2]);
- }
- var currentPage = 0;
- var pageSize = size; //每页显示的条数
- tab1.bind("repaginate", function(){
- tab1.find("tbody tr").hide().slice(currentPage * pageSize, (currentPage + 1) * pageSize).show();
- });
- tab2.bind("repaginate", function(){
- tab2.find("tbody tr").hide().slice(currentPage * pageSize, (currentPage + 1) * pageSize).show();
- });
- tab3.bind("repaginate", function(){
- tab3.find("tbody tr").hide().slice(currentPage * pageSize, (currentPage + 1) * pageSize).show();
- });
- var numRows1 = (tab1.find("tbody tr").length)-1; //总条数 把最后一条多余的空白去掉
- var numRows2 = (tab2.find("tbody tr").length)-1;
- var numRows3 = (tab3.find("tbody tr").length)-1;
- var numPages1 = Math.ceil(numRows1/pageSize); //总的页数
- var numPages2 = Math.ceil(numRows2/pageSize);
- var numPages3 = Math.ceil(numRows3/pageSize);
- var pager = jq("<div class='page' style='text-align:right;'><a href='javascript:void(0)'><span id='Prev'>上一页</span></a></div>");//上一页
- for( var page = 0; page < numPages1; page++ ){
- jq("<a href='javascript:void(0)'><span id='"+(page+1)+"'>"+ (page+1) +"</span></a>")
- .bind("click", { "newPage": page }, function(event){
- currentPage = event.data["newPage"];
- jq(this).children("span").attr("class","click_page");
- jq(this).children("span").CSS({"color":"#FFFFFF"});
- jq(".page a span").not(jq(this).children("span")).attr("class","");
- jq(".page a span").not(jq(this).children("span")).css({"color":"#1155BB"});
- tab1.trigger("repaginate");
- tab2.trigger("repaginate");
- tab3.trigger("repaginate");
- })
- .appendTo(pager);
- pager.append(" ");
- }
- var next=jq("<a href='javascript:void(0)'><span id='Next'>下一页»</span></a>"); //下一页
- pager.append(next);
- pager.insertAfter(jq("#"+id_arrs[0]+"pages"));//分页显示插入的位置
- jq("#1").attr("class","click_page");
- jq("#1").css({"color":"#FFFFFF"});
- tab1.trigger("repaginate");
- tab2.trigger("repaginate");
- tab3.trigger("repaginate");
- jq("#Prev").bind("click",function(){
- var prev=Number(jq(".click_page").text())-2;
- currentPage=prev;
- jq(this).css({"background":"#000000"});
- if(currentPage<0) {
- jq(this).css({"background":"#c0c0c0"});
- return;
- }
- jq("#"+(prev+1)).attr("class","click_page");
- jq("#"+(prev+1)).css({"color":"#FFFFFF"});
- jq(".page a span").not(jq("#"+(prev+1))).attr("class","");
- jq(".page a span").not(jq("#"+(prev+1))).css({"color":"#1155BB"});
- tab1.trigger("repaginate");
- tab2.trigger("repaginate");
- tab3.trigger("repaginate");
- });
- jq("#Next").bind("click",function(){
- var next=jq(".click_page").attr("id");
- currentPage=Number(next);
- jq(this).css({"background":"#FFFFFF"});
- if((currentPage+1)>numPages1) {
- jq(this).css({"background":"#c0c0c0"});
- return;
- }
- jq("#"+(currentPage+1)).attr("class","click_page");
- jq("#"+(currentPage+1)).css({"color":"#FFFFFF"});
- jq(".page a span").not(jq("#"+(currentPage+1))).attr("class","");
- jq(".page a span").not(jq("#"+(currentPage+1))).css({"color":"#1155BB"});
- tab1.trigger("repaginate");
- tab2.trigger("repaginate");
- tab3.trigger("repaginate");
- });
- }else{ //仅有一个table 同上
- var tab_id="#"+id;
- var tab = jq(tab_id);
- var currentPage = 0;
- var pageSize = size;
- tab.bind("repaginate", function(){
- tab.find("tbody tr").hide().slice(currentPage * pageSize, (currentPage + 1) * pageSize).show();
- });
- var numRows = (tab.find("tbody tr").length)-1;
- var numPages = Math.ceil(numRows/pageSize);
- var pager = jq("<div class='page' style='text-align:right;'><a href='javascript:void(0)'></a></div>");
- for( var page = 0; page < numPages; page++ ){
- jq("<a href='javascript:void(0)'><span id='"+(page+1)+"'>"+ (page+1) +"</span></a>")
- .bind("click", { "newPage": page }, function(event){
- currentPage = event.data["newPage"];
- jq(this).children("span").attr("class","click_page");
- jq(this).children("span").css({"color":"#FFFFFF"});
- jq(".page a span").not(jq(this).children("span")).attr("class","");
- jq(".page a span").not(jq(this).children("span")).css({"color":"#1155BB"});
- tab.trigger("repaginate");
- })
- .appendTo(pager);
- pager.append(" ");
- }
- var next=jq("<a href='http://www.lsdiscuz.com/forum.php?mod=forumdisplay&fid=74'><span id='Next'>更多 »</span></a>");
- pager.append(next);
- pager.insertAfter(jq("#"+id+"pages"));
- jq("#1").attr("class","click_page");
- jq("#1").css({"color":"#FFFFFF"});
- tab.trigger("repaginate");
- jq("#Prev").bind("click",function(){
- var prev=Number(jq(".click_page").text())-2;
- currentPage=prev;
- jq(this).css({"background":"#000000"});
- if(currentPage<0) {
- jq(this).css({"background":"#c0c0c0"});
- return;
- }
- jq("#"+(prev+1)).attr("class","click_page");
- jq("#"+(prev+1)).css({"color":"#FFFFFF"});
- jq(".page a span").not(jq("#"+(prev+1))).attr("class","");
- jq(".page a span").not(jq("#"+(prev+1))).css({"color":"#1155BB"});
- tab.trigger("repaginate");
- });
- jq("#Next").bind("click",function(){
- var next=jq(".click_page").attr("id");
- currentPage=Number(next);
- jq(this).css({"background":"#FFFFFF"});
- if((currentPage+1)>numPages) {
- jq(this).css({"background":"#c0c0c0"});
- return;
- }
- jq("#"+(currentPage+1)).attr("class","click_page");
- jq("#"+(currentPage+1)).css({"color":"#FFFFFF"});
- jq(".page a span").not(jq("#"+(currentPage+1))).attr("class","");
- jq(".page a span").not(jq("#"+(currentPage+1))).css({"color":"#1155BB"});
- tab.trigger("repaginate");
- });
- }
- }
- /****
- css 样式
- .page a{
- text-decoration:none;
- }
- .page a span{
- padding:4px 10px;
- border:1px solid #ddd;
- color: black;
- font-size:12px;
- font-weight:bold;
- font-family: "微软雅黑";
- }
- .page a span:hover,.click_page{
- background:blue;
- color:#fff;
- }
- ****/
- //该片段来自于http://www.codesnippet.cn/detail/090520149495.html
来源: http://www.codesnippet.cn/detail/090520149495.html