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

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

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

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

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

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

给一下这个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;}

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

  好了,说说怎么调用吧。

属性默认值说明
containerClassstring,默认值为:''为最外层div增加自定义样式
itemContainerClassstring|function,默认值为:null为li标签增加自定义样式
itemContentClassstring|function,默认值为:null为a标签添加自定义样式
currentPageNumber,默认值为:1定义插件初始化后显示的页
ShowPagesNumNumber,默认值为:5定义插件显示的按钮数量(不包括首页、末页、上一页、下一页等按钮)
totalPagesNumber,默认值为:1定义插件总页数
pageUrlstring|function,默认值为:null为a标签加上href属性
onPageClickedstring|function,默认值为:null

函数四个参数:even、originalEvent、type、 page,type的值为:first|prev|next|last|

page|turn|ellipsis,page的值为单击按钮时跳转的页码,current是跳转前

的页码

onPageChangedstring|function,默认值为:null

函数四个参数:even、originalEvent、type、 page,type的值为:first|prev|next|last|

page|turn|ellipsis,page的值为单击按钮时跳转的页码,current是跳转前

的页码

useBootstrapTooltipboolean,默认值为:false是否使用bootstrap的提示框插件
shouldShowPagefunction,默认值为:true

函数三个参数:type, page, current,type的值为:first|prev|next|last|

page|turn|ellipsis,page的值为单击按钮时跳转的页码,current是跳转前

的页码

itemTextsfunction

可以修改页码的显示,如把type为first的文字改成'首页'

三个参数:type, page, current

tooltipTitlesfunction

修改页码元素的title属性,默认有一个简单的实现,

三个参数:type, page, current

bootstrapTooltipOptionsobject

这个是把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",效果是单击哪个按钮就弹出按钮代表的页码。

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

点击此处下载js文件。

2016-12-19  13:54:57

转载于:https://www.cnblogs.com/TIEDPAG/p/6197227.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/402413.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

sprintboot 配置文件上传大小(默认是1MB)

application.yaml: spring:profiles:active: activatedjackson:date-format: yyyy/MM/dd HH:mm:sstime-zone: GMT8servlet:multipart:max-file-size: 6MBmax-request-size: 6MB

Android ANR

ANRs (“Application Not Responding”)&#xff0c;意思是”应用没有响应“。 1&#xff09;什么引发了ANR&#xff1f;在Android里&#xff0c;应用程序的响应性是由Activity Manager和WindowManager系统服务监视的。当它监测到以下情况中的一个时&#xff0c;Android就会针对…

Linux C 算法分析初步

提到算法&#xff0c;必须提到数据结构&#xff0c;我们要知道一个著名公式&#xff1a; 数据结构 算法 程序 我们先看看下面这张图&#xff1a; 算法是什么&#xff1f;算法是一个有穷规则&#xff08;或语句、指令&#xff09;的有续集和。他确定了解决某一问题的一个运算序…

hive实例,GPRS流量统计

2019独角兽企业重金招聘Python工程师标准>>> 最近面试&#xff0c;发现很多公司在使用hive对数据进行处理。 hive是hadoop家族成员&#xff0c;是一种解析like sql语句的框架。它封装了常用MapReduce任务&#xff0c;让你像执行sql一样操作存储在HDFS的表。 hive的表…

90.不用其它变量进行变量互换

package com.chongrui.test;//不用其它变量进行变量互换import java.util.Scanner; //导入扫描器public class test { public static void main(String[] args){ Scanner scan new Scanner(System.in);//创建扫描器 System.out.println("请输入变量A的值");//输入变…

android中 MediaStore提取缩略图和原始图像

android中 MediaStore提取缩略图和原始图像 . 欢迎转载&#xff1a;http://blog.csdn.net/djy1992/article/details/10005767提取图像的Thumbnail 1) 启动Intent Intent intent new Intent(Intent.ACTION_GET_CONTENT, null); intent.setType("image/*"); intent.pu…

Linux C 数据结构—-循环链表

前面我们学习了单向链表&#xff0c;现在介绍单向循环链表&#xff0c;单向循环链表是单链表的一种改进&#xff0c;若将单链表的首尾节点相连&#xff0c;便构成单向循环链表结构&#xff0c;如下图&#xff1a; 对于一个循环链表来说,其首节点和末节点被连接在一起。这种方式…

预备作业03 20162320刘先润

第一次编代码 这几周自学了Linux基础入门&#xff0c;有好多想吐槽的地方&#xff0c;所以这篇随笔是带有半吐槽性质的&#xff0c;这是我学完后最真实的感受 我在电脑上按照教程安装了虚拟机&#xff0c;对于Linux这个完全陌生的概念也稍微算是有些理解&#xff0c;但是还有很…

JTable 失去焦点时取消编辑状态

为什么80%的码农都做不了架构师&#xff1f;>>> reference&#xff1a; http://tips4java.wordpress.com/2008/12/12/table-stop-editing/ 当JTable的单元格处于编辑状态时&#xff0c;如果用户触发以下事件&#xff0c;表格就会退出编辑状态&#xff0c;进而调用T…

JS中的array和Object的区别

区别&#xff1a; 数组表示有序数据的集合&#xff0c;对象表示无需数据的集合。如果数据顺序很重要的话&#xff0c;就用数组&#xff0c;否则就用对象的好。 数组的数据没有名称name 对象的数据有名称 name 但是在很多编程语言中有个叫关联数组的&#xff0c;这种数组中的…

Linux C 数据结构——栈

还是先把这张图贴出来&#xff0c;以便对比和理解 栈是限制在一段进行插入操作和删除操作的线性表&#xff08;俗称堆栈&#xff09;&#xff0c;允许进行操作的一端称为“栈顶”&#xff0c;另一固定端称为“栈底”&#xff0c;当栈中没有元素称为“空栈”。特点&#xff1a;先…

常用的HTTP状态码

2019独角兽企业重金招聘Python工程师标准>>> 第一、成功的状态码&#xff1a; 1&#xff09;200 OK – 服务器成功返回网页 2&#xff09;304 Not Modified – 未修改 第二、失败的状态码&#xff1a; 3&#xff09;404 Not F…

Linux C 数据结构——队列

还是先放这张图&#xff0c;以便对比和理解&#xff1a; 队列是限制在两端进行插入操作和删除操作的线性表&#xff0c;允许进行存入操作的一端称为“队尾”&#xff0c;允许进行删除操作的一端称为“队头”。当线性表中没有元素时&#xff0c;称为“空队”。特点&#xff1a;先…

MySQL视图查询报错:Prepared statement needs to be re-prepared

From: https://www.ywnds.com/?p12609 今天公司的项目视图查询报错&#xff0c;报错如&#xff1a;ERROR 1615 (HY000): Prepared statement needs to be re-prepared 网上找了一圈&#xff0c;都说调整以下值就好了&#xff1a; mysql> set global table_open_cache163…

如何使用FF的Firebug组件中的net工具查看页面元素加载消耗时间

1.安装FF的Firebug组件&#xff1a;点击FF的Tools的Add-ons菜单&#xff0c;输入Firebug关键字&#xff0c;并选择合适的版本Install。 2.安装完毕后地址栏右边会出现一个小虫图标&#xff0c;右边还有一个下拉箭头。如下图&#xff1a; 3.点击下拉箭头&#xff0c;选择“on fo…

Linux C 数据结构——二叉树

先放这张图&#xff1a; 可以看出&#xff0c;树是非线性结构&#xff1b; 一、树的概念 树&#xff08;tree&#xff09;是n(n>0)个节点的有限集合T&#xff0c;它满足两个条件&#xff1a; 1&#xff09;有且仅有一个特定的称为根&#xff08;root&#xff09;的节点&…

antd 表单域验证规则 - 只能输入数字字符,去除前导0

<Form {...formItemLayout}><Form.Item label用户Id>{getFieldDecorator(uid, {initialValue: undefined,rules: [{ required: true, message: 请输入用户id, pattern: new RegExp(/^[1-9]\d*$/, g) }],getValueFromEvent: e > e.target.value.replace(/\D/g, )…

2013 822 划分子网

子网的划分是为了节省我们的网络的ip地址的分配,如我们有200台电脑需要一个子网段,我在这个192.168.0.1网段我们有254个地址,我们可以将我们的计算机划分成不同的子网,来进行使用,这样的话就是节省了大量的IP地址.补充下上次忘记总结的东西,就是如192.168.10.101/24 24表示我们…

BZOJ 3224: Tyvj 1728 普通平衡树

3224: Tyvj 1728 普通平衡树 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 9629 Solved: 4091[Submit][Status][Discuss]Description 您需要写一种数据结构&#xff08;可参考题目标题&#xff09;&#xff0c;来维护一些数&#xff0c;其中需要提供以下操作&#xff1a;…

springboot中配置mybatis数据源,使用阿里的 Druid 数据库连接池

参考了很多文章&#xff0c;记录下自己的学习过程&#xff01; 参考&#xff1a;https://blog.csdn.net/weixin_40776321/article/details/99633110 1. 在pom.xml中添加依赖&#xff1a; <dependency><groupId>com.alibaba</groupId><artifactId>dr…