jquery+bootstrap分页控件
源码:
(function ($) {$.fn.extend({ftx_pager: function (paraObj) {var total = paraObj.total > 0 ? paraObj.total : 0;var rows = paraObj.rows > 0 ? paraObj.rows : 20;var curpage = paraObj.curpage > 0 ? paraObj.curpage * 1 : 1;var totalpage = parseInt(total / rows);if (total % rows > 0) {totalpage++;}curpage = curpage > totalpage ? totalpage : curpage;var showPageNoBegin = 1;var showPageNoEnd = 10;if (curpage > 5) {showPageNoBegin = curpage - 4;showPageNoEnd = curpage + 5;}if (showPageNoEnd > totalpage) {showPageNoEnd = totalpage;showPageNoBegin = totalpage - 9 > 0 ? totalpage - 9 : 1;}showPageNoBegin = totalpage == 0 ? 0 : showPageNoBegin;var html = '<ul class="pagination">';if (curpage == 1 || curpage == 0) {html += '<li class="page-item disabled"><a class="page-link" href="javascript:void(0);">首页</a></li >';html += '<li class="page-item disabled"><a class="page-link" href="javascript:void(0);">上页</a></li >';}else {html += '<li pno="1" class="page-item"><a class="page-link" href="javascript:void(0);">首页</a></li >';html += '<li pno="' + (curpage - 1) + '" class="page-item"><a class="page-link" href="javascript:void(0);">上页</a></li >';}for (var i = showPageNoBegin; i <= showPageNoEnd; i++) {if (i == curpage) {html += '<li class="page-item active"><a class="page-link" href="javascript:void(0);">' + i + '</a></li>';}else {html += '<li pno="' + i + '" class="page-item"><a class="page-link" href="javascript:void(0);">' + i + '</a></li>';}}if (curpage == totalpage) {html += '<li class="page-item disabled"><a class="page-link" href="javascript:void(0);">下页</a></li>';html += '<li class="page-item disabled"><a class="page-link" href="javascript:void(0);">末页</a></li>';}else {html += '<li pno="' + (curpage + 1) + '" class="page-item"><a class="page-link" href="javascript:void(0);">下页</a></li>';html += '<li pno="' + totalpage + '" class="page-item"><a class="page-link" href="javascript:void(0);">末页</a></li>';}html += '<li class="page-item"><select class="pager_rows">'html += '   <option value="10">10</option><option value="20">20</option><option value="50">50</option>'html += '   <option value="100">100</option><option value="500">500</option><option value="1000">1000</option>'html += '</select></li>'html += '<li class="page-item"><span class="page-link">共' + total + ' 记录</span></li>';html += '</ul >';$(this).html(html);$(this).attr("curpage", curpage);$(this).attr("total", total);$(this).find(".pager_rows").val(rows);$(this).each(function () {var $self = $(this);$(this).find("li").click(function () {if ($(this).attr("pno") && $(this).attr("pno") > 0) {$self.attr("curpage", $(this).attr("pno"));$self.trigger("pagechange", [$(this).attr("pno"), $self.find(".pager_rows").val()]);}});$(this).find(".pager_rows").change(function (a, b) {var i_total = $self.attr("total");var i_rows = $self.find(".pager_rows").val();var i_totalpage = parseInt(i_total / i_rows);if (i_total % i_rows > 0) {i_totalpage++;}var i_curpage = $self.attr("curpage");i_curpage = i_curpage > i_totalpage ? i_totalpage : i_curpage;$self.trigger("pagechange", [i_curpage, i_rows]);});});return $(this);}})
})(jQuery);
页面元素:
<div name="pager"></div>
调用方式:
$("div[name='pager']").ftx_pager({
total: 3, rows: 1, curpage: 1
});
添加事件:jquery+bootstrap分页控件
$("div[name='pager']").bind("pagechange", function (event, pageIndex, rows) {            
});

jquery+bootstrap分页控件相关推荐

  1. jq实现html分页代码,jquery 分页控件实现代码

    jquery分页控件 var pageindex=1; var totelsize=60; var centersize=5; var pagesize=0; var totelSec=0; var ...

  2. angularjs实现的前端分页控件

    angularjs实现的前端分页控件 前言:之前写个一个jQuery的分页显示插件,http://blog.csdn.net/peakchen_90/article/details/52187175, ...

  3. 妹子UI之自定义分页控件

    妹子UI,http://amazeui.org,在这儿顺便帮他打下广告,我个人觉得比Bootstrap漂亮,于是,我就选择了基于它的UI写出来自己的分页控件. paginator.js的内容如下: ( ...

  4. 分页控件-ASP.NET(AspNetPager)

    AspNetPager是asp.net中常用的分页控件,下载AspNetPager.dll,添加引用,在工具栏就可以看到AspNetPager控件: <div class="oa-el ...

  5. MvcPager 免费开源分页控件3.0版发布!

    MvcPager 3.0版在原2.0版的基础上进行了较大的升级,对MvcPager脚本插件重写并进行了大量优化.修复了部分bug并新增了客户端Javascript API等功能,使用更方便,功能更强大 ...

  6. 日积月累系列之分页控件(js源码)

    最近开发了一款分页控件,分享给大家. 主要功能和界面介绍 cform分页控件支持服务端分页.客户端分页.数据过滤.数据排序等功能. 源码介绍 cform-pager分页控件主要由三部分组成:css.s ...

  7. MVC3学习第十三章 佟掌柜第二弹——MVC3下利用陕北吴旗娃的分页控件实现数据分页...

    本章学习内容 1.了解陕北吴旗娃的Mvc分页控件 2.利用分页控件实现MVC3下的商品分页 3.利用分页控件实现MVC3下一个页面多个分页以及ajax分页效果 1.了解陕北吴旗娃的Mvc分页控件 在w ...

  8. KingPager,自己做的分页控件,纯JS,支持所有语言

    效果图如下: 简介: 1.JQuery分页控件,纯JS,支持任何语言 2.全部样式可通过CSS自定义(默认的就很好看) 3.非常灵活,1行代码即可实现分页 调用示例: <html xmlns=& ...

  9. Winform分页控件之纯分页显示处理

    在之前介绍的Winform分页控件中,都以分页控件+显示表格控件作为一个整体性的控件,不可分开,这样做的目的是可以实现更多的操作,集成更多丰富的特性,减少我们开发的工作量,这种情况虽然适用于大多数的情 ...

最新文章

  1. php 正则表达式 ies,正则表达式模式修正符(/ies)
  2. [WinForm] VS2010发布、打包安装程序(超全超详细)
  3. LeetCode 1005. K 次取反后最大化的数组和
  4. ERROR: cuda_runtime_api.h: No such file or directory
  5. Oracle异常汇总
  6. solr导入mysql失败_mysql – SOLR DataImport错误“无法执行查询”
  7. 百度手机输入法中的五笔9键盘有问题?
  8. 易筋SpringBoot 2.1 | 第十一篇:SpringBoot使用actuator
  9. APP——adb命令——背诵实操——背诵总结
  10. AWK awk xxx xxx
  11. Moviepy模块之视频添加图片水印
  12. 从荣耀V20看技术人怎么销售自己
  13. 车载系统升级、“特饭”会员品牌上线,解读新特背后的互联网产品逻辑...
  14. [清新]黄花菜花盛开的季节
  15. 描述: 一注完整的双色球彩票号码由5个红色号码,2个蓝色号码组成 共七位数注意: 只要刷新一次页面 让球发生一次变化
  16. PPT制作图片磨砂玻璃艺术效果
  17. 5-TDengine集成SpringBoot,MyBatis,MyBatisPlus
  18. 遇到问题--k8s--helm安装prometheus报错Error: failed to download “stable/prometheus-operator“
  19. 陶瓷电路板与常规PCB板的区别
  20. linux proc cpuinfo,Linux下查看CPU信息[/proc/cpuinfo]

热门文章

  1. LEAP能源供应转换、能源需求及碳排放预测中的基础数据搜集及处理、能源平衡表核算、模型框架构建、模型操作、情景设计、结果分析、优化、预测结果不确定性分析
  2. 电机调速matlab仿真书,双闭环直流电机调速的matlab仿真.doc
  3. UltraEdit设置快捷键不成功(设置注释快捷键)
  4. 关于Android的Litepal数据库update更新数据的问题
  5. Tomcat长轮训原理解析
  6. 87.el-table翻页后保存前一页所选并再次返回前一页时把数据勾选上
  7. UML介绍(2)—— 用例图(use case diagram)
  8. Fvwm新手入门不完全手册(原创)
  9. powerpoint预览_如何禁用或删除PowerPoint动画
  10. 92年出生的大龄程序员