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格式。

這個只是測試例子，實際項目中獲取數據部分可以根據存儲過程來獲取數據，或者把全部的數據先存到緩存中。這樣就不會像我例子那樣每次都要先查找所有的數據。

 

如果您覺得還不錯，點個推薦吧。

 

轉載請注明出處！謝謝！