根据引导分页器重写的js分页插件

我刚出来实习。前实习公司有一个分页插件，和后端数据字典是一致的。基本上看不出内部是怎么实现的。新公司正在做WPF。看来ASP.NET的东西不多。导师扔给我和另一个同事一个小系统，指出了两个框架，让我们自己做。

一开始在网上搜索，感觉bootstrap-paginator api暴露了，修改后可以做成同类实习公司。然而，我觉得没有跳跃，这很奇怪。如果我想要一个，我会在github上下载源代码。不得不说，这个代码真的比我实习的代码农民好很多。(离职前实习公司负责人给了我几条建议，其中要求我去访问全球最大的男性交友社区github)——把这里的地址给我。引导-分页器下载地址

看了一些关于bootstrap-paginator插件使用的在线教程，使用起来还是没什么大问题，换代码的时候发现并不完整。

首先插件有调整大小和浮动位置的功能，但是我用的是bootstrap3，不支持这些功能。

后来又找了其他风格(前端不称职，很佩服前端，但是可以整理页面)，效果大概是：

给我这个html代码。

div id=' pager ' class=' ui-paging-container ' ul Li class=' ui-paging ui-paging-disabled ' data-original-title=' a/a/Li class=' ui-paging ui-paging-paging-disabled ' data-original-title=' title=' ui-paging ' data-original-title=' title=' a2/a/Li class=' ui-paging './Li Li class=' ui-pager ' data-original-title=' title=' a10/a/Li Li class=' ui-pager ' data-original-title=' title=' a/a/Li Li class=' ui-pager ' data-original-title=' title=' ui-paging-toolbar ' data-original-title=' title=' input class=' ui-paging-count ' type=' text ' Id=' txt _ turn ' a href=' JavaScript 33333如果有人想用，可以修改我的风格代码。真的不好看。用户界面分页-容器{ color : # 666 font-size : 15px；}.ui-分页-容器ul {溢出：隐藏；文本对齐：中心；}.用户界面分页-容器ul ,ui-paging-container Li {列表样式：无；}.ui-paging-container Li { display : inline-block；padding: 3px 6px左边距left: 5pxcolor: # 666}。ui-分页-容器阿利{ color: # 666文本装饰：无；}.ui-分页-容器李。ui-分页{光标：指针；border: 1px固体# dddb order-radius : 2px；}.ui-分页-容器李。用户界面-第：页悬停.ui-分页-容器李。焦点{底色： # 288 df 0；color: # FFFFFF}。用户界面分页-容器李。用户界面分页-椭圆{ border:无}。用户界面分页-容器李。用户界面分页-工具栏{ padd : 0；}.用户界面分页-容器李。用户界面分页-工具栏选择{ height: 25pxborder: 1px固体# dddcolor: # 666}。用户界面分页-容器李。用户界面分页-工具栏输入{行高： 20pxheight : 23 xpadd : 0；border: 1px固体# ddd文本对齐：中心；宽度： 33px余量0 0 0 5px垂直对齐： 中间；}.用户界面分页-容器李。用户界面分页-工具栏a {竖排-对齐：中间；文本装饰：无；显示器：内联块；高： 23像素： 1像素固体# ddd垂直对齐： 顶部；边界半径： 2px线高： 20pxpadding: 0 3pxcursor:指针；左边距left: 5pxcolor: # 666}。用户界面寻呼-容器李。用户界面寻呼机-禁用ui-分页-容器李。ui-pager-禁用：悬停{背景色： # f6f 6；不允许光标：边框：无；color: # ddd}。ui-分页-容器李。ui-分页-禁用了一个{ color: # ddd文本装饰：无；}看了样式的人应该发现了吧，原本是有一个选择框的，被我删了，选择框是用来控制页面显示信息的条数，因为这个控制目前不需要前端有，所以我取消了。

好了，说说怎么调用吧。

属性默认值说明包含类字符串，默认值为：'' 为最外层差异增加自定义样式itemContainerClass字符串|函数，默认值为：完整为里标签增加自定义样式itemContentClass字符串|函数，默认值为：完整为a标签添加自定义样式当前页码，默认值为：1 定义插件初始化后显示的页显示页面序列号，默认值为：5 定义插件显示的按钮数量（不包括首页、末页、上一页、下一页等按钮)总页数，默认值为：1 定义插件总页数页面Url字符串|函数，默认值为：完整为a标签加上href属性onPageClicked字符串|函数，默认值为：完整函数四个参数：偶数、原始、类型、页面、类型的值为：first|prev|next|last|

页面|翻转|省略号，页面的值为单击按钮时跳转的页码当前是跳转前

的页码

onPageChanged字符串|函数，默认值为：完整函数四个参数：偶数、原始、类型、页面、类型的值为：first|prev|next|last|

页面|翻转|省略号，页面的值为单击按钮时跳转的页码当前是跳转前

的页码

useBootstrapTooltip布尔值，默认值为：false是否使用引导程序的提示框插件应该显示页面功能，默认值为：街函数三个参数：类型，页面，当前，类型的值为：first|prev|next|last|

页面|翻转|省略号，页面的值为单击按钮时跳转的页码当前是跳转前

的页码

项目文本函数可以修改页码的显示，如把类型为第一的文字改成'首页'

三个参数：类型，页面，当前

工具提示标题功能修改页码元素的标题属性，默认有一个简单的实现，

三个参数：类型，页面，当前

BootstrapTooltipOptions对象这是工具提示插件的模板，将标题注入到bootstrap中

大部分仍然保持了bootstrap-paginator插件的属性。

下面怎么叫？举一个html的例子。

首先，引入已定义的样式，即上面的样式，保存一个文件并导入(也可以与自己的css文件放在一起，以减少http请求的数量)。

link href=' ~/Content/CSS/style . CSS ' rel='样式表'/

这些是基于jquery的插件，需要在1.8版以上。

script src=' http : ~/Scripts/jquery-1 . 10 . 2 . js '/script

下一步是引用我们最重要的js文件。

script src=' http : ~/Scripts/my pager . js '/script

在html中放一个div，它是下一个要生成的分页控件的父元素。记得用div。bootstrap2使用div，bootstrap3在bootstrap-paginator中使用ul。在这里，因为我们自己的写作风格，我把它改成了div。

div id='寻呼机'/div

写一个简单的调用脚本。

var选项={ currentPage: 1，totalPages: 10，showPage snum : 5 }；$(' #寻呼机')。我的寻呼机(选项)；这就是HTML中的调用。我用的是ASP.NET MVC，所以用Razor引擎直接把ViewData或者ViewBag数据加载到js中是不错的。当然，既然打算以这种方式使用，最好直接在后端编写一个类。我举个例子。

Public class Pager {///summary ///当前页码////summary public int page index { get；设置；}///summary///total pages////summary public int total pages { get；设置；}///summary////每页显示的信息数////summary public int page size { get；设置；} ///summary ///js方法名被前端分页////summary公共字符串pagerfun调用{ get设置；} public Pager() { } public Pager(字符串寻呼机){ PagerFun=pager}}前几个属性很容易理解。那是什么？在插件的属性中，有几个函数，比如pageUrl、onPageClicked等。如果后端想在不同的分页页面中调用不同的分页按钮点击事件，只需要将对应的js函数名放入Razor引擎中插件声明的参数中即可。这里有一个例子。

C# MVC控制器：

公共操作结果索引(){寻呼机寻呼机=新寻呼机('测试')；寻呼机。page index=1；寻呼机。PageSize=10寻呼机。TotalPages=10返回视图(寻呼机)；}ps:这里使用了上面的Pager类。

CSHTML:

@ { Layout=null变量分页=建模为网络应用程序4。型号。传呼机；}!DOCTYPE htmlhtmlhead元名称=' viewport ' Content=' width=device-width '/link href=' ~/Content/CSS/style . CSS ' rel='样式表'/script src=' http : ~/Scripts/jquery-1 . 10 . 2 . js '/script title index/title/head body div id=' pager '/div script src=' http 3360 ~/Scripts/my pager . js '/script var test=function(even，originalEvent，};var选项={ currentPage: @pager。PageIndex，totalPages: @寻呼机。TotalPages，ShowPagesNum: 5，onPageClicked:@(寻呼机。PagerFun)}；$(' #寻呼机')。我的寻呼机(选项)；/script/body/html主要是onPageClicked : @(寻呼机。寻呼机)。在Razor引擎的顶部，我们声明了pager变量，该变量从控制器转移到视图层。经过强转换后，将PagerFun变量赋给插件的on page clicked属性，在插件识别出它是一个函数后调用。在这个例子中，pagerfun的值是“test”。效果如下：

这只是其中一个功能，比如onPageChanged。第一次对js没有很深的了解。我从bootstrap-paginator的作者源代码中学到了很多，代码写得很漂亮！

以上就是本文的全部内容。希望本文的内容能给大家的学习或工作带来一些帮助，也希望多多支持我们！