分页器的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 的含义

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中为空, 它也会返回 默认的样式, 把你前面的自定义样式 给 "覆盖"了, 从而使得自定义样式 不起作用, 所以 最好就是不写!!!