jQuery分页插件bs_pagination

所属分类:导航-分页

 58662  365  查看评论 (23)
分享到微信朋友圈
X
jQuery分页插件bs_pagination ie兼容6

如何使用  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.');
  }
});
相关插件-分页

bootstrap paginat分页优化

增加显示当前页码、总页数,输入页码跳转,并且插件中的英文提示和注释都翻译成了中文
  分页
 36470  291

jQuery table分页插件

一款简单快速的前后端分页双套代码
  分页
 54450  391

jQuery分页插件pagination.build.js

jQuery分页插件pagination.build.js根据页数生成页码,配置简单使用方便
  分页
 23446  252

实用的分页插件zxf_page.js

基于jquery的分页插件
  分页
 37977  320

讨论这个项目(23)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    顶天立地 0
    2019/6/9 21:49:42
    非常好,什么时候试试 回复
    横眉冷对秋波 0
    2018/1/29 11:23:16

    如何从后台取数据在前端分页显示呢

        microsoftvs0
        2018/1/30 11:14:04

        后台给前台传总数,前台给后台传当前页数,后台查询数据库第几条到第几条就行了,就是这么个原理啦。

    回复
    smallkk 0
    2017/11/24 19:13:50
    宇枫 0
    2017/11/18 8:14:30
    喻盼盼盼 0
    2017/4/19 9:16:43

    最后面的两个按钮是做什么的?没看出效果来啊?

        8691237710
        2017/5/19 14:12:30

        回车试试 哈哈

        若只初见0
        2017/12/11 18:33:45

        回车试试,一个是分页的总页数,另一个是跳转到哪一页

    回复
      0
    2016/9/12 16:09:40
    感谢楼主分享啊哈啊啊 回复
    greatfever 0
    2016/7/17 16:07:42
    很好,项目也有用 回复
    Marjorie_Ling 0
    2016/6/7 22:06:59
    水木年华 0
    2016/5/17 20:05:34
    不错 就是下不下来 回复
    anki8088 0
    2016/3/14 23:03:29
    在分页的时候,修改为手机屏,页码部分不显示两行就完美了。 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复