分页查询表格逻辑及源码

前台写数据展现时有时需要用到分页以下是自己写的分页源码

HTML页面的格式给DIv加一个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>

然后添加JQ引用

在写一个Jq 编写写入正则方法加入引用

//获取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;
}

然后取值并使用Ajax方法传入后台

<%--展现图片列表及分页--%>
<script type="text/javascript">
    //记录每页有多少条数据  默认4条
    var count = 4;
    //记录产品的类型
    var Type = 2;
    //页面加载后运行此方法
    $(function () {

        //请求数据
        //记录当前第几页   默认第一页
        var page = 1;
        console.log(getUrlParam("Type"));
        if (getUrlParam("Type") != null) {

            type = getUrlParam("Type");
        }
        GetImgList(page)
    });
    //更改类型方法
    function GengGai(leixing) {
        Type = leixing;
        var page = 1;
        GetImgList(page)
    }
    //前台后台请求数据的方法   传递当前第几页  一页多少条
    function GetImgList(page) {

        $.ajax({
            type: "POST",
            url: "../News/NewsList.ashx?action=GetNewsByType",
            data: { page: page, count: count, Type: Type },
            contentType: "application/x-www-form-urlencoded",
            dataType: "json",
            async: false,
            cache: false,
            success: function (data) {
                
                //总条数
                var total = data.total;
                //查询到的图片列表数据
                var imgList = data.rows;
                var imgHtml = "";
                //遍历查询到的图片列表数据并且拼接成展现出来的HTML
                for (var i = 0; i < imgList.length; i++) {
                    imgHtml = imgHtml + '<div class="col-md-6" ><div style="height: 120px; margin-top: 10px;"><div class="w-590-h-120"><div class="row"><div class="red"><a href="Details.aspx?FId=' + imgList[i].FId + '"><div class="col-md-3" style="margin-top: 10px; margin-left: 10px;"><img style="width: 115px; height: 100px;" src="' + imgList[i].FImg + '" /></div><div class="col-md-6" style="height: 100px; margin-top: 10px;"><p>' + imgList[i].FAbout + '</p></div><div class="col-md-3"><div class="w-100-h-100-t-10"><p style="font-size: 17px; line-height: 100px; text-align: center">' + changeDateFormat(imgList[i].FTime) + '</p></div></div></a></div></div></div></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>

记住里面有一个For循环是循环前台展现的框架代码 ‘+ imgList[i].FId + ’属于展现图片或其他的代码

然后是后台的代码

也就是aspx.cs 或ashx里的代码

/// <summary>
        /// 根据Type分页查询列表数据
        /// </summary>
        /// <param name="context"></param>
        public void GetNewsByType(HttpContext context)
        {
            //声明一个动态类   初始化动态类
            dynamic ObjJson = new ExpandoObject();
            //取值  每页几条数据
            int count = Convert.ToInt32(context.Request["count"]);
            //取值 当前页数
            int page = Convert.ToInt32(context.Request["page"]);
            //取值   查询的类型
            int Type = Convert.ToInt32(context.Request["Type"]);
            //最小条数
            int offset = (page - 1) * count;
            //生命一个新的BLL方法
            Maticsoft.BLL.T_News newsBll = new Maticsoft.BLL.T_News();
            //总条数从0开始
            int total = 0;
            ObjJson.rows = newsBll.GetNewsByType(count, offset, Type, out total);
            ObjJson.total = total;
            context.Response.Write(JsonConvert.SerializeObject(ObjJson));
            context.Response.End();
        }

然后是BLL源码

 /// <summary>
        /// 前台根据Type分页查询T_News数据
        /// </summary>
        /// <param name="limit">每页的条数</param>
        /// <param name="offset">当前第几页</param>
        /// <param name="Type">类型</param>
        /// <param name="total">总条数</param>
        /// <returns></returns>
        public DataTable GetNewsByType(int limit, int offset, int Type, out int total)
        {
            return dal.GetNewsByType(limit, offset, Type, out total);
        }

最后是DAL源码一定要写正确SQL语句

/// <summary>
        /// 前台根据Type分页查询T_News数据
        /// </summary>
        /// <param name="limit">每页的条数</param>
        /// <param name="offset">当前第几页</param>
        /// <param name="Type">类型</param>
        /// <param name="total">总条数</param>
        /// <returns></returns>
        public DataTable GetNewsByType(int limit, int offset, int Type, out int total)
        {
            string sql = "select top (@limit) * from (select row_number() over(order by FId desc) as rownumber,*from T_News where FType = @FType)as temp_row where rownumber> @offset ";
            string totalsql = "select COUNT(1) from T_News where FType = @Ftype";
            total = Convert.ToInt32(SqlHelper.ExecuteScalar(SqlHelper.connStr, totalsql, new SqlParameter[]
            {
                new SqlParameter("@FType",Type)
            }));
            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;
            return SqlHelper.ExecuteDataTable(SqlHelper.connStr, sql, para);


        }

格式写对传的类型数据不能是中文中文容易乱码

下面是效果图

新手写的不好多多谅解

分页查询表格逻辑 及源码

猜你喜欢

分页查询表格逻辑及源码