动动手，写个knockout的分页模板

最近一个项目用ASP.NET + knockout开发，很多列表页面都带分页，于是就有了写一个公共的分页模板的想法。

先把template写好：

<script type="text/html" id="PaginationTemplate" >
    <div class="pagination" data-bind="visible: pages().length>0">
        <div>
            <ul>
                <li><a data-bind="click:goToFirst" onclick="clickPaging(this)">首页</a></li>
                <li><a data-bind="click:goToPrev" onclick="clickPaging(this)" ><<</a></li>
                <!--ko if:showStartPagerDot-->
                <li><a >...</a></li>
                <!--/ko-->
                <!--ko foreach:pages-->
                <li data-bind="css: { 'active': $data == $parent.currentPage() }">
                    @*<a data-bind="text: $data, click: $parent.goToPage.bind($data, $data)" onclick="clickPaging(this)"></a>*@
                    <a data-bind="text: $data, click: $parent.goToPage.bind($data, $data),style:{'background-color':$('.pagination a').length=='5'?'#CE9E00':'#194DB0'}" onclick="clickPaging(this)"></a>
                </li>
                <!--/ko-->
                <!--ko if:showEndPagerDot-->
                <li><a>...</a></li>
                <!--/ko-->
                <li><a data-bind="click: goToNext" onclick="clickPaging(this)">>></a></li>
                <li><a data-bind="click:goToLast" onclick="clickPaging(this)">末页</a></li>
            </ul>
            <ul>
                <li><span >跳转</span></li>
                <li>
                    <input type="text" class="h_20 w_30 txtStl1 mg_t_neg2 " id="pagex" data-bind="value:jumpPage"/>
                </li>
                <li>
                    <span data-bind="click: jump" onclick="clickPaging(this)">
                        @*<button class="btnStl1" type="button" data-bind="click: jump">确定</button></span>*@确定</span>

                </li>
                <li><span data-bind="text: formatedPageCount"></span></li>
            </ul>
        </div>
        <div class="clear"></div>
    </div>

</script>

接下来就是写knockout的视图模型了：

function paginationViewModel(pageSize, goToPageHandler) {
    var self = this, 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.caculatePages = function () {
        var result = [], pagerCount = 8, 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.formatedPageCount = ko.computed(function () {
        return "共" + self.pageCount() + "页";
    });
    //页面跳转
    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.count / self.pageSize));
                self.currentPage(page);
                self.jumpPage(null);
                self.caculatePages();
            });

        };
    };
    //回到首页
    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);
        };
    };
};

然后直接用列表页面的viewModel继承这个视图模型：

paginationViewModel.apply(self, [10, function (page, pageHandler) {
            ajaxQueue.Request("UserQuaList", {
                url: self.baseUri,
                data:{
                    userName:self.userName()||"",
                    quaName:self.quaName()||"",
                    pageIndex:page,
                    pageSize:self.pageSize
                },
                success: function (data) {
                    pageHandler.call(self, data);
                    self.userQuas($.map(data.list || [], function (r) { return new userQuaModel(r); }));
                }
            }).Run();
        }]);

页面上分页部分用template绑定：

<td colspan="5" data-bind="template: 'PaginationTemplate'"></td>

大功告成！，试了一下，还不错，以后还可以再加点效果上去。

 

 

应大家要求，整了一个Demo源代码:

例子源代码