konck out 分页 可切换url

/*分页用js*/
function paginationViewModel(pageSize, goToPageHandler) {
    var self = this;
    self.pagerCount = 8;//如果分页的页面太多，截取部分页面进行显示，默认设置显示9个页面
    self.pageSize = pageSize;//每页显示的记录数
    self.currentPage = ko.observable(1);//当前页面Index
    self.jumpPage = ko.observable(1);//需要跳转的页面的Index
    self.pageCount = ko.observable(0);//总页数
    self.showStartPagerDot = ko.observable(false);//页面开始部分是否显示点号
    self.showEndPagerDot = ko.observable(false);//页面结束部分是否显示点号
    self.pages = ko.observable([]);//需要显示的页面数量
    self.total = ko.observable();//记录总数
    //计算需要显示的页面的页码
    self.caculatePages = function () {
        var result = [], pagerCount = self.pagerCount, start = 1, end = pagerCount;
        if (self.currentPage() >= pagerCount) {
            start = self.currentPage() - Math.floor(pagerCount / 2);
            self.showStartPagerDot(true);
        } else {
            self.showStartPagerDot(false);
        };
        end = start + pagerCount - 1;
        if (end > self.pageCount()) {
            end = self.pageCount();
            self.showEndPagerDot(false);
        } else {
            self.showEndPagerDot(true);
        };

        for (var i = start; i <= end; i++) {
            result.push(i);
        };
        self.pages(result);
    }

    //页面跳转
    self.goToPageHandler = goToPageHandler;
    self.goToPage = function (page) {
        if (typeof self.goToPageHandler == "function") {
            self.goToPageHandler.call(self, page - 1, function (data) {
                self.pageCount(Math.ceil(data.total / self.pageSize));
                self.currentPage(page);
                self.jumpPage(null);
                self.caculatePages();
                self.total(data.total);
            });

        };
    };
    //回到首页
    self.goToFirst = function () {
        self.goToPage(1);
    };
    //跳转到最后一页
    self.goToLast = function () {
        self.goToPage(self.pageCount());
    };
    //上一页
    self.goToPrev = function () {
        var cur = self.currentPage();
        if (cur > 1) {
            self.goToPage(cur - 1);
        };
    };
    //下一页
    self.goToNext = function () {
        var cur = self.currentPage();
        if (cur < self.pageCount()) {
            self.goToPage(cur + 1);
        };
    };
    //跳转
    self.jump = function () {
        var page = self.jumpPage();
        if (page > 0 && page <= self.pageCount()) {
            self.goToPage(page);
        };
    };
};

/**
 * 公共的分页视图模型
 * @param url 请求数据的url
 * @param pagesize 每页显示数据条数
 */
var commonPageViewModel = function(url,pagesize) {
	if(pagesize==undefined){
		pagesize=10;//默认10
	}
	var self = this;
	self.loading = ko.observable(true);
	self.items = ko.observableArray([]);
	self.url=url;
	self.changeUrl = function(url) {
		self.url=url;
    }.bind(this);
	
    paginationViewModel.apply(self, [ pagesize,
                            			function(page, pageHandler) {
                            				self.loading(true);						
                            				$.ajax({
                            					url : self.url,
                            					dataType:'json',
                            					cache : false,
                            					data : {
                            						page : page+1,
                            						rows : self.pageSize
                            					},
                            					success : function(data) {
                            						pageHandler.call(self.url, data);
                            						self.items(data.rows);
                            						self.loading(false);
                            					}
                            				});
                            	} ]);
}

var vm =null;//公用的页面视图model
<span style="white-space:pre">			</span>//改变右侧url
<span style="white-space:pre">			</span>function viewInfo(url){<span style="white-space:pre">				</span>
<span style="white-space:pre">				</span>if(vm==null){
<span style="white-space:pre">					</span> vm =new commonPageViewModel(url,3);
<span style="white-space:pre">					</span> ko.applyBindings(vm);
<span style="white-space:pre">				</span>}
<span style="white-space:pre">				</span>else{
<span style="white-space:pre">					</span>vm.changeUrl(url);
<span style="white-space:pre">				</span>}


<span style="white-space:pre">				</span>vm.goToFirst();
<span style="white-space:pre">			</span>}

<div>
		<ul>
		 	<!--ko foreach:items-->
  				 	<li><a href="#"><span data-bind="text:title"></span></a><span  data-bind="text:faBuTimeShortText"></span></li>
      		<!--/ko-->					
		</ul>
	</div>

界面上分页的代码，可单独放一个html

<div class="gcxxfy" data-bind="template:'tplPagging'">
</div>


<script type="text/html" id="tplPagging">
<div class="mmggxlh" data-bind="visible: pages().length > 0">
<a data-bind="click: goToFirst">首页</a>
<a data-bind="click: goToPrev">上一页</a>
 <!--ko if:showStartPagerDot-->
     <span class="dian">....</span>
<!--/ko-->
 <!--ko foreach:pages-->
     <a data-bind="text: $data, click: $parent.goToPage.bind($data, $data),css: { 'one': $data == $parent.currentPage() }"></a>
<!--/ko-->
 <!--ko if:showEndPagerDot-->
         <span class="dian">....</span>
 <!--/ko-->
<a data-bind="click: goToNext">下一页</a>
<a data-bind="click: goToLast">末页</a>
<span class="dian">共 <span data-bind="text:total"></span> 条记录</span>
<span class="dian">到</span>
<input type="text" class="mmggkuan" data-bind="value:jumpPage" style="text-align:center;padding:0px;margin:0px"><span class="dian">页</span><span><a data-bind="click: jump">确定</a></span>


</div>	
   </ul>
 </script>