根据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 相关文章推荐
三种方式获取XMLHttpRequest对象
Apr 21 Javascript
javascript屏蔽右键代码
May 15 Javascript
JavaScript将Web页面内容导出到Word及Excel的方法
Feb 13 Javascript
谈谈javascript中使用连等赋值操作带来的问题
Nov 26 Javascript
jQuery+css实现的换页标签栏效果
Jan 27 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
Jul 27 Javascript
AngularJS 工作原理详解
Aug 18 Javascript
Bootstrap按钮组简单实现代码
Mar 06 Javascript
node和vue实现商城用户地址模块
Dec 05 Javascript
微信小程序在其他页面监听globalData中值的变化
Jul 15 Javascript
layui实现数据表格自定义数据项
Oct 26 Javascript
vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)
Jun 11 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中的Class的几点个人看法
2006/10/09 PHP
php通用防注入程序 推荐
2011/02/26 PHP
PHP类的静态(static)方法和静态(static)变量使用介绍
2012/02/19 PHP
在Ubuntu 14.04上部署 PHP 环境及 WordPress
2014/09/02 PHP
phpcms中的评论样式修改方法
2016/10/21 PHP
PHP的mysqli_select_db()函数讲解
2019/01/23 PHP
php新建文件的方法实例
2019/09/26 PHP
setAttribute 与 class冲突解决
2008/02/17 Javascript
jquery getScript动态加载JS方法改进详解
2012/11/15 Javascript
JS中类或对象的定义说明
2014/03/10 Javascript
jQuery实现伸展与合拢panel的方法
2015/04/30 Javascript
AngularJS基础学习笔记之指令
2015/05/10 Javascript
jQuery基于ajax实现星星评论代码
2015/08/07 Javascript
jQuery数据类型小结(14个)
2016/01/08 Javascript
JS+Canvas实现的俄罗斯方块游戏完整实例
2016/12/12 Javascript
JS实现PC手机端和嵌入式滑动拼图验证码三种效果
2017/02/15 Javascript
微信小程序 向左滑动删除功能的实现
2017/03/10 Javascript
利用webstrom调试Vue.js单页面程序的方法教程
2017/06/06 Javascript
seajs中最常用的7个功能、配置示例
2017/10/10 Javascript
使用pm2部署node生产环境的方法步骤
2019/03/09 Javascript
JS计算两个数组的交集、差集、并集、补集(多种实现方式)
2019/05/21 Javascript
Vue脚手架编写试卷页面功能
2020/03/17 Javascript
浅要分析Python程序与C程序的结合使用
2015/04/07 Python
win10系统中安装scrapy-1.1
2016/07/03 Python
使用keras2.0 将Merge层改为函数式
2020/05/23 Python
Python 爬虫性能相关总结
2020/08/03 Python
python3通过subprocess模块调用脚本并和脚本交互的操作
2020/12/05 Python
阿里健康官方海外旗舰店:阿里健康国际自营
2017/11/24 全球购物
墨尔本复古时尚品牌:Dangerfield
2018/12/12 全球购物
花店创业计划书范文
2014/02/07 职场文书
《跨越海峡的生命桥》教学反思
2014/02/24 职场文书
学校节能减排方案
2014/06/13 职场文书
查摆剖析材料范文
2014/09/30 职场文书
安全隐患整改报告
2014/11/06 职场文书
Redis RDB技术底层原理详解
2021/09/04 Redis
浅谈Vue的computed计算属性
2022/03/21 Vue.js