jquery 分页控件(二)

     上一章主要是关于分页控件的原理，代码也没有重构。在这一章会附上小插件的下载链接，插件主要就是重构逻辑部分，具体可以下载源文件看下，源代码也有注释。为了测试这个插件是能用的，我弄了个简单的asp.net例子（vs 2010）。通过ajax根据每一页请求数据，数据是使用json格式进行传输，通过knockout.js绑定。在这里顺便推荐一下汤姆大叔的Knockout应用开发指南  ，是学习Knockout非常好的文章。

惯例：插件Demo        Asp.net Demo

效果图：

     主要思路是通过分页控件的callback方法把  当前页  和  每页显示数量  传给pageselectCallback方法，pageselectCallback请求后台的getModel方法获取当前页的数据，然后数据通过knockout提供的方法把数据绑定到Html控件上。  

一、定义请求数据方法

    [WebMethod]
    public static string getModel(string index, string pagesize)
    {
        int pageIndex = Int32.Parse(index);
        int pageSize = Int32.Parse(pagesize);
        Models models = new Models();
        IList<Model> allModels = models.getModels();//获取全部数据
        if (pageIndex > 0)
        {
            pageIndex = pageIndex * pageSize;
        }
        if (pageSize > (allModels.Count - 1 - pageIndex))
        {
            pageSize = allModels.Count - 1 - pageIndex;
        }
        var pageSysmenus = allModels.Skip(pageIndex).Take(pageSize).ToList<Model>();//根据页数和每页显示数量获取数据
        string thedata = JsonHelper.ObjDivertToJson(pageSysmenus);//把数据转成json格式

        return thedata;
    }
   
    //获取总数
    [WebMethod]
    public static int getCounts()
    {
         Models models = new Models();
        IList<Model> allModels = models.getModels();
        int count = allModels.Count - 1;
        return count;
    }

 

二、knockout 绑定数据

 <table class="mytable" border="1" cellspacing="0">
            <thead style="background-color: #0AA403">
                <tr>
                    <th>
                        Id
                    </th>
                    <th>
                        Name
                    </th>
                    <th>
                        TrueName
                    </th>
                    <th>
                        Sex
                    </th>
                    <th>
                        Email
                    </th>
                </tr>
            </thead>
            <tbody id="tChangeClor" data-bind="foreach: models">
                <tr>
                    <td>
                        <span data-bind="text: Id"></span>
                    </td>
                    <td>
                        <span data-bind="text: Name"></span>
                    </td>
                    <td>
                        <span data-bind="text: TrueName"></span>
                    </td>
                    <td>
                        <span data-bind="text: Sex"></span>
                    </td>
                    <td>
                        <span data-bind="text: Email"></span>
                    </td>
                </tr>
            </tbody>
        </table>
        <table>
            <tr>
                <td id="Pagination" class="pagination">
                </td>
            </tr>
        </table>

data-bind绑定的字段要与后台model的字段一致，当然knockout不单只是这个功能，还有数据验证等功能，很好用的一个插件。

 

三、ajax 请求数据

    //定义knockout的viewmodel
    var viewModel = function () {
        var self = this;
        self.models = ko.observableArray();
    }
    var vm = new viewModel();
    //分页控件的callback方法，通过当前页和显示页数请求数据
    var pageselectCallback = function (page_index, pagesize) {
        var mydata = "{'index':" + page_index + ",'pagesize':" + pagesize + "}";//post到getPage.aspx/getModel的参数
        $.ajax({
            type: "post",
            url: "getPage.aspx/getModel",
            data: mydata,
            contentType: "application/json;charset=utf-8",
            dataType: "json",
            success: function (data) {
                var datas = data.d;
                mappingData(datas);
            },
            error: function (Request) {
                alert(Request.responseText);
            }
        });
    };
    var mappingData = function (data) {
        var mydata = ko.mapping.fromJSON(data);
        vm.models = ko.mapping.fromJS(mydata, {}, vm.models);//把json格式转换成object格式，赋值给models
        $('.mytable tbody tr:even').addClass('odd');
    };
    $(function () {
        var getCounts;
        $.ajax({
            type: "post",
            url: "getPage.aspx/getCounts",
            contentType: "application/json;charset=utf-8",
            dataType: "json",
            success: function (data) {
                var datas = data.d;
                getCounts = Math.ceil(datas / 2);//总页数，向上取整
                //调用分页控件插件
                $("#Pagination").pagination({
                    pageSize: 2,
                    current_page: 1,
                    display_num: 10,
                    edge_num: 3,
                    counts_num:getCounts,
                    callback: pageselectCallback
                });
            },
            error: function (Request) {
                alert(Request.responseText);
            }
        });
        ko.applyBindings(vm, document.getElementById('tChangeClor'));
    });

     关于ko.mapping.fromJSON(data)还是ko.mapping.fromJS(data)的判断，如果data是string类型（ data ='{"Id":1,"Name":"WinKi"}' )就用fromJSON，如果data是object类型（ data = {Id:1,Name:"WinKi"} ) 就用fromJS。如果使用$.getJSON()获取数据可以把JSON格式转换成object格式。

这个只是测试例子，实际项目中获取数据部分可以根据存储过程来获取数据，或者把全部的数据先存到缓存中。这样就不会像我例子那样每次都要先查找所有的数据。

 

如果您觉得还不错，点个推荐吧。

 

转载请注明出处！谢谢！