欢迎光临一流素材网,免积分免费素材下载!
AD
当前位置:首页 > JS代码 > 其它代码

jquery翻页插件

所属栏目:其它代码更新时间:2016-07-14原作者:不详发布者:deepdfhy浏览:0
基本信息
  • 发布者:
  • 原作者:不详
  • 来源:不详
  • 版权声明


如何使用  bs_pagination

  1. 添加对 bs_pagination 的 css 和 js 文件的引用。 

  2. 创建一个div用于渲染 bs_pagination 插件。给其一个ID (比如 mypagination )

  3. 添加如下的 js

$("#mypagination").bs_pagination({
     // 参数 
     })

参数

$("#element_id").bs_pagination({
   currentPage: 1,
   rowsPerPage: 10,   
   maxRowsPerPage: 100,   
   totalPages: 100,   
   totalRows: 0,     
   visiblePageLinks: 5,     
   showGoToPage: true,   
   showRowsPerPage: true,  
   showRowsInfo: true,   
   showRowsDefaultInfo: true,     
   directURL: false, // or a function with current page as argument   
   disableTextSelectionInNavPane: true, // disable text selection and double click     
   bootstrap_version: "3",     // bootstrap 3   
   containerClass: "well",     
   mainWrapperClass: "row",     
   navListContainerClass: "col-xs-12 col-sm-12 col-md-6",   
   navListWrapperClass: "",   
   navListClass: "pagination pagination_custom",   
   navListActiveItemClass: "active",     
   navGoToPageContainerClass: "col-xs-6 col-sm-4 col-md-2 row-space",   
   navGoToPageIconClass: "glyphicon glyphicon-arrow-right",   
   navGoToPageClass: "form-control small-input",     
   navRowsPerPageContainerClass: "col-xs-6 col-sm-4 col-md-2 row-space",   
   navRowsPerPageIconClass: "glyphicon glyphicon-th-list",   
   navRowsPerPageClass: "form-control small-input",     
   navInfoContainerClass: "col-xs-12 col-sm-4 col-md-2 row-space",   
   navInfoClass: "",     // element IDs   
   nav_list_id_prefix: "nav_list_",   
   nav_top_id_prefix: "top_",   
   nav_prev_id_prefix: "prev_",   
   nav_item_id_prefix: "nav_item_",   
   nav_next_id_prefix: "next_",   
   nav_last_id_prefix: "last_",     
   nav_goto_page_id_prefix: "goto_page_",   
   nav_rows_per_page_id_prefix: "rows_per_page_",   
   nav_rows_info_id_prefix: "rows_info_",     
   onChangePage: function() { // returns page_num and rows_per_page after a link has clicked   },   
   onLoad: function() { // returns page_num and rows_per_page on plugin load   } 
   });

方法

var version = $("#element_id").bs_pagination('getVersion');
 $("#element_id").bs_pagination('getDefaults'); 
 $("#element_id").bs_pagination('getOption', 'option_name'); 
 $("#element_id").bs_pagination('getAllOptions'); 
 $("#element_id").bs_pagination('destroy'); 
 $("#element_id").bs_pagination('setRowsInfo', 'info_html');

事件

//onChangePage $("#element_id").bs_pagination({
   onChangePage: function(event, data) {
        // your code here e.g.     
        console.log('Current page is: ' + currentPage.col + '. ' + rowsPerPage + ' are displayed per page.');
           } });
//onLoad $("#element_id").bs_pagination({
   onLoad: function(event, data) {     
   // your code here e.g.     
   console.log('Current page is: ' + currentPage.col + '. ' + rowsPerPage + ' are displayed per page.');
      } 
      });


具体效果请看演示,一流资源网推荐下载。

标签:
代码下载
本站下载
收藏 0 有帮助 0 没帮助 0
请站长喝杯咖啡?

站长一直坚持白天工作、晚上熬夜更新素材,付出了巨大的精力和时间,其中的辛酸难以言述。

如果本站素材对你有用,不妨考虑请站长喝杯咖啡鼓励一下!

立即打赏 0
给个评价吧
最受欢迎的

1JS动态五星评分插件代码

2淘宝商品jQuery列表多条件查询特效代码

3兼容所有浏览器的设为首页收藏本站js代码

4JS实现文字替换成图片或者其它内容

5js实现网页多个div定时轮流显示的代码

6IE6旧版浏览器提示升级代码模板下载

7SimplePager-非常简洁优秀的 jQuery 分页插件-同页面可重复使用

8后台登录jquery网页全屏背景图片自动切换代码

9百度404页面JS倒计时返回页面代码

10jQuery公司大事记、历程时间轴专用代码

最新更新的

1JS点击加大/减小字号的代码

2jQuery点击展开与收缩查看更多效果代码

3JqueryPagination分页插件

4一款漂亮方便调用的jQuery前端分页

5JS返回上一页/返回上一页并刷新

6百度404页面JS倒计时返回页面代码

7JS赋值给指定元素的父级元素

8JS实现301跳转的JS代码

9JS拆分文本再组合

10Jquery点击按钮给class设置样式的JS代码