分页控件(easyUi自己封装过后的)

　　　　 这个版本是对easyui的封装，整体思路是easyui的界面风格，然后新建一个自定义控件，各个页面分别传递回调函数名,请求url，参数等，通过ajax请求成功后执行传递的回调函数即可。

　　　　先看下效果：

　　　　1.首先新建控件　

　　　　　　1.1html代码(注意引入easyui的js和css,jquery等)：

　　　  <div id="data_page_nav" class="easyui-pagination" data-options="total: 0, pageSize: 10, pageList: [10, 20, 50]" style="border:1px solid #ddd;  vertical-align: middle;" name="data_page_nav"></div>

　　　　　　1.2js代码 　　

<script type="text/javascript">
    var PaginationData = { method: "", url: "", RenderFunc: null };
    (function (o) {
        o.GetParams = function () {
            return $("#data_page_nav").data("params");
        }
        o.SetParams = function (para) {
            $("#data_page_nav").data("params", para);//页面搜索项的参数
        }
        o.BindTemplateList = function (d) {//绑定分页
            $("#data_page_nav").data("params", d.params);//传参
            o.RenderFunc = d.callbackfunc;//处理函数
            o.url = d.url;
            $('#data_page_nav').pagination({
                total: d.total,
                pageSize: d.pageSize,
                onSelectPage: function (pageNumber, pageSize) {
                    $(this).pagination('loading');
                    o.GetTemplateList(pageNumber,pageSize);
                    $(this).pagination('loaded');
                }
            });
        }
        o.GetTemplateList = function (pageIndex,pageSize) {//分页加载
            var d = ($("#data_page_nav").data("params"));
            d.PageIndex = pageIndex;
            d.pageSize = pageSize;
            $.ajax({
                url: o.url,
                data: d,
                type: 'post',
                dataType: 'json',
                async: false,
                success: function (v) {
                    if (v != null) {
                        $('#data_page_nav').pagination('refresh', {   
                            total: v.total
                        });
                        o.RenderFunc(v);
                    }
                }
            });
        }
    })(PaginationData);
    $("#data_page_nav").data("paginationdata", PaginationData);
</script>

 　　　2.各个页面的使用

　　　　　　2.1添加控件引用

<%@ Register Src="~/UserControl/Pagination.ascx" TagPrefix="uc1" TagName="Pagination" %>

　　　　　　2.2页面控件

 <uc1:Pagination runat="server" ID="Pagination" /> 

　　　　　　2.3页面js

   <script type="text/javascript">
            var DialogGoodListTm={};
            (function(o){
                o.RenderFunc=function(v){//绑定 回调函数
                    if (v!=null&&v.DATA!=null&&v.DATA.length>0) {
                        var contentArr=[];
                        for (var i = 0; i < v.DATA.length; i++) {
                            contentArr.push('<tr>');
                            contentArr.push('<td><input type="checkbox" name="chk_Good_id" class="chk_cell" value="'+v.DATA[i].ID+'" good-name="'+v.DATA[i].GoodName+'" goodimg="'+v.DATA[i].img+'"  goodbh="'+v.DATA[i].Code+'"/></td>');                    
                            contentArr.push('<td class="hotsell_name" >'+v.DATA[i].GoodName+'</td>');   
                            contentArr.push('<td class="hotsell_name" >'+v.DATA[i].Code+'</td>'); 
                            contentArr.push('<td class="hotsell_des" > '+v.DATA[i].BarCode+'</td>');
                            contentArr.push(' </tr>');
                        }
                        $("#list_goodtable").find("tbody").html(contentArr.join(''));
                    }else
                    {
                        $("#list_goodtable").find("tbody").html('<tr class="chk_line"><td colspan="4" class="ta_l">暂无数据</td>');
                    }
                }57             })(DialogGoodListTm); 
            $(document).ready(function () {
                var DialogGoodListPagination = $(".hotsells_good_wrap").find('[name="data_page_nav"]').data("paginationdata");
                DialogGoodListPagination.BindTemplateList({  //传递参数
                    callbackfunc: DialogGoodListTm.RenderFunc, //回调函数
                    total: <%=this.Total%>,
                    pageSize: "10", //每页显示记录数，这里写死了 请注意
                    params: {PageIndex:0,action :"GetGoodPageList",GoodName:'',GoodBH:'',Uid:<%=id%>}, //参数
                    url:"/Good/GoodHandler.ashx"
                });//初始化分页
                DialogGoodListPagination.GetTemplateList(1);//绑定第一页  页面首次加载不要忘记
            });
71    </script>

　　　　　总结：这个版本分页用户效果相对来说要好点，使用起来js代码稍微多点，但比起前面那个(拼接html)版本还是比较不错的，我个人比较推荐这个版本。

　　　　　　　　　　最后因为时间比较久了，可能写的不是非常完善有些东西没有写清楚（有需要的请留言）比如：页面搜索项查询情况等，谢谢大家阅读！下一篇整理自定义控件版分页和这个版本不一样的思路哦