zoukankan      html  css  js  c++  java
  • 使用KnockoutJs+Bootstrap实现分页

    [后端人员耍前端系列]KnockoutJs篇:使用KnockoutJs+Bootstrap实现分页

     

    一、引言

      由于最近公司的系统需要改版,改版的新系统我打算使用KnockoutJs来制作Web前端。在做的过程中,遇到一个问题——如何使用KnockoutJs来完成分页的功能。在前一篇文章中并没有介绍使用KnockoutJs来实现分页,所以在这篇文章中,将补充用KnockoutJs+Bootstrap来实现数据的分页显示。

    二、使用KnockoutJs实现分页

      这里采用了两种方式来实现分页,第一种是将所有数据加载出来,然后再将所有数据分页显示;第二种是每次都只加载部分数据,每次请求都重新加载后面的数据。

      对于这两种方式,使用Razor方式实现的分页一般都会采用第二种方式来实现分页,但是对于单页面程序来说,第一种实现方式也有其好处,对于不是非常大量的数据完全可以采用第一种实现方式,因为这样的话,后面的数据的加载,用户体验非常的流畅。所以这里将分别介绍这两种实现方式。

    2.1 每次加载部分数据的实现

       这里的后端代码采用的是前一篇文章的代码,只是多加了一些示例数据而已。具体的后端实现代码为:

     View Code

      Web前端的实现代码:

    复制代码
    @{
        ViewBag.Title = "Index2";
        Layout = "~/Views/Shared/_Layout.cshtml";
    }
    
    
    <div id="list2">
        <h2>分页第二种实现方式——任务列表</h2>
        <div class="table-responsive">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>名称</th>
                        <th>描述</th>
                        <th>负责人</th>
                        <th>创建时间</th>
                        <th>完成时间</th>
                        <th>状态</th>
                    </tr>
                </thead>
                <tbody data-bind="foreach:pagedList">
                    <tr>
                        <td data-bind="text: id"></td>
                        <td><a data-bind="text: name"></a></td>
                        <td data-bind="text: description"></td>
                        <td data-bind="text: owner"></td>
                        <td data-bind="text: creationTime"></td>
                        <td data-bind="text: finishTime"></td>
                        <td data-bind="text: state"></td>
                    </tr>
                </tbody>
                <tbody data-bind="if: loadingState">
                    <tr>
                        <td colspan="8" class="text-center">
                            <img width="60" src="/images/loading.gif" />
                        </td>
                    </tr>
                </tbody>
                <tfoot data-bind="ifnot:loadingState">
                    <tr>
                        <td colspan="8">
                            <div class="pull-right">
                                <div>总共有<span data-bind="text: totalCount"></span>条记录, 每页显示:<span data-bind="text: pageSize"></span>条</div>
                                <div>
                                    <ul class="pagination">
                                        <li data-bind="css: { disabled: pageIndex() === 1 }"><a href="#" data-bind="click: previous">&laquo;</a></li>
                                    </ul>
                                    <ul data-bind="foreach: allPages" class="pagination">
                                        <li data-bind="css: { active: $data.pageNumber === ($root.pageIndex()) }"><a href="#" data-bind="text: $data.pageNumber, click: function() { $root.gotoPage($data.pageNumber); }"></a></li>
                                    </ul>
                                    <ul class="pagination"><li data-bind="css: { disabled: pageIndex() === pageCount }"><a href="#" data-bind="click: next">&raquo;</a></li></ul>
                                </div>
                            </div>
                        </td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
    复制代码

      对应的Js实现为:

    复制代码
    // 实现分页的第二种方式
    var ListViewModel2 = function() {
        //viewModel本身。用来防止直接使用this的时候作用域混乱
        var self = this;
        self.loadingState = ko.observable(true);
        self.pageSize = ko.observable(3);
        //数据
        this.pagedList = ko.observableArray();
        //要访问的页码
        this.pageIndex = ko.observable(1);
        //总页数
        this.pageCount = ko.observable(1);
        //页码数
        this.allPages = ko.observableArray();
        //当前页
        this.currengePage = ko.observable(1);
        self.totalCount = ko.observable(1);
    
        this.refresh = function() {
            //限制请求页码在该数据页码范围内
            if (self.pageIndex() < 1)
                self.pageIndex(1);
            if (self.pageIndex() > self.pageCount()) {
                self.pageIndex(self.pageCount());
            }
            //post异步加载数据
            sendAjaxRequest("GET", function (data) {
                // 加载新的数据前,先移除原先的数据
                self.pagedList.removeAll();
                self.allPages.removeAll();
                self.totalCount(data.totalCount);
                self.pageCount(data.pageCount);
                self.loadingState(false);
                for (var i = 1; i <= data.pageCount; i++) {
                    //装填页码
                    self.allPages.push({ pageNumber: i });
                }
                //for...in 语句用于对数组或者对象的属性进行循环操作。
                //for ... in 循环中的代码每执行一次,就会对数组的元素或者对象的属性进行一次操作。
                for (var i in data.pagedData) {
                    //装填数据
                    self.pagedList.push(data.pagedData[i]);
                }
            }, 'GetByPaged', { 'pageIndex': self.pageIndex() });
        };
        
        //请求第一页数据
        this.first = function() {
            self.pageIndex(1);
            self.refresh();
        };
        //请求下一页数据
        this.next = function() {
            self.pageIndex(this.pageIndex() + 1);
            self.refresh();
        };
        
        //请求先前一页数据
        this.previous = function() {
            self.pageIndex(this.pageIndex() - 1);
            self.refresh();
        };
        //请求最后一页数据
        this.last = function() {
            self.pageIndex(this.pageCount() - 1);
            self.refresh();
        };
        
        //跳转到某页
        this.gotoPage = function (data, event) {
            self.pageIndex(data);
            self.refresh();
        };
    };
    
    function sendAjaxRequest(httpMethod, callback, url, reqData) {
        $.ajax("/api/task" + (url ? "/" + url : ""), {
            type: httpMethod,
            success: callback,
            data: reqData
        });
    }
    
    $(document).ready(function () {
        var viewModel = new ListViewModel2();
        viewModel.refresh();
        if ($('#list2').length)
            ko.applyBindings(viewModel, $('#list2').get(0));
    });
    复制代码

      这里介绍了下使用KnockoutJs实现分页功能的实现思路:

    1. 页面加载完成之后,发起Ajax请求去异步调用REST 服务来请求部分数据。
    2. 然后将请求的数据通过KnockoutJs绑定显示。
    3. 将对应的分页信息绑定到Bootstrap分页中
    4. 当用户点击翻页时,再发起一个Ajax请求去异步调用Rest服务请求数据,再将请求的数据显示出来。

      这上面是描述的代码的调用逻辑关系,你可以参考对应的JS代码来理解上面的描述。到此我们第二种实现方式就实现完成了。

    2.2 第一次加载所有数据,然后将所有数据分页显示

      接下来就介绍了第一种实现方式,这样的实现方式,用户只会在第一次的时候才会感觉到数据加载中,翻页过程中感觉不到页面的加载,这样对于一些本身数据了不是太多的情况下,对于用户的感觉也是更加流畅的。

      其具体的实现思路,也就是将请求的数据不要全部显示在页面上,因为数据太多,一下子显示到页面中,用户可能会眼花缭乱。将数据分页显示将使得用户查看更加清晰。

    具体的Web前端Js的实现代码为:

    复制代码
    var ListViewModel = function () {
        var self = this;
        window.viewModel = self;
        self.list = ko.observableArray();
        self.pageSize = ko.observable(3); 
        self.pageIndex = ko.observable(0); //要访问的页码
        self.totalCount = ko.observable(1); //总记录数
        self.loadingState = ko.observable(true);
        
        self.pagedList = ko.dependentObservable(function () {
            var size = self.pageSize();
            var start = self.pageIndex() * size;
            return self.list.slice(start, start + size);
        });
        
        self.maxPageIndex = ko.dependentObservable(function () {
            return Math.ceil(self.list().length / self.pageSize()) - 1;
        });
        self.previousPage = function () {
            if (self.pageIndex() > 0) {
                self.pageIndex(self.pageIndex() - 1);
            }
        };
        self.nextPage = function () {
            if (self.pageIndex() < self.maxPageIndex()) {
                self.pageIndex(self.pageIndex() + 1);
            }
        };
        self.allPages = ko.dependentObservable(function () {
            var pages = [];
            for (var i = 0; i <= self.maxPageIndex() ; i++) {
                pages.push({ pageNumber: (i + 1) });
            }
            return pages;
        });
        self.moveToPage = function (index) {
            self.pageIndex(index);
        };
    };
    
    
    var listViewModel = new ListViewModel();
    
    function bindViewModel() {
        sendAjaxRequest("GET", function (data) {
            listViewModel.loadingState(false);
            listViewModel.list(data);
            listViewModel.totalCount(data.length);
            if ($('#list').length)
                ko.applyBindings(listViewModel, $('#list').get(0));
        }, null, null);
    }
    $(document).ready(function () {
        bindViewModel();
       
    });
    复制代码

      其前端页面的实现与前面的实现类似。具体页面代码如下:

     View Code

    三、运行效果

      接下来,让我们看看,使用KnockoutJs实现的分页效果:

     

    四、总结

      到这里,本文要介绍的内容就结束,尽管本文实现的内容相对比较简单,但是对于一些刚接触KnockoutJs的朋友来说,相信本文的实现会是一个很多的指导。接下来,我将会为大家分享下AngularJs的相关内容。

    本文所有源码实现:KnockoutJSPaged

  • 相关阅读:
    light oj 1105 规律
    light oj 1071 dp(吃金币升级版)
    light oj 1084 线性dp
    light oj 1079 01背包
    light oj 1068 数位dp
    light oj 1219 树上贪心
    light oj 1057 状压dp TSP
    light oj 1037 状压dp
    矩阵快速幂3 k*n铺方格
    矩阵快速幂2 3*n铺方格
  • 原文地址:https://www.cnblogs.com/Leo_wl/p/5456141.html
Copyright © 2011-2022 走看看