分页器的js实现代码bootstrapPaginator.js 参考:
如前所述, 不要什么都想到 jquery的脚本js, 应该⾸先推荐的是 css 和元素本⾝的事件函数如:　onclick, select选择框的onchange="search()" 函数⽅法.
Aria: a:ri2, 咏叹调, aria-label通常是放在bootstrap的标签中, ⽤来做为描述信息的
⽐较成熟的js 分页器控件: (⾃带js代码的操作: 是基于bootstrap的 bootsrtapPaginator)
参考:
各个参数的含义:
有5种组件结构, 即整个控件上的操作按钮的类型: type，为：'first', prev, page, next, 'last'.
**如果要为⼀个元素添加多个类, 则使⽤addClass('cls1 cls2') 多个类之间⽤ "空格" ⽽不是⽤ "逗号"隔开, 否则会把逗号看作是⼀类的⼀部分, ⽽实际上就没有包含逗号的类 **
$("p").addClass("selected");
$("p").addClass("selected1 selected2");
不管是你原来就写的静态的html代码中的元素, 还是由 js插件在解析后⽣成的 "动态代码""实时代码", 只要在 firefox中, 查看得到的元素标签, 都可以通过在style中写css样式, 改变默认的显⽰⽅式!! ⽐如修改bootstrap-paginator的分页器的外观...
js 二维数组可以在链接标签a 中放任何标签, 包括 div, p等. ⽽且可以在 h1, h2, hx之类的标签中, 放链接a标签, 如循环输出列表标签时... 就是这样实现的
特别注意的是, bootstrap paginator的外观显⽰的只是在 #example的div内, 增加的⼀个 ul列表>li*数字的列表, 当前被选中的li只是增加了⼀个 .active的类. 所以默认的分页器，就是 list列表的默认样式, 前⾯有⿊⾊⼩圆点的. 你完全可以根据⾃⼰的需要, 通过书写css 重载分页器的样式! 如修改分页器按钮的颜⾊, ⼤⼩，边框等. 并且可以修改分页器的⽂字内容等...
实际上, 分页器中的按钮, 就是 li中的链接a 标签!!
最终, 单击分页器上的按钮的时候, 实际上, 就是增加了 "ul>li>a链接的" [ href ] 链接地址, 这个链接地址就是将要跳转/更新的页⾯地址. 实际上在跳转链接页⾯的时候, 默认的是重新请求整个页⾯, 是在页⾯上加上 get 传参如: showMessage.html?page=6是在整个页⾯获取到数据⼆维数组后, 通过页数对输出结果进⾏ "过滤""筛选" ⽽已!!
要对 ul > li > a 的css 标签严格区分, ⽐如如果将颜⾊的css属性, 写在 li上, 并不会对 a 链接起作⽤..., 所以⼀定要写在 a上⾯才会⽣效!
　虽然可以对分页器的ul 使⽤ addCss('btn-group'), 对li 使⽤ addCss('btn btn-primary') 等样式, 但是这种样式只是在页⾯初始化的时候，有效, 但是⼀旦点击后, 这种class样式就没有了, 所以要想让 "分页器获得永久的样式外观" , 还得要在style中书写, 不能⽤js 来写!
但是后来发现 , 使⽤分页器中的选项: itemContainerClass: function(type, page, current){ ...return 'btn btn-success'}, ⽅法, 也可以永久地为分页器按钮添加类. 这种⽅法也是可选的, 前⾯那种⾃⼰写css 样式也是可以的! ⽽且, ⾃定义的样式更灵活!!
** 如何修改hr⽔平线的颜⾊和粗细**
通常我们想到设置颜⾊是⽤ color, 实际上他是没有效果的! 因为color 是针对元素中的⽂字的颜⾊⽽⾔的! ⽽hr是⽔平线不是⽂字, 所以color
⽆效 , 应该把hr看作是同段落p div等类似的元素. 所以, 设置hr的颜⾊, 是设置: backgorund-color, ⽽且要设置⼀个 1px+ 的⾼度, border可以设置为none;
hr 就好了!
要弄清楚paginator中的参数type , page, current 的含义
1. page：是指当前　这个按钮　属于　第⼏页；　返回的类字符串只对　该链接按钮有效　if (page == 5)　return 'btn btn-default'；则只有第
page 5 页这⼀个按钮会显⽰为btn
2. current: 是指当前分页器处在第⼏页; 返回的字符串将对整个/ 所有的链接按钮都有效... if (current=7) return 'btn btn-primary , 则当来到/点击
第7 页的时候, 将会使所有的链接都显⽰为 btn.
要注意paginator 的options 中, 如果是⾃定义样式, 最好不要写 itemContainerClass, 因为这个选项, 即使你function中为空, 它也会返回默认的样式, 把你前⾯的⾃定义样式给 "覆盖"了, 从⽽使得⾃定义样式不起作⽤, 所以最好就是不写

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。