Jquery自定义分页插件

效果：

　　

　

核心代码：

　自定义Jquery插件grid.js

 

//Jquery自定义分页插件
(function ($) {
    $.fn.grid = function (options) {
        var objGrid = $(this);
        var defaults = { 
            action:"normalList",  
            mouldId:"",  
            pageIndex:1,
            pageSize:10,
            orderField:"" ,
            orderType:"",
            searchField: "",//搜索条件 
            url:""       //ajax处理页地址
        }
        var options = $.extend(defaults, options); 
        function init(){
            if($(".pagebar").size()>0){
                $(".pagebar").remove();
            }
            objGrid.html("");
            
            $.ajax({
                type:"get",
                contentType:"application/json;charset=utf-8",
                data:options,
                cache:false,
                url:options.url,
                success: function(result) { 
                    if(result.length<=0)return;
                        //alert(result);   
                        var json = eval("("+result+")");
                         
                        objGrid.html(json.data);
                        if(json.total>0)
                            objGrid.after(pagebar(parseInt(json.total)));
                        psChange();
                        pgFirst();
                        pgNext();
                        pgPrev();
                        pgLast();
                        pgRefresh();
                        selChange();
                        order();
                        rowChecked();
                        collect();
                        //滚动条                       
                        var height=objGrid.find("table:first").height()+30;                        
                        $(".container").css("height",height+"px");
                        $("#lblList").css("height",height+"px");
                        $(".container").hScrollPane({
                              mover:"#lblList",
                              moverW: function(){return $("table.grid").width()+50}(),
                              showArrow:true,
                              handleCssAlter:"draghandlealter",
                              mousewheel:{moveLength:200}
                         }); 
                        //左右（上下）分栏式页面控制
                        var mheight=objGrid.find("table:first").height()+$("#mainFrame .column .topFrame").height()+80;
                        var mfcheight=$(window).height()-174;
                        $("#mainFrame .column").css("height",mheight+"px");
                        if(mheight>mfcheight){
                            $("#mainFrame .column").css("height",mheight+"px");                                
                        }else{
                            $("#mainFrame .column").css("height",mfcheight+"px");
                        }                        
                    }    
            });
        };
        /*分页HTML*/
        function pagebar(total){
            var pageCount = total%options.pageSize==0?total/options.pageSize:parseInt(total/options.pageSize)+1;
            pageCount=pageCount==0?1:pageCount;
            var selectObj = "<select style=\"width:50px;\">";
            for(var pIndex=1;pIndex<=pageCount;pIndex++){
                if(pIndex==options.pageIndex){
                    selectObj+='<option selected="selected">'+pIndex+'</option>';
                }else{
                    selectObj+='<option>'+pIndex+'</option>';
                }
            }
            selectObj += "</select>";
            var pageHtml ='<div class="pagebar"><div class="pgPanel"><div>每页显示<a>10</a>&nbsp; <a>20</a>&nbsp; <a>30</a>条 </div>'; 
            if(options.pageIndex==1) 
                pageHtml+='<div class="separator"></div><div class="pgBtn pgFirstDisabled" title="首页"></div><div class="pgBtn pgPrevDisabled" title="上页"></div>'; 
            else 
                pageHtml+='<div class="separator"></div><div class="pgBtn pgFirst" title="首页"></div><div class="pgBtn pgPrev" title="上页"></div>'; 
            pageHtml+='<div class="separator"></div><div>第 '+selectObj+' 页 / 共<span class="pgTotalPage" id="pageCount">'+pageCount+'</span> 页</div>';
            if(options.pageIndex==pageCount) 
                pageHtml+='<div class="separator"></div><div class="pgBtn pgNextDisabled" title="下页"></div><div class="pgBtn pgLastDisabled" title="尾页"></div>';
            else
                pageHtml+='<div class="separator"></div><div class="pgBtn pgNext" title="下页"></div><div class="pgBtn pgLast" title="尾页"></div>';
            
            pageHtml+='<div class="separator"></div><div class="pgBtn pgRefresh" title="刷新"></div><div class="separator"></div></div></div>'; 
            
            return pageHtml;
        };
        //初始化
        init();
        /*pagesize 每页显示条数*/
        function psChange(){
            $(".pgPanel a").click(function(){
                options.pageIndex=1;
                options.pageSize = parseInt($(this).html());  
                init(); 
            });
        }
        /*下拉框页数改变事件*/
        function selChange(){
            $(".pagebar select").change(function(){
                options.pageIndex = parseInt($(this).val());  
                init(); 
            });
        }
        /*首页*/
        function pgFirst(){
            $(".pagebar .pgFirst").click(function(){
               options.pageIndex = 1; 
               init(); 
            });
        }
        /*上页*/
        function pgPrev(){
            $(".pagebar .pgPrev").click(function(){
               options.pageIndex--; 
               init(); 
            });
        }
        /*下页*/
        function pgNext(){
            $(".pagebar .pgNext").click(function(){
               options.pageIndex ++; 
               init(); 
            });
        }        
        /*尾页*/
        function pgLast(){
            $(".pagebar .pgLast").click(function(){
               options.pageIndex = parseInt($(".pagebar select option").eq($(".pagebar select option").size()-1).html()); 
               init(); 
            });
        }
        /*刷新*/
        function pgRefresh(){
            $(".pagebar .pgRefresh").click(function(){ 
               init(); 
            });
        }
        /*字段排序*/
        function order(){
            objGrid.find("table:first thead th").click(function(){
                if($(this).attr("field")){
                    options.pageIndex = 1;
                    options.orderField = $(this).attr("field");
                    if($(this).attr("ordertype")=="desc"){
                        options.orderType = "asc";
                        $(this).attr("ordertype","asc");
                    }else{
                        options.orderType = "desc";
                        $(this).attr("ordertype","desc");
                    }
                    init();
                }
            })
        }
        /*列表页checkbox选择 单击DataRow时，判断全选按钮是否选中*/
        function rowChecked(){
            objGrid.find("table tbody input[type='checkbox']").click(function(){
                if($(this).attr("checked")){
                    var ckedCount = 0;
                    objGrid.find("table tbody input[type='checkbox']").each(function(){
                        if($(this).attr("checked")){
                           ckedCount++;
                        }
                    });
                    var trCount = objGrid.find("table tbody tr").size()-1;
                    if(trCount==ckedCount){
                        objGrid.find("table thead .checkall").attr("checked",true);
                    }
                }else{
                    if(objGrid.find("table thead .checkall").attr("checked")){
                        objGrid.find("table thead .checkall").removeAttr("checked");
                    }
                }
            });
        }
        
        /*收藏方法*/
        function collect(){
            var caption="";
            var fid="";
             //已收藏->未收藏
            objGrid.find("table tbody span[class='img_collect']").click(function(){ 
                caption=$(this).attr("caption");
                fid=$(this).attr("fid");
                isCollect(false,fid,caption,$(this));
            });
             //未收藏->已收藏
            objGrid.find("table tbody span[class='img_uncollect']").click(function(){
                caption=$(this).attr("caption");
                fid=$(this).attr("fid");
                isCollect(true,fid,caption,$(this));
            }); 
        }
        /*收藏操作*/
        function isCollect(isCancel,fid,caption,obj){
        
            $.ajax({
                type:"get",
                cache:false,
                contentType:"application/json;charset=utf-8",
                url:"/Ajax/AjaxMethod.ashx",
                data:{action:"collect",ID:fid,mouldId:options.mouldId,caption:caption,isCancel:isCancel},
                success:function(msg){  
                    if(msg){  
                        init();
                        Menu(); 
                    }
                } 
            });
        } 
        
        /*菜单刷新*/
        function Menu(){
            //获取当前网址
            var curWwwPath = window.document.location.href;
            //获取主机地址之后的目录
            var pathName = window.document.location.pathname;
            var pos = curWwwPath.indexOf(pathName);
            //获取主机地址
            var localhostPaht = curWwwPath.substring(0, pos);
               
            $.post(localhostPaht + "/PageStructure/MasterPage/MenuHandler.ashx?type=RefreshMenu", function(data) {
                    $("#jsddm").empty();
                    $("#jsddm").html(data);
                    $("#jsddm > li").children("a").attr("limit","6");//导航栏菜单显示字数限制
                    $(document.body).limit(); 
                   $(document.body).menuonload();
                    // 
            }); 
        }
    };
})(jQuery);

 

 

 

调用方法：

 

    //列表页Normal HTML加载
    $("#lblList").grid({mouldId:$("#ctl00_FumaHead_hidMouldID").val(),url:"/Ajax/AjaxMethod.ashx"});

 

 

前台HTMl 

<asp:Content ID="Content1" ContentPlaceHolderID="FumaHead" runat="server">
    <%--jquery easy ui--%>
    <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/Common/Js/EasyUI/easyUI/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/Common/Js/EasyUI/easyUI/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/Common/Js/EasyUI/easyUI/demo/demo.css">

    <script type="text/javascript" src="http://www.cnblogs.com/Common/Js/EasyUI/easyUI/jquery.easyui.min.js"></script>

    <script src="http://www.cnblogs.com/Common/Js/My97DatePicker/WdatePicker.js" type="text/javascript"></script>

    <%--end--%>
    <%--弹出框--%>
    <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/Common/Js/artDialog/skins/default.css" />

    <script type="text/javascript" src="http://www.cnblogs.com/Common/Js/artDialog/jquery.artDialog.js"></script>

    <script type="text/javascript" src="http://www.cnblogs.com/Common/Js/artDialog/plugins/iframeTools.js"></script>

    <script type="text/javascript" src="http://www.cnblogs.com/Common/Js/dialog.js"></script>

    <%--end--%>

    <script type="text/javascript" src="http://www.cnblogs.com/Common/Js/grid.js"></script>

    <script type="text/javascript" language="javascript" src="http://www.cnblogs.com/Common/Js/normal.js"></script>

    <form runat="server">
    <div class="pos"><%--当前位置：客户管理&nbsp;&raquo;&nbsp;客户列表--%></div>
    <div class="hspace"></div>
    <table width="98%" align="center" cellpadding="0" cellspacing="0" border="0" class="search">
        <tr>
            <td>
                <!--搜索栏 -->
                <div class="visible">
                    <%--按条件搜索--%>
                    <ul>
                        <li>关键字<input name="txtKeyWord" type="text" />
                        </li>
                        <li>在这儿查找
                            <input id="sltMultiple" name="dept" readonly="readonly" />
                        </li>
                        <li>精确查找
                            <input type="checkbox" name="chkBox" id="sltCheck" />
                        </li>
                    </ul>
                </div>
                <div class="hidden">
                    <ul>
                        <%--更多高级选项--%>
                        <li id="moreAdvice"></li>
                        <%--日期--%>
                        <li id="moreDate"></li>
                    </ul>
                </div>
            </td>
            <td width="200">
                <div class="s_panel">
                    <button id="btnClear">
                        清空</button>
                    <button id="btnSearch">
                        搜索</button>
                </div>
            </td>
            <td width="40">
                <div id="condimore">
                    <div class="show" onclick="openSelect();" title="查看更多搜索条件">
                    </div>
                    <div class="hide" onclick="openSelect();" title="收起更多搜索条件">
                    </div>
                </div>
            </td>
        </tr>
    </table>
    <div class="list">
        <!--右侧列表栏 -->
        <div class="forma">
            <label>
                操作<select   style="width: 140px;" name="operate">
                    <option value="-1">--请选择--</option>
                    <option value="0">新建</option>
                    <option value="1">修改</option>
                    <option value="2">打开</option>
                    <option value="3">删除</option>
                </select>
            </label>
            <label>
                工作流<select style="width: 140px;" name="workfollow"><option value="-1">--请选择--</option>
                </select>
            </label>
        </div>
        <div class="container">
            <div id="lblList">
            </div>
            <div class="clear"></div>
        </div>
        <div class="hspace"></div>
        <div class="forma" >
            <label>
                操作<select style="width: 140px;" name="operate">
                    <option value="-1">--请选择--</option>
                    <option value="0">新建</option>
                    <option value="1">修改</option>
                    <option value="2">打开</option>
                    <option value="3">删除</option>
                </select>
            </label>
            <label>
                工作流<select style="width: 140px;"><option value="-1">--请选择--</option>
                </select>
            </label>
        </div>
        <div class="hspace"></div>
    </div>
    <%--详细页弹出框--%>
    <div class="mask">
    </div>
    <div class="detail" style="display: none;">
        <div class="bar">
            <div id="closed">
            </div>
        </div>
        <dl>
            <span id="winTitle"></span>
            <dd style="overflow-x: auto">
                <span id="winBody"></span>
            </dd>
        </dl>
    </div>
    <%--end--%>
    <input runat="server" type="hidden" id="hidMouldID" />
    <%--隐藏域保存生成的HTML用于清空按钮清空控件值--%>
    <input type="hidden" id="hidSelectHtml" />
    </form>
</asp:Content>

 

 

 

 

后台ashx

　　 

  #region 列表页-Normal
        /// <summary>
        /// 根据模块ID用户Id展示列表页
        /// </summary>
        /// <param name="mouldId">模块ID</param>
        /// <param name="empId">登陆人ID</param>
        /// <param name="pageIndex">页码</param>
        /// <param name="pageSize">每页显示条数</param>
        /// <param name="orderField">排序字段</param>
        /// <param name="orderType">排序规则</param>
        /// <param name="searchSql">搜索条件</param>
        /// <param name="context">context</param>
        public void BindNormalList(string mouldId, string empId, int pageIndex, int pageSize, string orderField, string orderType, string searchField, HttpContext context)
        {
            try
            {
                DataTable StructList = _createPageManager.GetStructPanel(mouldId, empId, 1);
                DataTable TableList = _createPageManager.GetMouldTableLinks(mouldId);
                DataTable FieldList = _createPageManager.GetMouldFieldList(mouldId, empId);
                StringBuilder sbPageHtml = new StringBuilder();
                if (StructList == null || TableList == null || FieldList == null || StructList.Rows.Count <= 0 || TableList.Rows.Count <= 0 || FieldList.Rows.Count <= 0)
                {
                    context.Response.Write("{data:'<div style=\" text-align:center; border-color:Red; font-size:larger；\"   class=\"list\">抱歉，没有找到您要的相关数据！</div>',total:0}");
                    return;
                }
                context.Session["mouldName"] = StructList.Rows[0]["MouldName"].ToString();
                sbPageHtml.Append("<table  class=\"grid\"  cellspacing=\"1\" border=\"0\" id=\"gvList\"><thead><tr>");
                DataRow[] drList = FieldList.Select("IsUse=1 and IsListShow=1 and SQLNo=1", "OrderNo");//显示字段 
                DataRow[] drPkField = FieldList.Select("IsUse=1 and IsPkField=1 and SQLNo=1", "OrderNo");//获取主键
                string pkField = drPkField.Length > 0 ? drPkField[0]["FieldName"].ToString() : "FID"; //主键名 
                string order = string.Empty;
                if (!string.IsNullOrEmpty(orderType))
                    order = orderField + "  " + orderType;
                //数据源
                if (!string.IsNullOrEmpty(searchField))
                    searchField = "  AND   " + searchField;
                DataTable SourceTable = _createPageManager.GetDataSourceByPage(mouldId, StructList, TableList, FieldList, StructList.Rows[0], "", searchField, pageIndex, pageSize, order);
                //全选&操作（收藏、弹出框）
                sbPageHtml.Append("<th align=\"center\"     title=\"全选\"><input type=\"checkbox\" onclick=\"chkAll(this)\" class=\"checkall\"></th>");
                sbPageHtml.Append("<th align=\"center\"  >序号</th>");
                sbPageHtml.Append("<th align=\"center\"   >操作</th>");
                //end 
                int total = Convert.ToInt32(_createPageManager.GetDataSourceByPage(mouldId, StructList, TableList, FieldList, StructList.Rows[0], "", searchField, 0, pageSize).Rows[0][0].ToString());
                foreach (DataRow row in drList)
                {
                    sbPageHtml.AppendFormat("<th align=\"center\"    field=\"{0}\"  title=\"点击标题行{1}排序\" ordertype=\"{2}\">{1}</th>",
                    row["FieldName"].ToString().Replace("'", "‘"), row["FieldCaption"], orderType.Length == 0 ? "desc" : orderType);
                }
                sbPageHtml.Append("</tr></thead><tbody>");
                //获取当前收藏行
                HomePageManager homeManager = new HomePageManager();
                string collectList = homeManager.GetMouldCollectionIdList(empId, mouldId); //已收藏的序号
                var list = collectList.TrimEnd(',').Split(',');
                DataRow[] drBillNoField = StructList.Select("SQLNo=1  AND StrucLevel=1 AND ParSQLNo=0");//用于收藏 传递FieldCaption值
                string billNoField = drBillNoField.Length > 0 ? drBillNoField[0]["BillNoField"].ToString() : "ScNo";
                //end
                //行统计
                string summaryList = _createPageManager.GetSummaryTypeList(mouldId, "1");
                string tableName = _createPageManager.GetTableName(TableList, "1").ToString();
                if (!string.IsNullOrEmpty(summaryList))
                {
                    DataTable dtSummary = _createPageManager.GetSummaryOfRecords(summaryList, tableName, " 1=1 " + searchField);
                    DataRow sumRow = SourceTable.NewRow();
                    for (int i = 0; i < dtSummary.Columns.Count; i++)
                    {
                        sumRow[dtSummary.Columns[i].ColumnName] = dtSummary.Rows[0][dtSummary.Columns[i].ColumnName];
                    }
                    if (SourceTable != null && SourceTable.Rows.Count > 0)
                        SourceTable.Rows.Add(sumRow);
                }
                //end
                StringBuilder sbTable = new StringBuilder();
                bool isMatch;// 是否收藏 ：false表示收藏
                //pkFieldValue :主键值; 
                string pkFieldValue = string.Empty;
                foreach (DataRow rowBody in SourceTable.Rows)
                {
                    pkFieldValue = rowBody[pkField].ToString();
                    #region 校验是否收藏
                    isMatch = true;
                    //isMatch = Regex.IsMatch(collectList.TrimEnd(','), "^((?!" + pkFieldValue + ").)*$"); //正则表达式判断有缺陷
                    if (!string.IsNullOrEmpty(collectList))
                    {
                        for (int i = 0; i < list.Length; i++)
                        {
                            if (!string.IsNullOrEmpty(pkFieldValue) && !string.IsNullOrEmpty(list[i]) && string.IsNullOrEmpty(list[i].Replace(pkFieldValue, "")))
                            {
                                isMatch = false;
                                break;
                            }
                        }
                    }
                    #endregion
                    //checkbox&收藏、弹出框  
                    if (string.IsNullOrEmpty(pkFieldValue) && string.IsNullOrEmpty(rowBody["rownum"].ToString()) && SourceTable.Rows.Count > 0)
                        sbTable.Append("<tr><td align=\"center\" colspan=\"3\">合计</td>");
                    else
                    {
                        sbTable.AppendFormat("<tr><td align=\"center\" ><input id=\"{3}\" type=\"checkbox\" name=\"{3}\"/></td>                                                                                                                  <td>{0}</td>                                                                                                                                                                                  <td align=\"center\" ><div class=\"imgdiv\"><span class=\"{1}\" caption=\"{2}\" fid=\"{3}\" style=\"cursor:pointer;\" title=\"收藏\"></span>                                              <span class=\"img_detail\" onclick=\"showDetail({3})\" fid=\"{3}\" style=\"cursor: pointer; \" title=\"打开\"> </span></div></td>"
                            , rowBody["rownum"], (isMatch ? "img_uncollect" : "img_collect"), (string.IsNullOrEmpty(billNoField) ? "" : rowBody[billNoField]), pkFieldValue);
                    }
                    foreach (DataRow row in drList)
                    {
                        sbTable.AppendFormat("<td align=\"center\">{0}</td>", rowBody[row["FieldAlias"].ToString()].ToString().Replace("'", "‘"));
                    }
                    sbTable.Append("</tr>");
                }
                //无信息提醒
                if (SourceTable == null || SourceTable.Rows.Count == 0)
                {
                    sbTable.AppendFormat("<tr align=\"center\" ><td colspan=\"{0}\"> 抱歉，没有找到符合您搜索条件的数据 </d></tr>", (drList.Length + 3));
                }
                sbPageHtml.Append(sbTable);
                sbPageHtml.Append("</tbody></table>");
                context.Response.Write("{data:'" + sbPageHtml.ToString() + "',total:" + total + "}");
            }
            catch (Exception ex)
            {
                context.Response.Write("{data:'<div style=\"text-align:center; border-color:Red; font-size:larger\"   class=\"list\">" + ex.Message + "</div>',total:0}");
            }
        }



        #endregion

 

 

部分主要源码