前端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("超出页数范围或者输入有误请输入正确页码");
            }
        });
    }