分页器的js实现代码 bootstrap Paginator.js

参考: http://www.jb51.net/article/76093.htm

如前所述, 不要什么都想到 jquery的脚本js, 应该首先推荐的是 css 和元素本身的事件函数如:　onclick, select选择框的 onchange="search()" 函数方法.

Aria: a:ri2, 咏叹调, aria-label通常是放在bootstrap的标签中, 用来做为描述信息的

比较成熟的js 分页器控件: (自带js代码的操作: 是基于bootstrap的 bootsrtapPaginator)

参考: http://blog.csdn.net/guying4875/article/details/50685860

各个参数的含义:

有5种组件结构, 即整个控件上的操作按钮的类型: type,为：'first', prev, page, next, 'last'.

**如果要为一个元素添加多个类, 则使用addClass('cls1 cls2') 多个类之间用 "空格" 而不是用 "逗号"隔开, 否则会把逗号看作是一类的一部分, 而实际上就没有包含逗号的类 **

$("p").addClass("selected");

$("p").addClass("selected1 selected2");

不管是你原来就写的静态的html代码中的元素, 还是由 js插件在解析后生成的 "动态代码""实时代码", 只要在 firefox中, 查看得到的元素标签, 都可以通过在style中写css样式, 改变默认的显示方式!! 比如修改bootstrap-paginator的分页器的外观...

可以在链接标签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 style="background-color: #abc; height: 2px; border: none;" 就好了!

要弄清楚paginator中的参数type , page, current 的含义

page:是指当前　这个按钮　属于　第几页；　返回的类字符串只对　该链接按钮有效　if (page == 5)　return 'btn btn-default'; 则只有第 page 5 页这一个按钮会显示为btn
current: 是指当前分页器处在第几页; 返回的字符串将对整个/ 所有的链接按钮都有效... if (current=7) return 'btn btn-primary , 则当来到/点击第7 页的时候, 将会使所有的链接都显示为 btn.

要注意paginator 的options 中, 如果是自定义样式, 最好不要写 itemContainerClass, 因为这个选项, 即使你function中为空, 它也会返回默认的样式, 把你前面的自定义样式给 "覆盖"了, 从而使得自定义样式不起作用, 所以最好就是不写!!!