根据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 用6N±1法求素数 实例教程
Oct 20 Javascript
JavaScript Math.floor方法(对数值向下取整)
Jan 09 Javascript
JavaScript中property和attribute的区别详细介绍
Mar 03 Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
Dec 09 Javascript
基于JQuery打造无缝滚动新闻步骤详解
Mar 31 Javascript
jQuery获取元素父节点的方法
Jun 21 Javascript
javascript正则表达式中分组详解
Jul 17 Javascript
js表单登陆验证示例
Oct 19 Javascript
AngularJS表单提交实例详解
Feb 18 Javascript
AngularJS实现tab选项卡的方法详解
Jul 05 Javascript
JavaScript或jQuery 获取option value值方法解析
May 12 jQuery
深入分析jQuery.one() 函数
Jun 03 jQuery
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安全配置 如何配置使其更安全
2011/12/16 PHP
php获取域名的google收录示例
2014/03/24 PHP
关于PHP开发的9条建议
2015/07/27 PHP
php实现爬取和分析知乎用户数据
2016/01/26 PHP
FF火狐下获取一个元素同类型的相邻元素实现代码
2012/12/15 Javascript
js判断undefined变量类型使用typeof
2013/06/03 Javascript
判断ie的两种简单方法
2013/08/12 Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
2015/07/29 Javascript
jQuery实现进度条效果代码
2015/12/17 Javascript
JS实现重新加载当前页面
2016/11/29 Javascript
AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】
2017/01/19 Javascript
基于ES6作用域和解构赋值详解
2017/11/03 Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
2018/06/28 Javascript
jQuery的Ajax接收java返回数据方法
2018/08/11 jQuery
解决echarts的多个折现数据出现坐标和值对不上的问题
2018/12/28 Javascript
微信小程序日历/日期选择插件使用方法详解
2018/12/28 Javascript
jQuery实现表格的增、删、改操作示例
2019/01/27 jQuery
三步实现ionic3点击退出app程序
2019/09/17 Javascript
JavaScript数组排序小程序实现解析
2020/01/13 Javascript
Vue中nprogress页面加载进度条的方法实现
2020/11/13 Javascript
[00:14]护身甲盾
2019/03/06 DOTA
Python实现给qq邮箱发送邮件的方法
2015/05/28 Python
python数据清洗系列之字符串处理详解
2017/02/12 Python
使用python实现抓取腾讯视频所有电影的爬虫
2019/04/15 Python
Python3.5模块的定义、导入、优化操作图文详解
2019/04/27 Python
使用html2canvas将页面转成图并使用用canvas2image下载
2019/04/04 HTML / CSS
基于HTML5的齿轮动画特效
2016/02/29 HTML / CSS
Html5页面上如何禁止手机虚拟键盘弹出
2020/03/19 HTML / CSS
MCAKE蛋糕官方网站:一直都是巴黎的味道
2018/02/06 全球购物
Beach Bunny Swimwear官网:设计师泳装和性感比基尼
2019/03/13 全球购物
德国婴儿服装和婴儿用品购买网站:Baby Sweets
2019/12/08 全球购物
客服专员岗位职责范本
2013/11/29 职场文书
中介公司区域经理岗位职责范本
2014/03/02 职场文书
给公司的建议书范文
2014/05/13 职场文书
2014年幼儿园教学工作总结
2014/12/04 职场文书
后备干部推荐材料
2014/12/24 职场文书