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);