knockoutjs+ jquery pagination+asp.net web Api 实现无刷新列表页

Knockoutjs 是一个微软前雇员开发的前端MVVM JS框架, 具体信息参考官网 http://knockoutjs.com/

Web API数据准备： 偷个懒数据结构和数据copy自官网实例 http://www.asp.net/web-api/overview/getting-started-with-aspnet-web-api/tutorial-your-first-web-api 

using System.Collections.Generic;
using System.Linq;
using System.Web.Http;

namespace WebApp.Api
{
    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Category { get; set; }
        public decimal Price { get; set; }
    }

    public class TestController : ApiController
    {
        Product[] products = new Product[] 
        { 
            new Product { Id = 1, Name = "Tomato Soup", Category = "Groceries", Price = 1 }, 
            new Product { Id = 2, Name = "Yo-yo", Category = "Toys", Price = 3.75M }, 
            new Product { Id = 3, Name = "Hammer", Category = "Hardware", Price = 16.99M },
            new Product { Id = 4, Name = "Tomato Soup", Category = "Groceries", Price = 1 }, 
            new Product { Id = 5, Name = "Yo-yo", Category = "Toys", Price = 3.75M }, 
            new Product { Id = 6, Name = "Hammer", Category = "Hardware", Price = 16.99M } ,
            new Product { Id = 7, Name = "Tomato Soup", Category = "Groceries", Price = 1 }, 
            new Product { Id = 8, Name = "Yo-yo", Category = "Toys", Price = 3.75M }, 
            new Product { Id = 9, Name = "Hammer", Category = "Hardware", Price = 16.99M },
            new Product { Id = 10, Name = "Tomato Soup", Category = "Groceries", Price = 1 }, 
            new Product { Id = 11, Name = "Yo-yo", Category = "Toys", Price = 3.75M }, 
            new Product { Id = 12, Name = "Hammer", Category = "Hardware", Price = 16.99M },
            new Product { Id = 13, Name = "Tomato Soup", Category = "Groceries", Price = 1 }, 
            new Product { Id = 14, Name = "Yo-yo", Category = "Toys", Price = 3.75M }, 
            new Product { Id = 15, Name = "Hammer", Category = "Hardware", Price = 16.99M } ,
            new Product { Id = 16, Name = "Tomato Soup", Category = "Groceries", Price = 1 }, 
            new Product { Id = 17, Name = "Yo-yo", Category = "Toys", Price = 3.75M }, 
            new Product { Id = 18, Name = "Hammer", Category = "Hardware", Price = 16.99M } 
        };

        [Route("api/getpagecount")]
        [HttpGet]
        public int GetCount()
        {
            return products.Length;
        }

        [Route("api/getdata")]
        [HttpGet]
        public IEnumerable<Product> GetProduct(int pageIndex, int pageSize)
        {
            return products.Skip(pageIndex * pageSize).Take(pageSize);
        }
    }
}

上述就是web api数据源和两个供前端调用分页的接口

JS 交互代码如下 

; ( function ( ko )
{
    var pageSize = 10,
        viewModel,
        isBind = false;

    function loadTable( pageIndex )
    {
        $.ajax( {
            url: '/api/getdata?pageIndex='+pageIndex+'&pageSize='+pageSize,
            type: 'GET',
            contentType: "application/json; charset=utf-8",
            success: function ( r )
            {
                if ( !isBind )
                {
                    viewModel = ko.mapping.fromJS( r );
                    isBind = true;
                    ko.applyBindings( viewModel );
                } else
                {
                    ko.mapping.fromJS( r, viewModel );
                }
            }
        } );
    }

    initPager();

    function initPager()
    {
        var getCountUrl = '/api/getpagecount';

        $.ajax( {
            url: getCountUrl,
            type: 'GET',
            contentType: "application/json; charset=utf-8",
            success: function ( r )
            {
                $( '#pager' ).pagination( r, {
                    callback: function ( currentPageIndex )
                    {
                        loadTable( currentPageIndex );
                    }
                } );
            }
        } );
    }
} )( ko );

一个立即自执行函数 传入ko全局变量 ， 函数里面定义了两个函数， initPager用于从server端取得商品数量并初始化pagination插件,pagination插件绑定点击页码时的回调函数，这里使用了默认的pagination设置,每页显示10个商品。loadTable用于从server端取得分页数据，接收一个参数用于指定当前获取第几页数据，数据获取成功，用ko.applyBindings绑定到页面渲染显示模板数据.注意这里为了偷懒使用了knockout的 mapping插件，具体用法请参考 http://knockoutjs.com/documentation/plugins-mapping.html。

html页面代码如下

@{
    ViewBag.Title = "Test";
}
<style>
    .pagination {
        font-size: 80%;
    }

        .pagination a {
            text-decoration: none;
            border: solid 1px #AAE;
            color: #15B;
        }

        .pagination a, .pagination span {
            display: block;
            float: left;
            padding: 0.3em 0.5em;
            margin-right: 5px;
            margin-bottom: 5px;
        }

        .pagination .current {
            background: #26B;
            color: #fff;
            border: solid 1px #AAE;
        }

            .pagination .current.prev, .pagination .current.next {
                color: #999;
                border-color: #999;
                background: #fff;
            }
</style>

<table class="table table-hover" id="dataTable">
    <thead>
        <tr>
            <th>
                Id
            </th>
            <th>
                Name
            </th>
            <th>
                Category
            </th>
            <th>
                Price
            </th>
        </tr>
    </thead>

    <tbody data-bind="foreach:$root">
        <tr>
            <td data-bind="text:Id"></td>
            <td data-bind="text:Name"></td>
            <td data-bind="text:Category"></td>
            <td data-bind="text:Price"></td>
        </tr>
    </tbody>
</table>
<div>
    <div id="pager" class="pagination">
    </div>
</div>
@section scripts{

    <script src="~/Scripts/jquery.pagination.js"></script>
    <script src="~/Scripts/knockout-3.2.0.js"></script>
    <script src="~/Scripts/knockout.mapping-latest.js"></script>
    <script src="~/Scripts/list.js"></script>
}

上面的js逻辑代码文件为list.js , 为了偷懒直接把pagination的样式copy到了html头部。

运行结果