• JqueryPagination 分页插件使用说明


      JqueryPagination是个简单轻量级的分页插件,使用起来很容易,只要初始化一个实例,并设置总数量、翻页回调函数、其它参数就可以实现无刷新分页功能了

      

    1 首先引入相关js文件:

    <link href="Scripts/pagination.css" rel="stylesheet" type="text/css" />
    <script src="../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script> // 个人发现插件对1.4版不支持
    <script src="Scripts/jquery.pagination.js" type="text/javascript"></script>

    2 编写html代码,在页面添加一个div

     <div id="pagination">
     </div>

    添加javascript 代码,实例化分页插件

     $(function () {
        var pageCount=50;  //分页总数量
    // $("#pagination").pagination(
    pageCount); //简单初始化方法

    $(
    "#pagination").pagination(pageCount, //分布总数量,必须参数
    {
              callback: PageCallback,  //PageCallback() 为翻页调用次函数。
                      prev_text: "« 上一页",
                      next_text: "下一页 »",
                      items_per_page:10,
                      num_edge_entries: 2,       //两侧首尾分页条目数
                      num_display_entries: 10,    //连续分页主体部分分页条目数
                      current_page: 0,   //当前页索引
              link_to: "?id=__id__" //分页的js中会自动把"__id__"替换为当前的数。0 
       
    });

    });

    function
    PageCallback(page_index,jq)
    {
    $.ajax({
                    type: "POST",  
                    dataType: "text",  
                    url: '后台处理地址',      //提交到一般处理程序请求数据   
                    data: "pageIndex=" + (pageIndex) + "&pageSize=" + pageSize,          //提交两个参数:pageIndex(页面索引),pageSize(显示条数)           
                    success: function(data) {
                               //后台服务返回数据,重新加载数据
                            }  
               }); 
    }

    4               插件pagination()方法参数

    参数名描述参数值
    maxentries 总条目数                           必选参数,整数
    items_per_page 每页显示的条目数                       可选参数,默认是10
    num_display_entries 连续分页主体部分显示的分页条目数                       可选参数,默认是10
    current_page 当前选中的页面                      可选参数,默认是0,表示第1页
    num_edge_entries 两侧显示的首尾分页的条目数                      可选参数,默认是0
    link_to 分页的链接                  字符串,可选参数,默认是"#"
    prev_text “前一页”分页按钮上显示的文字                 字符串参数,可选,默认是"Prev"
    next_text “下一页”分页按钮上显示的文字                字符串参数,可选,默认是"Next"
    ellipse_text 省略的页数用什么文字表示                   可选字符串参数,默认是"…"
    prev_show_always 是否显示“前一页”分页按钮           布尔型,可选参数,默认为true,即显示“前一页”按钮
    next_show_always 是否显示“下一页”分页按钮           布尔型,可选参数,默认为true,即显示“下一页”按钮
    callback 回调函数              当点击链接的时候此函数被调用,此函数接受两个参数,新一页的id和pagination容器(一个DOM元素)。如果回调函数返回false,则pagination事件停止执行
    load_first_page
       
        
    初始化时是否执行回调函数  如果为true则当插件初始化时回调函数被执行。如果你通过ajax来显示内容,那么在初始化分页插件时应把它设置为false;默认值: true

    5 插件其它方法

        // 自定义事件触发分页
    
        // 跳到第3页 
        $("#pagination").trigger('setPage', [2]);
        // 下一页
        $("#pagination").trigger('nextPage');
        // 上一页
        $("#pagination").trigger('prevPage');

    后台代码就贴出来了,一般是返回json格式的数据到前面处理。

    总结:JqueryPagination使用简单,只需要设置参数和回调函数就可以用,通过回调函数处理 翻页触发的事件,比较灵活。

  • 相关阅读:
    php CodeIgniter处理多环境错误级别配置
    bootstrap导航条在手机上默认展开二级目录,必须用setTimeout才能实现
    WordPress博客网站fonts.useso加载慢解决办法
    JS实现复制网页内容自动加入版权内容代码和原文链接
    bootstrap实现 手机端滑动效果,滑动到下一页,jgestures.js插件
    mysql字段varchar区分大小写utf8_bin、utf8_general_ci编码区别
    js捕捉IE窗口失去焦点事件,判断离开页面刷新或关闭的方法
    php防盗链,php ci在control里面控制除了自己站内的链接点击跳转,其他来源的都跳到站内页面
    php原子操作,文件锁flock,数据库事务
    默认只显示指定高度,出来按钮 阅读更多,加载全文,点击后显示全文的实现方式
  • 原文地址:https://www.cnblogs.com/jingping/p/3925976.html
Copyright © 2020-2023  润新知