Bootstrap分页插件--Bootstrap Paginator

向右看齐 2022-08-13 11:57 341阅读 0赞

**1.在视图上引入bootstrap.css、bootstrap\-pageinator.js、jquery.min.js**

`<``link` `href``=``"css/bootstrap.css"` `rel``=``"stylesheet"``>`

`2.` `<``script` `type``=``"text/javascript"` `src``=``"js/jquery-1.8.1.js"``></``script``>`

`3.` `<``script` `type``=``"text/javascript"` `src``=``"js/bootstrap-paginator.js"``></``script``>`

**2.在视图的主体部分放两个div，一个用来呈现数据列表，一个用来放置选择页面的导航。**

**3.分页js的编写**

4. **后台处理请求的方法**

public String GetDate(int id, int page)
            {
                int pageIndex = page ;//当前页
                const int pageSize = 2;//这里用来设置每页要展示的数据数量，建议把这个写到web.config中来全局控制
                //获取需要展示的数据
                List<MODEL.qgoa_department> list = OperateContext.Current.BLLSession.Iqgoa_departmentBLL.GetPagedList(pageIndex, pageSize, Id);
                //得到数据的条数
                int rowCount = list.Count();
                //通过计算，得到分页应该需要分几页，其中不满一页的数据按一页计算
                if(rowCount%pageSize!=0)
                {
                    rowCount = rowCount / pageSize + 1;
                }
                else
                {
                    rowCount = rowCount / pageSize;
                }
    
    
                //转成Json格式
                var strResult = "{\"pageCount\":"+rowCount+",\"CurrentPage\":"+pageIndex+",\"list\":" +                                JsonConvert.SerializeObject(list) + "}";
                return Json(strResult, JsonRequestBehavior.AllowGet);
            }

**5.Paginator组件参数**

<table style="margin:0px 0px 20px; padding:0px; font-family:微软雅黑,Verdana,sans-serif,宋体; max-width:100%; background-color:transparent; border-spacing:0px; width:940px"> 
 <thead style="margin:0px; padding:0px; font-weight:bold"> 
  <tr style="margin:0px; padding:0px"> 
   <th style="margin:0px; padding:8px; line-height:20px; vertical-align:bottom; border-top-width:0px"> 参数名</th> 
   <th style="margin:0px; padding:8px; line-height:20px; vertical-align:bottom; border-top-width:0px"> 数据类型</th> 
   <th style="margin:0px; padding:8px; line-height:20px; vertical-align:bottom; border-top-width:0px"> 默认值</th> 
   <th style="margin:0px; padding:8px; line-height:20px; vertical-align:bottom; border-top-width:0px"> 描述</th> 
  </tr> 
 </thead> 
 <tbody style="margin:0px; padding:0px"> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; color:rgb(226,128,59); line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); background-color:rgb(249,249,249)"> size</td> 
   <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); background-color:rgb(249,249,249)"> string</td> 
   <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); background-color:rgb(249,249,249)"> "normal"</td> 
   <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); background-color:rgb(249,249,249)"> 设置控件的显示大小，是个字符串. 允许的值:&nbsp;<span style="margin:0px; padding:0px; color:rgb(51,135,191)">mini</span>,&nbsp;<span style="margin:0px; padding:0px; color:rgb(51,135,191)">small</span>,&nbsp;<span style="margin:0px; padding:0px; color:rgb(51,135,191)">normal</span>,<span style="margin:0px; padding:0px; color:rgb(51,135,191)">large。</span>值：mini版的、小号的、正常的、大号的。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; color:rgb(226,128,59); line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221)"> alignment</td> 
   <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221)"> string</td> 
   <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221)"> "left"</td> 
   <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221)"> 设置控件的对齐方式，是个字符串，&nbsp;允许的值用：&nbsp;<span style="margin:0px; padding:0px; color:rgb(51,135,191)">left</span>,&nbsp;<span style="margin:0px; padding:0px; color:rgb(51,135,191)">center</span>&nbsp;and<span style="margin:0px; padding:0px; color:rgb(51,135,191)">right</span>. 即：左对齐、居中对齐、右对齐。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; color:rgb(226,128,59); line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); background-color:rgb(249,249,249)"> itemContainerClass</td> 
   <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); background-color:rgb(249,249,249)"> function</td> 
   <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); background-color:rgb(249,249,249)"> &nbsp;</td> 
   <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); background-color:rgb(249,249,249)"> 该参数接收一个函数，返回一个字符串，该字符串是一个我们自定义的class类样式。当控件内的每个操纵按钮被渲染(render)时，都会调用该函数，同时把有关该按钮的信息作为参数传入。参数：<span style="margin:0px; padding:0px"><span style="margin:0px; padding:0px; color:rgb(51,135,191)">type</span></span>,<span style="margin:0px; padding:0px"><span style="margin:0px; padding:0px; color:rgb(51,135,191)">page</span></span>,&nbsp;<span style="margin:0px; padding:0px"><span style="margin:0px; padding:0px; color:rgb(51,135,191)">current</span></span>&nbsp;。<span style="margin:0px; padding:0px"><span style="margin:0px; padding:0px; color:rgb(51,135,191)">type</span></span>为该控件的操作按钮的类型，如上图所示的五种类型：first、prev、page、next、last。<span style="margin:0px; padding:0px"><span style="margin:0px; padding:0px; color:rgb(51,135,191)">page</span></span>为该按钮所属第几页。<span style="margin:0px; padding:0px"><span style="margin:0px; padding:0px; color:rgb(51,135,191)">current</span></span>&nbsp;指示整个控件的当前页是第几页。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; color:rgb(226,128,59); line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221)"> currentPage</td> 
   <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221)"> number</td> 
   <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221)"> 1</td> 
   <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221)"> 设置当前页.</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; color:rgb(226,128,59); line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); background-color:rgb(249,249,249)"> numberOfPages</td> 
   <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); background-color:rgb(249,249,249)"> number</td> 
   <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); background-color:rgb(249,249,249)"> 5</td> 
   <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); background-color:rgb(249,249,249)"> 设置控件显示的页码数.即：类型为"page"的操作按钮的数量。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; color:rgb(226,128,59); line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221)"> totalPages</td> 
   <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221)"> number</td> 
   <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221)"> 1</td> 
   <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221)"> 设置总页数.</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; color:rgb(226,128,59); line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); background-color:rgb(249,249,249)"> pageUrl</td> 
   <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); background-color:rgb(249,249,249)"> function</td> 
   <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); background-color:rgb(249,249,249)"> &nbsp;</td> 
   <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); background-color:rgb(249,249,249)"> 实际上，控件内的每个操作按钮最终会被渲染成超链接，该参数的作用就是设置超链接的链接地址。该参数是个函数，参数为：<span style="margin:0px; padding:0px"><span style="margin:0px; padding:0px; color:rgb(51,135,191)">type</span></span>,<span style="margin:0px; padding:0px"><span style="margin:0px; padding:0px; color:rgb(51,135,191)">page</span></span>,&nbsp;<span style="margin:0px; padding:0px"><span style="margin:0px; padding:0px; color:rgb(51,135,191)">current。</span></span>这样我们就可以通过这个函数为每个操作按钮动态设置链接地址。如："http://example.com/list/page/"+page</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; color:rgb(226,128,59); line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221)"> shouldShowPage</td> 
   <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221)"> boolean/function</td> 
   <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221)"> true</td> 
   <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221)"> 该参数用于设置某个操作按钮是否显示，可是个布尔值也可是个函数。当为true时，显示。当为false时，不显示。如果该参数是个函数，需要返回个布尔值，通过这个返回值判断是否显示。函数有3个参数:&nbsp;<span style="margin:0px; padding:0px"><span style="margin:0px; padding:0px; color:rgb(51,135,191)">type</span></span>,&nbsp;<span style="margin:0px; padding:0px"><span style="margin:0px; padding:0px; color:rgb(51,135,191)">page</span></span>,&nbsp;<span style="margin:0px; padding:0px"><span style="margin:0px; padding:0px; color:rgb(51,135,191)">current。</span></span>使用函数的好处是，可以对每个操作按钮进行显示控制。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; color:rgb(226,128,59); line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); background-color:rgb(249,249,249)"> itemTexts</td> 
   <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); background-color:rgb(249,249,249)"> function</td> 
   <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); background-color:rgb(249,249,249)"> &nbsp;</td> 
   <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); background-color:rgb(249,249,249)"> 控制每个操作按钮的显示文字。是个函数，有3个参数:&nbsp;<span style="margin:0px; padding:0px"><span style="margin:0px; padding:0px; color:rgb(51,135,191)">type</span></span>,&nbsp;<span style="margin:0px; padding:0px"><span style="margin:0px; padding:0px; color:rgb(51,135,191)">page</span></span>,&nbsp;<span style="margin:0px; padding:0px"><span style="margin:0px; padding:0px; color:rgb(51,135,191)">current。</span></span>通过这个参数我们就可以将操作按钮上的英文改为中文，如first--&gt;首页，last--&gt;尾页。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; color:rgb(226,128,59); line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221)"> tooltipTitles</td> 
   <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221)"> function</td> 
   <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221)"> &nbsp;</td> 
   <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221)"> 设置操作按钮的title属性。<span style="margin:0px; padding:0px; background-color:rgb(249,249,249)">是个函数，有3个参数:&nbsp;</span><span style="margin:0px; padding:0px"><span style="margin:0px; padding:0px; color:rgb(51,135,191)">type</span></span><span style="margin:0px; padding:0px; background-color:rgb(249,249,249)">,&nbsp;</span><span style="margin:0px; padding:0px"><span style="margin:0px; padding:0px; color:rgb(51,135,191)">page</span></span><span style="margin:0px; padding:0px; background-color:rgb(249,249,249)">,&nbsp;</span><span style="margin:0px; padding:0px"><span style="margin:0px; padding:0px; color:rgb(51,135,191)">current。</span></span></td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; color:rgb(226,128,59); line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); background-color:rgb(249,249,249)"> useBootstrapTooltip</td> 
   <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); background-color:rgb(249,249,249)"> boolean</td> 
   <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); background-color:rgb(249,249,249)"> false</td> 
   <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); background-color:rgb(249,249,249)"> 设置是否使用Bootstrap内置的tooltip。 true是使用，false是不使用,默认是不使用。注意：如果使用，则需要引入bootstrap-tooltip.js插件。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; color:rgb(226,128,59); line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221)"> bootstrapTooltipOptions</td> 
   <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221)"> object</td> 
   <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221)"> &nbsp;</td> 
   <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221)"> <pre><code>    Default:
    {
        animation: <span style="margin:0px; padding:0px">true</span>,
        html: <span style="margin:0px; padding:0px">true</span>,
        placement: <span style="margin:0px; padding:0px; color:rgb(101,176,66)">'top'</span>,
        selector: <span style="margin:0px; padding:0px">false</span>,
        title: <span style="margin:0px; padding:0px; color:rgb(101,176,66)">""</span>,
        container: <span style="margin:0px; padding:0px">false</span> }
                    </code></pre> <p style="margin-top:0px; margin-bottom:10px; padding-top:0px; padding-bottom:0px; line-height:1.5; font-family:Verdana,sans-serif,宋体"> 该参数是个js对象。当参数<span style="margin:0px; padding:0px; background-color:rgb(249,249,249); line-height:1.5"><span style="margin:0px; padding:0px; color:rgb(226,128,59)">useBootstrapTooltip</span><span style="margin:0px; padding:0px">为</span><span style="margin:0px; padding:0px; color:rgb(226,128,59)">true</span><span style="margin:0px; padding:0px">时</span><span style="margin:0px; padding:0px; color:rgb(226,128,59)">，</span><span style="margin:0px; padding:0px">会将该对象传给</span><span style="margin:0px; padding:0px; color:rgb(51,51,51)">Bootstrap的</span></span><span style="margin:0px; padding:0px; background-color:rgb(249,249,249); line-height:1.5; color:rgb(51,51,51)">bootstrap-tooltip.js插件。</span></p> </td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; color:rgb(226,128,59); line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); background-color:rgb(249,249,249)"> onPageClicked</td> 
   <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); background-color:rgb(249,249,249)"> function</td> 
   <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); background-color:rgb(249,249,249)"> &nbsp;</td> 
   <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); background-color:rgb(249,249,249)"> 为操作按钮绑定click事件。回调函数的参数：<span style="margin:0px; padding:0px"><span style="margin:0px; padding:0px; color:rgb(51,135,191)">event</span></span>,&nbsp;<span style="margin:0px; padding:0px"><span style="margin:0px; padding:0px; color:rgb(51,135,191)">originalEvent</span></span>,&nbsp;<span style="margin:0px; padding:0px"><span style="margin:0px; padding:0px; color:rgb(51,135,191)">type</span></span>,<span style="margin:0px; padding:0px"><span style="margin:0px; padding:0px; color:rgb(51,135,191)">page。</span></span></td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; color:rgb(226,128,59); line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221)"> onPageChanged</td> 
   <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221)"> function</td> 
   <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221)"> &nbsp;</td> 
   <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221)"> 为操作按钮绑定页码改变事件，回调函数的参数：<span style="margin:0px; padding:0px"><span style="margin:0px; padding:0px; color:rgb(51,135,191)">event</span></span>,&nbsp;<span style="margin:0px; padding:0px"><span style="margin:0px; padding:0px; color:rgb(51,135,191)">oldPage</span></span>,&nbsp;<span style="margin:0px; padding:0px"><span style="margin:0px; padding:0px; color:rgb(51,135,191)">newPage。</span></span></td> 
  </tr> 
 </tbody> 
</table>

### 公共命令  另外该插件还提供了几个公共的命令，可以通过如下方法调用，如：$('\#example').bootstrapPaginator("show",3) 调用show命令、$('\#example').bootstrapPaginator("getPages") 调用getPages命令  <table style="margin:0px 0px 20px; padding:0px; font-family:微软雅黑,Verdana,sans-serif,宋体; max-width:100%; background-color:transparent; border-spacing:0px; width:940px">   <thead style="margin:0px; padding:0px">    <tr style="margin:0px; padding:0px">     <th style="margin:0px; padding:8px; line-height:20px; vertical-align:bottom; border-top-width:0px"> 命令名</th>     <th style="margin:0px; padding:8px; line-height:20px; vertical-align:bottom; border-top-width:0px"> 参数</th>     <th style="margin:0px; padding:8px; line-height:20px; vertical-align:bottom; border-top-width:0px"> 返回值</th>     <th style="margin:0px; padding:8px; line-height:20px; vertical-align:bottom; border-top-width:0px"> 描述</th>    </tr>   </thead>   <tbody style="margin:0px; padding:0px">    <tr style="margin:0px; padding:0px">     <td style="margin:0px; padding:8px; color:rgb(226,128,59); line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221)"> show</td>     <td style="margin:0px; padding:8px; font-style:italic; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221)"> page</td>     <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221)"> &nbsp;</td>     <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221)"> <span style="margin:0px; padding:0px">show</span>命令用于直接跳转到特定的page，与直接点击操作按钮的效果是一样的。使用方法，如：<span style="margin:0px; padding:0px; color:rgb(51,51,51); font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:14px">$('#example').bootstrapPaginator("</span><span style="margin:0px; padding:0px; color:rgb(226,128,59)">show</span><span style="margin:0px; padding:0px; color:rgb(51,51,51); font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:14px">",3)&nbsp;直接跳转到第3页，</span><span style="margin:0px; padding:0px; color:rgb(51,51,51); font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:14px">$('#example').bootstrapPaginator("</span><span style="margin:0px; padding:0px; color:rgb(226,128,59)">show</span><span style="margin:0px; padding:0px; color:rgb(51,51,51); font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:14px">",100)直接跳转到100页。&nbsp;</span></td>    </tr>    <tr style="margin:0px; padding:0px">     <td style="margin:0px; padding:8px; color:rgb(226,128,59); line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221)"> showFirst</td>     <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221)"> &nbsp;</td>     <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221)"> &nbsp;</td>     <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221)"> <span style="margin:0px; padding:0px">showFirst</span>&nbsp;命令用于直接跳转到首页，与点击first按钮相同。使用方法：<span style="margin:0px; padding:0px; color:inherit; font-family:inherit; font-size:14px">$('#example').bootstrapPaginator("</span><span style="margin:0px; padding:0px; color:rgb(226,128,59)">showFirst</span><span style="margin:0px; padding:0px; color:inherit; font-family:inherit; font-size:14px">")&nbsp;</span></td>    </tr>    <tr style="margin:0px; padding:0px">     <td style="margin:0px; padding:8px; color:rgb(226,128,59); line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221)"> showPrevious</td>     <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221)"> &nbsp;</td>     <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221)"> &nbsp;</td>     <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221)"> <span style="margin:0px; padding:0px">showPrevious</span>&nbsp;命令用于直接跳转到上一页。使用方法：<span style="margin:0px; padding:0px; color:inherit; font-family:inherit; font-size:14px">$('#example').bootstrapPaginator("</span><span style="margin:0px; padding:0px; color:rgb(226,128,59)">showPrevious</span><span style="margin:0px; padding:0px; color:inherit; font-family:inherit; font-size:14px">")&nbsp;</span></td>    </tr>    <tr style="margin:0px; padding:0px">     <td style="margin:0px; padding:8px; color:rgb(226,128,59); line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221)"> showNext</td>     <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221)"> &nbsp;</td>     <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221)"> &nbsp;</td>     <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221)"> <span style="margin:0px; padding:0px">showNext</span>命令用于直接跳转到下一页。</td>    </tr>    <tr style="margin:0px; padding:0px">     <td style="margin:0px; padding:8px; color:rgb(226,128,59); line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221)"> showLast</td>     <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221)"> &nbsp;</td>     <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221)"> &nbsp;</td>     <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221)"> <span style="margin:0px; padding:0px">showLast</span>&nbsp;命令用于直接跳转到上一页。</td>    </tr>    <tr style="margin:0px; padding:0px">     <td style="margin:0px; padding:8px; color:rgb(226,128,59); line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221)"> getPages</td>     <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221)"> &nbsp;</td>     <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221)"> <span style="margin:0px; padding:0px">object</span></td>     <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221)"> <span style="margin:0px; padding:0px">getPages</span>命令用于返回当前控件中显示的页码，以数组形式返回。使用方法：var arra =&nbsp;<span style="margin:0px; padding:0px; color:inherit; font-family:inherit; font-size:14px">$('#example').bootstrapPaginator("</span><span style="margin:0px; padding:0px; color:rgb(226,128,59)">getPages</span><span style="margin:0px; padding:0px; color:inherit; font-family:inherit; font-size:14px">")&nbsp;</span></td>    </tr>    <tr style="margin:0px; padding:0px">     <td style="margin:0px; padding:8px; color:rgb(226,128,59); line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221)"> setOptions</td>     <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221)"> <span style="margin:0px; padding:0px">object</span></td>     <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221)"> &nbsp;</td>     <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221)"> <span style="margin:0px; padding:0px">setOptions&nbsp;</span>命令用于重新设置参数，使用方法：$('#example').bootstrapPaginator("setOptions",newoptions)</td>    </tr>   </tbody>  </table>      ###

### 事件Events ###

Bootstrap Paginator 提供了俩个事件：page-clicked和page-changed。这俩个事件作为参数使用，分别对应onPageClicked和onPageChanged。

<table style="margin:0px 0px 20px; padding:0px; max-width:100%; border-spacing:0px; width:940px"> 
 <thead style="margin:0px; padding:0px"> 
  <tr style="margin:0px; padding:0px"> 
   <th style="margin:0px; padding:8px; line-height:20px; vertical-align:bottom; border-top-width:0px"> 事件名</th> 
   <th style="margin:0px; padding:8px; line-height:20px; vertical-align:bottom; border-top-width:0px"> 回调函数</th> 
   <th style="margin:0px; padding:8px; line-height:20px; vertical-align:bottom; border-top-width:0px"> 描述</th> 
  </tr> 
 </thead> 
 <tbody style="margin:0px; padding:0px"> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; width:100px; color:rgb(226,128,59); line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); background-color:rgb(249,249,249)"> page-clicked</td> 
   <td style="margin:0px; padding:8px; width:300px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); background-color:rgb(249,249,249)"> function(<span style="margin:0px; padding:0px">event</span>,&nbsp;<span style="margin:0px; padding:0px">originalEvent</span>,&nbsp;<span style="margin:0px; padding:0px">type</span>,&nbsp;<span style="margin:0px; padding:0px">page</span>)</td> 
   <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); background-color:rgb(249,249,249)"> 同上文。另外，参数<span style="margin:0px; padding:0px">event</span>,&nbsp;<span style="margin:0px; padding:0px">originalEvent是俩个jquery事件对象，可参考jquery相关文档</span></td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; width:100px; color:rgb(226,128,59); line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221)"> page-changed</td> 
   <td style="margin:0px; padding:8px; width:300px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221)"> function(<span style="margin:0px; padding:0px">event</span>,&nbsp;<span style="margin:0px; padding:0px">oldPage</span>,&nbsp;<span style="margin:0px; padding:0px">newPage</span>)</td> 
   <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221)"> 同上文</td> 
  </tr> 
 </tbody> 
</table>