動動手，寫個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源代碼:

例子源代碼