ko.js+bootstrap+HibernateBaseDAO 分页——（1）基础分页

引言
Sykj_Paging_2.0 是公司针对knockout.js +bootstrap + 公司HibernateBaseDAO编写，配合HibernateBaseDAO所查询到的Pagination对象，将对象中的数据分页显示。
后台需要引入Struts2+Hibernate+Spring

基础引入

<link href="yingxin/css/bootstrap/css/bootstrap.min.css" rel="stylesheet">  <script src="yingxin/js/jquery.min.js"></script><script src="yingxin/css/bootstrap/js/bootstrap.min.js"></script><script type='text/javascript' src='yingxin/js/knockout-3.3.0.js'></script><script type="text/javascript" src="yingxin/js/util/sykj_paging_2.0.js" ></script> 

内容分页

页面代码段：

                    <table class="table table-bordered mt20 tc table-responsive kl-table">                        <caption class="kl-caption">已缴费学生信息</caption>                        <thead class="kl-thead">                            <tr>                                 ...导航栏内容...                            </tr>                        </thead>                        <tbody data-bind="foreach:内容列表Items">                            <tr>                                ...内容，ko.js中的内容显示...                            </tr>                        </tbody>                        <tfoot>                            <tr>                                <td colspan="9">                                    <span class="fr fn-nor ft14">                                        <button id="homeBtn" class="btn btn-default">首页</button>                                        <button id="previousBtn" class="btn btn-default">上一页</button>                                         <button id="nextBtn" class="btn btn-default">下一页</button>                                        <button id="lastBtn" class="btn btn-default">末页</button>                                        当前第<i id="pageNo" class="kl-iFont">1</i>页，                                        共<i id="totalPage" class="kl-iFont"></i>页，                                        <i id="totalItem" class="kl-iFont"></i>条记录。                                        跳转到 <input type="text" id="skipInput" onkeyup="if(!/^\d+$/.test(this.value)) { this.value='';}"  style="width:30px;"/> 页，                                        <button id="skipBtn" class="btn btn-default">跳转</button>                                    </span>                                  </td>                        </tfoot>                    </table>  

JS代码段：

<script type="text/javascript">function ViewModel(){            this.students= ko.observableArray();//以学生列表为例            }$(function(){    var vmPord=new ViewModel();        //初始化分页        var pagin=new Pagin(vmPord.students,'caiwu/payedstudent');        pagin.pageSize=5;//配置每页显示行数，默认为10        pagin.initPageListener();//初始化页面组件        pagin.init();//显示数据        ko.applyBindings(vmPord);});

其中下方分页的ID以上的为默认ID——
首页：homeBtn
上一页：previousBtn
下一页：nextBtn
末页：lastBtn
当前页：pageNo
总页数：totalPage
总记录数：totalItem
跳转输入框：skipInput
跳转按钮：skipBtn

这些ID可以通过配置改变：

pagin.pageConfig = {        pageNo : 'pageNo',// 当前页的标签ID        totalItem : 'totalItem',// 总条数的标签ID        totalPage : 'totalPage',// 总页数的标签ID        pageSize : 'pageSize',// 每页显示数量的标签ID        next : 'nextBtn',// 下一页按钮的标签ID        previous : 'previousBtn',// 上一页按钮的标签ID        home : 'homeBtn',// 首页按钮的标签ID        last : 'lastBtn',// 尾页按钮的标签ID        skip : 'skipBtn',// 跳转按钮的标签ID        skipNo : 'skipInput',// 跳转输入框的标签ID    };

也可以只显示内容不使用分页，不使用分页时候需要配置：

pagin.pagingFlag=false;

其他重要配置

/***这个内容是在ViewModel中配置的变量名称，默认为rows*/pagin.vmDataListName = "rows";//这个配置是数据List传回JSON在VM中的名称/***这个内容是在后台传回的数据中的名称，如后台传回的只有Pagination对象的话，rows为数据所保存的List名称，如果是Map中包含的Pagination的话，可配置 pagin.rows*/pagin.dataName = 'rows';//这个配置是数据List在传回JSON中所保存的KEY

数据加载后的回调函数配置
在查询后台数据后，可能要做一些其他的操作，可以配置每次操作后的回调函数，回调函数配置方法：

var demoFun=function(data){    alert('我在后台拿到的数据'+data);}pagin.synFunction.push(demoFun);//将回调函数加入

获取当前选择项

pagin.getSelectItem();

该方法返回已选中条目的JSON对象。
如：student列表，点击后返回Student对象，可以直接获取对象中属性

var item=pagin.getSelectItem();alert(item.name);