jquery实现简单分页

jquery实现简单分页

这里我的分页思路是先创建一个拼接行函数，然后根据每页的行数，将数组再放到分页函数里进行分页。

添加行函数

//添加行函数
//index 默认页码
//num 一页的行数(一页的数据数)
//list  要拼成tr的数据list
function init(index,num,list) {
   var tb= $("table").children("tbody");
   for(var i= (index-1)*num;i<=index*num-1;i++)
   {
       if(i>=list.length)
       {
        tb.append("");
       }
       else{
        var str="<tr><td>"+list[i].name+"</td><td>"+list[i].brand+"</td><td>"+list[i].country+"</td><td>"+list[i].price+"</td><td><a href='#'>删除</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href='#'>修改</a></td></tr>";
        tb.append(str);
       }  
   }
}

分页函数

//分页函数
function pagechange(list){
   var index=1;//默认首页
   var num=3;//每页的元素数量
   var pagenum=list.length%num==0?list.length/num:list.length/num+1;//页码数
    init(index,num,list);
    $("#text").html(index+"/"+parseInt(pagenum) +"页");
    //首页
    $("#first_page").click(function(){
        $("table").children("tbody").children("tr").remove();
        index=1;
        init(index,num,list);
        $("#text").html(index+"/"+parseInt(pagenum)+"页"); 
    });
    //上一页
    $("#pre_page").click(function(){
        index--;
        if(index<1){
            index=1;
        }
        $("table").children("tbody").children("tr").remove();
        init(index,num,list);
        $("#text").html(index+"/"+parseInt(pagenum)+"页");
    });
    //下一页
    $("#next_page").click(function(){
        index++;
        if(index>=pagenum){
            index= parseInt(pagenum) ;
        }
        $("table").children("tbody").children("tr").remove();
        init(index,num,list);
        $("#text").html(index+"/"+parseInt(pagenum)+"页");
    });
    //末页
    $("#last_page").click(function(){
        $("table").children("tbody").children("tr").remove();
        index= parseInt(pagenum);
        init(index,num,list);
        $("#text").html(index+"/"+parseInt(pagenum)+"页");
    })
}

以上就是简单的分页的所有代码了。

乾坤未定，你我皆是黑马！！！