前端jquery表格分页效果函数分装(jquery表格行显示隐藏变形问题)

 

标题

html代码如下:

<div>
<span class="spanFirst">第一页</span>
<span class="spanPre">上一页</span>
第<span class="spanPageNum"></span>页/
共<span class="spanTotalPage"></span>页
<span class="spanNext">下一页</span>
<span class="spanLast">最后一页</span>
第<input class="count" value="" />页 <button class="btns">刷新</button>
</div>

//说明:页面样式(上图)没有添加第一页和最后一页按钮,但代码中已写,望参考!

 //注:js 控制表格行隐藏显示后变形,应将block取掉

jquery代码如下:
//分页效果函数调用例一
var $trswait = $(".tablewait tbody tr");  //.tablewait代表表格class名
tablesttr($trswait);
//分页效果函数调用例二
var $trswaiting = $(".tablewaiting tbody tr");  //.tablewaiting 代表另一个表格的class名
tablesttr($trswaiting);
  //分页效果函数封装
    function tablesttr(obj){
        var pagesize = 10;
        var curr = 1;
        var currRow = pagesize * curr;
        var allpage = Math.ceil(obj.length/pagesize);
        var trs = trs=$("table#showTb tbody tr[class=hid]");//相当于obj

//页面初始状态
        $(document).ready(function(){
            hideTab();
            curr=1;
            $("tbody tr:lt(10)").css({"display":"block",});
                //注:js控制表格行显示隐藏会变形可用以下方法:
                 //$("table#showTb tbody tr[class=hid]:lt(12)").show();
            $(".spanTotalPage").text(allpage);
            $(".spanPageNum").text(curr);
            $(".count").css({"width":"50px",});
        });
//通用隐藏方法
        function hideTab(){
            obj.css("display","none");
            //trs.css("display","none");
            //注:js控制表格行显示隐藏会变形可用以下方法:
            //例:$("table#showTb tbody tr[class=hid]").hide();
        }

//下一页 绑定点击事件
        function spanNext(){
            hideTab();
            if(curr>allpage-1){
                curr=allpage;
            }else{
                curr++;
            }
            var currRow=pagesize*curr;
            $.each(obj,function(index,value){
                if(index<currRow&&index>=currRow-pagesize){
                    //var that=this;
                    //that.style.display="block";
                    //注:js 控制表格行隐藏显示后变形,应将block取掉
                     trs[index].style.display="";
                }
            });
            $(".spanPageNum").text(curr);
        }
        $(".spanNext").bind("click",spanNext);

//上一页 绑定点击事件
        function spanPre(){
            hideTab();
            if(curr<2){
                curr=1;
            }else{
                curr--;
            }
            var currRow=pagesize*curr;
            $.each(obj,function(index,value){
                if(index<currRow&&index>=currRow-pagesize){
                    //var that=this;
                    //that.style.display="block";
                     //注:js 控制表格行隐藏显示后变形,应将block取掉
                     trs[index].style.display="";
                }
            });
            $(".spanPageNum").text(curr);
        }
        $(".spanPre").bind("click",spanPre);
//为第一页绑定点击事件
function spanFirst(){
    hideTab();
    curr=1;
    var currRow=pagesize*curr;
    $.each(obj,function(index,value){
        if(index<currRow&&index>=currRow-pagesize){
            //this.style.display="block";
               //注:js 控制表格行隐藏显示后变形,应将block取掉
               trs[index].style.display="";
        }
    });

    $(".spanPageNum").text(curr);
}
$(".spanFirst").bind("click",spanFirst);
//为最后一页绑定点击事件
function spanLast(){
    hideTab();
    curr=allpage;
    var currRow=pagesize*curr;
    $.each(obj,function(index,value){
        if(index<currRow&&index>=currRow-pagesize){

            //this.style.display="block";
                     //注:js 控制表格行隐藏显示后变形,应将block取掉
                     trs[index].style.display="";
        }
    });
    $(".spanPageNum").text(curr);
}
$(".spanLast").bind("click",spanLast);
//手动输入input值变化
//为btns绑定 点击按钮刷新事件
        $(".btns").click(function(){
            if ($(".count").val().trim() ==""){
                spanFirst();
            }else if($(".count").val()>=1&&$(".count").val()<=allpage){
                hideTab();
                curr=$(".count").val();
                var currRow=pagesize*curr;
                $.each(obj,function(index,value){
                    if(index<currRow&&index>=currRow-pagesize){
                        //this.style.display="block";
                         //注:js 控制表格行隐藏显示后变形,应将block取掉
                             trs[index].style.display="";
                    }
                });
                $(".spanPageNum").text(curr);
            }else{
                alert("超出页数范围或者输入有误请输入正确页码");
            }
        });
    }
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
package com; public class Pager { private int totalRows = 0; // 记录总数 private int totalPages = 0; // 总页数 private int pageSize = 10; // 每页显示数据条数,默认为10条记录 private int currentPage = 1; // 当前页数 private boolean hasPrevious = false; // 是否有上一页 private boolean hasNext = false; // 是否有下一页 public int getSearchFrom() { return (currentPage - 1) * pageSize; } public Pager() { } public void init(int totalRows) { this.totalRows = totalRows; this.totalPages = ((totalRows + pageSize) - 1) / pageSize; refresh(); // 刷新当前页面信息 } /** * * @return Returns the currentPage. * */ public int getCurrentPage() { return currentPage; } /** * * @param currentPage * current page * */ public void setCurrentPage(int currentPage) { this.currentPage = currentPage; refresh(); } /** * * @return Returns the pageSize. * */ public int getPageSize() { return pageSize; } /** * * @param pageSize * The pageSize to set. * */ public void setPageSize(int pageSize) { this.pageSize = pageSize; refresh(); } /** * * @return Returns the totalPages. * */ public int getTotalPages() { return totalPages; } /** * * @param totalPages * The totalPages to set. * */ public void setTotalPages(int totalPages) { this.totalPages = totalPages; refresh(); } /** * * @return Returns the totalRows. * */ public int getTotalRows() { return totalRows; } /** * * @param totalRows * The totalRows to set. * */ public void setTotalRows(int totalRows) { this.totalRows = totalRows; refresh(); } // 跳到第一页 public void first() { currentPage = 1; this.setHasPrevious(false); refresh(); } // 取得上一页(重新设定当前页面即可) public void previous() { if (currentPage > 1) { currentPage--; } refresh(); } // 取得下一页 public void next() { //System.out.println("next: totalPages: "
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值