分页展现 | fenyeHtml

在展现列表时通常会用到分页分页可以去引用ajax的封装包进行分页显示也可以自己写一个分页

以下就是自己编写的分页

现在需要展现的框架内设置一个ID 再加上格式再加上分页控件

 <div class="row" id="imglist">
                </div>
                <%--分页控件--%>
                <div class="row">
                    <div class="col-md-12 text-right">
                        <nav aria-label="Page navigation">
                            <ul class="pagination  pagination-lg" id="fenye">
                            </ul>
                        </nav>
                    </div>
                </div>

先引用一个正则搜索需要取得值

//获取Url参数
function getUrlParam(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    if (r != null)
        return unescape(r[2]);
    return null;
}

然后在开始写js

<script type="text/javascript">
    //记录一页有几条数据
    var count = 9;
    //记录产品分类
    var type = "";
    //页面加载完成后
    $(function () {
        //当前第一页
        var page = 1;
        //判断  如果Type等于空  则Type等于正则取到的Type
        if (getUrlParam("Type") != null) {
            type = getUrlParam("Type");
        }

        GetImgList(page)
        //更改类型方法


    });
    function GebgGai(LeiXing) {
        Type = LeiXing;
        var page = 1;
        GetImgList(page)
    }
    //前台后台请求数据方法  传递当前第几页   一夜多少条
    function GetImgList(page) {
        $.ajax(
            {
                type: "POST",
                url: "../Etp/EtpList.ashx?action=GetQueryList",
                data: { page: page, count: count, type: type },
                contentType: "application/x-www-form-urlencoded",
                dataType: "json",
                async: false,
                cache: false,
                success: function (data) {
                    debugger;
                    //总条数
                    var total = data.total;
                    //将查询到的图片列表数据赋给imgList
                    var imgList = data.rows;
                    var imgHtml = "";
                    //遍历查询到的图片列表数据并且拼接成展现出来的HTML
                    for (var i = 0; i < imgList.length; i++) {
                        //imgList等于imgList+div框架的Class 跟属性一起写过来  用''来分开后台代码和前台代码
                        imgHtml = imgHtml + '<div class=" col-md-4"  style="height: 274px;"><div style = "width: 314.83px; height: 214px;" class="cptu" ><a href="ProductDetails.aspx?FId=' + imgList[i].FId + '"><img style="width: 314.83px; height: 214px;" src="' + imgList[i].FImg + '" /></a></div ><div class="col-md-3" style="height: 40px; text-align: center; width: 341.83px; margin-left: -15px;"><a href="ProductDetails.aspx?FId=' + imgList[i].FId + '" style="text-decoration: none; line-height: 40px; font-size: 20px;">' + imgList[i].FName + '</a></div></div>';
                    }//清除原有数据
                    $("#imglist").html("");
                    //渲染新的图片列表数据
                    $("#imglist").html(imgHtml);
                    //计算分页  总条数 除 每页的条数
                    var fenye = Math.ceil(total / count);
                    //分页html
                    var fenyeHtml = "";
                    //判断是否要头
                    if (page - 2 > 1) {
                        if (fenye > 5) {
                            //要头
                            fenyeHtml = '<li><a href ="javascript:void(0);" onclick="GetImgList(1)" aria - label="Previous" ><span aria-hidden="true">&laquo;</span></a ></li >';
                        }
                        ///处理的 678
                        if (fenye - page <= 2) {
                            //不要尾
                            //page=4 fenye=5
                            //向前加4-(fenye-page)
                            for (var i = 4 - (fenye - page); i > 0; i--) {
                                fenyeHtml = fenyeHtml + '<li><a href="javascript:void(0);" onclick="GetImgList(' + (page - i) + ')">' + (page - i) + '</a></li>';
                            }
                            fenyeHtml = fenyeHtml + '<li><a href="javascript:void(0);"  style="background-color:red" onclick="GetImgList(' + page + ')">' + page + '</a></li>';
                            //加几=fenye-page
                            for (var i = 1; i <= fenye - page; i++) {
                                fenyeHtml = fenyeHtml + '<li><a href="javascript:void(0);" onclick="GetImgList(' + (page + i) + ')">' + (page + i) + '</a></li>';
                            }
                        }
                        else {
                            debugger;
                            //正常+2
                            fenyeHtml = fenyeHtml + '<li><a href="javascript:void(0);"  style="background-color:red"  onclick="GetImgList(' + page + ')">' + page + '</a></li>';
                            fenyeHtml = fenyeHtml + '<li><a href="javascript:void(0);"  onclick="GetImgList(' + (page + 1) + ')">' + (page + 1) + '</a></li>';
                            fenyeHtml = fenyeHtml + '<li><a href="javascript:void(0);" onclick="GetImgList(' + (page + 2) + ')">' + (page + 2) + '</a></li>';

                            //要尾
                            fenyeHtml = fenyeHtml + '<li>< a href = "javascript:void(0);" onclick="GetImgList(' + fenye + ')" aria - label="Next" ><span aria-hidden="true">&raquo;</span></a ></li >';
                        }
                    }
                    else {
                        //1 2 3
                        //不要头
                        //如果小于3
                        if (page < 3) {
                            //12
                            //减几=page-1
                            if (page == 2) {
                                fenyeHtml = fenyeHtml + '<li><a href="javascript:void(0);"  onclick="GetImgList(1)">1</a></li>';
                            }
                            //正常值
                            fenyeHtml = fenyeHtml + '<li><a href="javascript:void(0);"  style="background-color:red"  onclick="GetImgList(' + page + ')">' + page + '</a></li>';
                        }
                        else {
                            //3
                            fenyeHtml = fenyeHtml + '<li><a href="javascript:void(0);"  onclick="GetImgList(1)">1</a></li>';
                            fenyeHtml = fenyeHtml + '<li><a href="javascript:void(0);"  onclick="GetImgList(2)">2</a></li>';
                            fenyeHtml = fenyeHtml + '<li><a href="javascript:void(0);"  style="background-color:red" onclick="GetImgList(3)">3</a></li>';
                        }


                        //page+3 是不是大于分页数
                        if (page + (5 - page) > fenye) {
                            //不能加那么多 加几= fenye-page
                            for (var i = 1; i <= fenye - page; i++) {
                                fenyeHtml = fenyeHtml + '<li><a href="javascript:void(0);" onclick="GetImgList(' + (page + i) + ')" >' + (page + i) + '</a></li>';
                            }
                        }
                        else {
                            //正常加 5-page
                            for (var i = 1; i <= 5 - page; i++) {
                                fenyeHtml = fenyeHtml + '<li><a href="javascript:void(0);" onclick="GetImgList(' + (page + i) + ')">' + (page + i) + '</a></li>';
                            }
                        }

                        if (fenye > 5) {
                            fenyeHtml = fenyeHtml + '<li>< a href = "javascript:void(0);" onclick="GetImgList(' + fenye + ')" aria - label="Next" ><span aria-hidden="true">&raquo;</span></a ></li >';
                        }

                    }

                    //清除原分页
                    $("#fenye").html("");
                    //载入新分页 
                    $("#fenye").html(fenyeHtml);

                }
            });
    }
</script>

在开始编写后台代码后台代码在ashx里边编写

/// <summary>
        /// 前台分页查询产品列表
        /// </summary>
        /// <param name="context"></param>
        public void GetQueryList(HttpContext context)
        {
            //声明一个动态类   初始化一个新的动态类方法
            dynamic OnjJson = new ExpandoObject();
            //取值  当前第几页
            int page = Convert.ToInt32(context.Request["page"]);
            //取值 每页几条数据
            int count = Convert.ToInt32(context.Request["count"]);
            //取值 当前的类型
            string Type =context.Request["Type"];
            //最小条数
            int offset = (page - 1) * count;
            //声明一个新的BLL方法
            Maticsoft.BLL.T_Products productsBll = new Maticsoft.BLL.T_Products();
            //总条数从0开始
            int total = 0;
            //返回数据的行数内容
            OnjJson.rows = productsBll.GetQueryList(count, offset, Type, out total);
            //返回数据的总条数
            OnjJson.total = total;
            context.Response.Write(JsonConvert.SerializeObject(OnjJson));
            context.Response.End();
        }

调用BLL方法

/// <summary>
        /// 前台分页查询产品数据
        /// </summary>
        /// <param name="limit">条数</param>
        /// <param name="offset">最小条数</param>
        /// <param name="Type">产品的类型</param>
        /// <param name="total">返回总条数 out返回（给后台一张纸（纸默认是空白的且不可以向后台传） 后台要把纸回给前台。纸上可以输出值）</param>
        /// <returns></returns>
        public DataTable GetQueryList(int limit, int offset, string Type, out int total)

        {
            return dal.GetQueryList(limit, offset, Type, out total);
        }

通过BLL调用dal方法并使用SQL语句查询并返回查询到的数值

/// <summary>
        /// 前台分页查询产品数据
        /// </summary>
        /// <param name="limit">条数</param>
        /// <param name="offset">最小条数</param>
        /// <param name="Type">产品的类型</param>
        /// <param name="total">返回总条数</param>
        /// <returns></returns>
        public DataTable GetQueryList(int limit, int offset, string Type, out int total)
        {
            //判断前台传过来的Type是否为空   如果为空则查询全部信息  如果有Type 则查询Type的信息
            if(Type=="")
            {
                //使用sql语句分页查询数据
                string sql = "select top (@limit) * from (select row_number() over(order by FId desc) as rownumber,* from T_Products ) temp_row where rownumber>@offset ";
                //计算数据总条数
                string totalsql = "select COUNT(1) from T_Products ";
                total = Convert.ToInt32(SqlHelper.ExecuteScalar(SqlHelper.connStr, totalsql));
                //使用键值对 对sql语句里的占位建进行替换
                SqlParameter[] para = new SqlParameter[]
                {
                new SqlParameter("@limit",SqlDbType.Int),
                new SqlParameter("@offset",SqlDbType.Int),

                };
                para[0].Value = limit;
                para[1].Value = offset;
                //返回一个Table
                return SqlHelper.ExecuteDataTable(SqlHelper.connStr, sql, para);

            }
            else
            {
                //有类型 就使用以下方法查询数据

                //使用sql语句分页查询数据
                string sql = "select top (@limit) * from (select row_number() over(order by FId desc) as rownumber,* from T_Products where Ftype=@Ftype) temp_row where rownumber>@offset ";

                //计算数据总条数
                string totalsql = "select COUNT(1) from T_Products where Ftype=@Ftype";
                total = Convert.ToInt32(SqlHelper.ExecuteScalar(SqlHelper.connStr, totalsql, new SqlParameter[] {
            new SqlParameter("@Ftype",Type)
            }));
                //使用键值对 对sql语句里的占位建进行替换
                SqlParameter[] para = new SqlParameter[]
                {
                new SqlParameter("@limit",SqlDbType.Int),
                new SqlParameter("@offset",SqlDbType.Int),
                new SqlParameter("@Ftype",Type)
                };
                para[0].Value = limit;
                para[1].Value = offset;
                para[2].Value = Type;
                //返回一个Table
                return SqlHelper.ExecuteDataTable(SqlHelper.connStr, sql, para);

            }

        }

最后将返回值填写到imgHtml = imgHtml + ’ ‘ 就可以了