分页控件之jPaginate

1.网上搜索相关的分页控件，下载它的demo文件

2.打开demo文件，里面会有一个html静态页，打开研究

3.查看源代码，找出控件所依赖的js和css

 

开始实操：

1.新建一个html或者aspx页面，把控件依赖的js和css拉入项目并在页面中引用

2.创建一个div,对其进行控件的初始化，直接复制demo下的源代码即可

3.现在浏览就应该会出现效果了。

---经过以上，仅仅是把控件展示在项目中，但是还没有和我们的业务进行相关的绑定！！！

 

----重点来了。

当浏览器/Ajax发出请求分页数据时，后台经过处理把查询到得分页数据返回给浏览器，那么什么时候才生成分页控件呢？

答：当后台把分页数据返回给浏览器，浏览器/Ajax通过回调函数，把返回的数据遍历生成表格，再把分页控件生成。

前端演示：

$(funcsion(){

    //当页面加载完毕后，通过ajax发送请求后台，返回分页数据

 

})

function getList(pageIndex){

    //1.0 利用ajax请求后台，得到分页的数据(json字符串)，开始生成表格或者其他

    $.getJson("/qiwo/getlist.aspx?pagesize=8&pageindex="+pageIndex,function(jsonObj){

        if(jsObj.status=="error")

        {

          alert("失败")；

        }

        else if(jsonObj.status=="sucess")

        {

          //1.0 正常处理逻辑，将数据遍历生成表格，最终把生成好的html代码追加到所要展示的div中

          $("#newlist").html();

          //2.0 生成分页控件呈现到页面上

          createPageBar(jsonObj.totalPage,pageIndex);

        }

    });

}

//生成分页控件

function createPageBar(totalPage,currentpage){

    $("#demo4").paginate({

      count:totalpage,  //总页码，总页码=totalcount/pagesize----肯定是后台获取，所以应该为参数传递

    start: currentpage//分页控件高亮选中的页码，这也必须要后台获取，应为如果写死，如start:1,那么当我点击第二页的时候，还是1这个页码高亮选择，却显示第二页的内容

      display:totalpage  //当前分页控件显示的页码数量，例如：假如display:2,但是我返回的count=4,即有4页，但是由于设置了display=2,所以只展示2页，剩下两页通过下一页获得。

      onChage:function(pageIndex){

            //当点击页码时，应该重新发出ajax请求后台，返回该页码的分页数据，再重新生成分页控件，所以！

            getList(pageIndex);//一开始，肯定是读取第一页的内容

          }

 

    });

 

------解释一下生成分页控件和发出ajax请求分页数据，所需要传递的参数

ajax所带的参数，是根据后台分页存储过程的参数，而对应的。

分页控件所带的参数，是根据分页控件所需要的参数而对应的。

但是通过ajax请求后台，返回的数据，是包含分页数据和分页控件所需要的相关参数的一个分页实体

 

 

 

 

}

 

---由上生成分页控件，需要传递参数，进行生成。而数据是从后台获取分页数据时，和分页数据一起返回给前端的，所以应该在后台定义一个分页的实体类

 public class AjaxPage

{

  public string status{get,set}//状态

  public object datas{get,set}//真正的分页数据

  public decimal totalcount{get,set}//总行数

  public decimal totalpage{get,set}//总页码，即显示有多少页码，假如=3，即1,2,3页

}

 

转载于:https://www.cnblogs.com/yao-lin/p/4090926.html