根据Bootstrap Paginator改写的js分页插件


Posted in Javascript onDecember 25, 2016

刚刚出来实习,之前实习的公司有一个分页插件,和后端的数据字典约定好了的,基本上是看不到内部是怎么实现的,新公司是做WPF的,好像对于ASP.NET的东西不多,导师扔了一个小系统给我和另一个同事,指了两种框架的方案就让我们自己做了。。。

刚开始在网上找了一下,觉得bootstrap-paginator的api暴露出来,修改一下就可以做成之前实习公司的那种了,但是觉得没有跳转,很奇怪,想要一个,就动手在github上把源码拿下来了,不得不说,这代码写得真是比我这些实习码农好太多。(之前实习公司的组长临走之前给了我几个意见,其中就有让我多上全球最大的男性交友社区github多去看看  - - )这里给一下地址吧。bootstrap-paginator下载地址

看了一些网上对于bootstrap-paginator插件的使用教程,对于使用起来还是没太大问题的,自己在改代码的时候发现都不太全。

首先,插件有调节大小、调节浮动位置的功能,但是我用的是bootstrap3,在bootstrap3中这些特性都不支持。。

后来,我就找了一下别的样式(前端无能,十分佩服前端大牛,硬是能把页面组织起来),效果大概就是:

根据Bootstrap Paginator改写的js分页插件

给一下这个html代码吧。

<div id="pager" class="ui-paging-container">
 <ul>
 <li class="ui-pager ui-pager-disabled" data-original-title="" title="">
 <a><<</a>
 </li>
 <li class="ui-pager ui-pager-disabled" data-original-title="" title="">
 <a><</a>
 </li>
 <li class="ui-pager focus" data-original-title="" title="">
 <a>1</a>
 </li>
 <li class="ui-pager" data-original-title="" title="">
 <a>2</a>
 </li>
 <li class="ui-pager" data-original-title="" title="">
 <a>3</a>
 </li>
 <li class="ui-pager" data-original-title="" title="">
 <a>4</a>
 </li>
 <li class="ui-pager" data-original-title="" title="">
 <a>5</a>
 </li>
 <li class="ui-paging-ellipse" data-original-title="" title="">...</li>
 <li class="ui-pager" data-original-title="" title="">
 <a>10</a>
 </li>
 <li class="ui-pager" data-original-title="" title="">
 <a>></a>
 </li>
 <li class="ui-pager" data-original-title="" title="">
 <a>>></a>
 </li>
 <li class="ui-paging-toolbar" data-original-title="" title="">
 <input class="ui-paging-count" type="text" id="txt_turn">
 <a href="javascript:void(0)" id="btn_turn">跳转</a>
 </li>
 </ul>
</div>

样式代码很简单,如果有人想用的话,可以修改一下我的样式代码。。真的好像不怎么好看。

.ui-paging-container {color: #666; font-size: 15px;}
.ui-paging-container ul {overflow: hidden; text-align: center;}
.ui-paging-container ul, .ui-paging-container li {list-style: none;}
.ui-paging-container li {display: inline-block;padding: 3px 6px;margin-left: 5px;color: #666;}
.ui-paging-container li a {color: #666; text-decoration: none; }
.ui-paging-container li.ui-pager {cursor: pointer;border: 1px solid #ddd;border-radius: 2px;}
.ui-paging-container li.ui-pager:hover, .ui-paging-container li.focus { background-color: #288df0;color: #FFFFFF;}
.ui-paging-container li.ui-paging-ellipse {border: none;}
.ui-paging-container li.ui-paging-toolbar {padding: 0;}
.ui-paging-container li.ui-paging-toolbar select {height: 25px;border: 1px solid #ddd;color: #666;}
.ui-paging-container li.ui-paging-toolbar input {line-height: 20px;height: 23px;padding: 0;border: 1px solid #ddd;text-align: center;width: 33px;margin: 0 0 0 5px;vertical-align: middle;}
.ui-paging-container li.ui-paging-toolbar a {vertical-align: middle; text-decoration: none;display: inline-block;height: 23px;border: 1px solid #ddd;vertical-align: top;border-radius: 2px;line-height: 20px;padding: 0 3px;cursor: pointer;margin-left: 5px;color: #666;}
.ui-paging-container li.ui-pager-disabled, .ui-paging-container li.ui-pager-disabled:hover {background-color: #f6f6f6;cursor: not-allowed;border: none;color: #ddd;}
.ui-paging-container li.ui-pager-disabled a { color: #ddd;text-decoration: none;}

看了样式的人应该发现了吧,原本是有一个选择框的,被我删了,选择框是用来控制页面显示信息的条数,因为这个控制目前不需要前端有,所以我取消了。

好了,说说怎么调用吧。

属性 默认值 说明
containerClass string,默认值为:'' 为最外层div增加自定义样式
itemContainerClass string|function,默认值为:null 为li标签增加自定义样式
itemContentClass string|function,默认值为:null 为a标签添加自定义样式
currentPage Number,默认值为:1 定义插件初始化后显示的页
ShowPagesNum Number,默认值为:5 定义插件显示的按钮数量(不包括首页、末页、上一页、下一页等按钮)
totalPages Number,默认值为:1 定义插件总页数
pageUrl string|function,默认值为:null 为a标签加上href属性
onPageClicked string|function,默认值为:null 函数四个参数:even、originalEvent、type、 page,type的值为:first|prev|next|last| page|turn|ellipsis,page的值为单击按钮时跳转的页码,current是跳转前 的页码
onPageChanged string|function,默认值为:null 函数四个参数:even、originalEvent、type、 page,type的值为:first|prev|next|last| page|turn|ellipsis,page的值为单击按钮时跳转的页码,current是跳转前 的页码
useBootstrapTooltip boolean,默认值为:false 是否使用bootstrap的提示框插件
shouldShowPage function,默认值为:true 函数三个参数:type, page, current,type的值为:first|prev|next|last| page|turn|ellipsis,page的值为单击按钮时跳转的页码,current是跳转前 的页码
itemTexts function 可以修改页码的显示,如把type为first的文字改成'首页' 三个参数:type, page, current
tooltipTitles function 修改页码元素的title属性,默认有一个简单的实现, 三个参数:type, page, current
bootstrapTooltipOptions object 这个是把title注入到bootstrap的tooltip插件的模板

大部分都还是保持和bootstrap-paginator插件的属性。

下面怎么调用呢?给一个html的实例吧。

首先把定义的样式拿进来,就是上面那个,存一个文件,引入(也可以和你自己的css文件放在一起,可以减少http请求次数)。

<link href="~/Content/css/style.css" rel="stylesheet" />

这些都是基于jquery的插件,并且要1.8以上的版本。

<script src="~/Scripts/jquery-1.10.2.js"></script>

接下来就是引用我们最重要的js文件了。

<script src="~/Scripts/mypager.js"></script>

html中放一个div,这个div就是接下来要生成分页控件的父元素。记住一定是要div,bootstrap-paginator中bootstrap2是用div,bootstrap3是用ul。这里因为我们自己写的样式,就被我改成了必须是div。

<div id="pager"></div>

写一个简单的调用脚本。

var option = {
 currentPage: 1,
 totalPages: 10,
 ShowPagesNum: 5
 };
$('#pager').myPager(option);

HTML里的调用就到这里了。我用的是ASP.NET MVC,所以直接用Razor引擎把ViewData或者ViewBag的数据装载进js里就好了。当然,既然打算这样用了,最好在后端直接写一个类,我给个例子。

public class Pager
 {
 /// <summary>
 /// 当前页码
 /// </summary>
 public int PageIndex { get; set; }
 /// <summary>
 /// 总页数
 /// </summary>
 public int TotalPages { get; set; }
 /// <summary>
 /// 每页展示信息数
 /// </summary>
 public int PageSize { get; set; }
 /// <summary>
 /// 前端分页调用的js方法名
 /// </summary>
 public string PagerFun { get; set; }
 public Pager()
 {
 
 }
 public Pager(string pager)
 {
  PagerFun = pager;
 }
 }

前面几个属性都好理解,那个PagerFun是什么呢?在插件的属性中,有几个函数,比如:pageUrl、onPageClicked等,后端如果想在不同分页里调用不同分页按钮点击事件,只需要把对应的js函数名在Razor引擎中放进插件声明时的参数就好了。这里给个例子吧。

C# MVC控制器:

public ActionResult Index()
{
 Pager pager = new Pager("test");
 pager.PageIndex = 1;
 pager.PageSize = 10;
 pager.TotalPages = 10;
 return View(pager);
}

ps:这里使用了刚刚上面那个Pager类。

CSHTML:

@{
 Layout = null;
 var pager = Model as WebApplication4.Models.Pager;
}
<!DOCTYPE html>
<html>
<head>
 <meta name="viewport" content="width=device-width" />
 <link href="~/Content/css/style.css" rel="stylesheet" />
 <script src="~/Scripts/jquery-1.10.2.js"></script>
 <title>Index</title>
</head>
<body>
 <div id="pager">
 </div>
 <script src="~/Scripts/mypager.js"></script>
 <script>
 var test = function (even,originalEvent,type, page) {
  alert(page);
 };
 var option = {
  currentPage: @pager.PageIndex,
  totalPages: @pager.TotalPages,
  ShowPagesNum: 5,
  onPageClicked:@(pager.PagerFun)
  };
 $('#pager').myPager(option);
 </script>
</body>
</html>

主要是onPageClicked:@(pager.PagerFun)这一句,在Razor引擎顶部我们声明了pager变量,从控制器中传到视图层,强转之后把PagerFun变量赋给了插件的onPageClicked属性,插件内部识别它是一个函数就调用了,例子中PagerFun的值为"test",效果是单击哪个按钮就弹出按钮代表的页码。

根据Bootstrap Paginator改写的js分页插件

这只是其中一个函数,onPageChanged等都是可以的。第一次写,自己的js功底也并不是很深,借着bootstrap-paginator作者的源码学习了很多,代码也写得很优美!

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
js表数据排序 sort table data
Feb 18 Javascript
Jquery Select操作方法集合脚本之家特别版
May 17 Javascript
HTML长文本截取含有HTML代码同样适用的两种方法
Jul 31 Javascript
struts2+jquery组合验证注册用户是否存在
Apr 30 Javascript
jQuery中:focus选择器用法实例
Dec 30 Javascript
JQuery中使文本框获得焦点的方法实例分析
Feb 28 Javascript
Vue.js双向绑定实现原理详解
Dec 22 Javascript
微信小程序 Tab页切换更新数据
Jan 05 Javascript
实例讲解DataTables固定表格宽度(设置横向滚动条)
Jul 11 Javascript
jQuery each和js forEach用法比较
Feb 27 jQuery
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
Jun 05 Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
Jan 18 Javascript
jQuery基于xml格式数据实现模糊查询及分页功能的方法
Dec 25 #Javascript
jQuery实现圣诞节礼物传送(花式轮播)
Dec 25 #Javascript
js判断iframe中元素是否存在的实现代码
Dec 24 #Javascript
jQuery Validate验证表单时多个name相同的元素只验证第一个的解决方法
Dec 24 #Javascript
web 屏蔽BackSpace键实例代码
Dec 24 #Javascript
js实现的xml对象转json功能示例
Dec 24 #Javascript
jQuery实现的无缝广告图片左右滚动功能详解
Dec 24 #Javascript
You might like
解析php扩展php_curl.dll不加载的解决方法
2013/06/26 PHP
PHP配置把错误日志以邮件方式发送方法(Windows系统)
2015/06/23 PHP
php实现水印文字和缩略图的方法示例
2016/12/29 PHP
PHP JWT初识及其简单示例
2018/10/10 PHP
PHP dirname简单使用代码实例
2020/11/13 PHP
Prototype使用指南之enumerable.js
2007/01/10 Javascript
javascript编程起步(第五课)
2007/01/10 Javascript
JavaScript 使用技巧精萃(.net html
2009/04/25 Javascript
Extjs EditorGridPanel中ComboBox列的显示问题
2011/07/04 Javascript
jQuery ui插件的使用方法代码实例
2013/05/08 Javascript
node.js实现BigPipe详解
2014/12/05 Javascript
浅谈javascript回调函数
2014/12/07 Javascript
全面解析Bootstrap表单使用方法(表单样式)
2015/11/24 Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
2016/10/03 Javascript
BootStrapTable 单选及取值的实现方法
2017/01/10 Javascript
js使用文件流下载csv文件的实现方法
2019/07/15 Javascript
React学习之JSX与react事件实例分析
2020/01/06 Javascript
element中table高度自适应的实现
2020/10/21 Javascript
Python 字典与字符串的互转实例
2017/01/13 Python
matplotlib作图添加表格实例代码
2018/01/23 Python
对python插入数据库和生成插入sql的示例讲解
2018/11/14 Python
Python实现语音识别和语音合成功能
2019/09/20 Python
在Django中实现添加user到group并查看
2019/11/18 Python
Keras使用ImageNet上预训练的模型方式
2020/05/23 Python
Lime Crime官网:美国一家主打梦幻精灵系的彩妆品牌
2019/03/22 全球购物
加拿大拼图大师:Puzzle Master
2020/12/28 全球购物
会计专业导师推荐信
2014/03/08 职场文书
停车位租赁协议书
2014/09/24 职场文书
高中生毕业评语
2014/12/30 职场文书
2015年庆祝国庆节66周年演讲稿
2015/07/30 职场文书
2015年公司中秋节致辞
2015/07/31 职场文书
导游词幽默开场白
2019/06/26 职场文书
python实现监听键盘
2021/04/26 Python
Pycharm连接远程服务器并远程调试的全过程
2021/06/24 Python
基于Python实现将列表数据生成折线图
2022/03/23 Python
CentOS7和8下安装Maven3.8.4
2022/04/07 Servers