分页查询表格逻辑 及源码 - 透明的鱼！
前台写数据展现时 有时需要用到分页 以下是自己写的分页源码
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">«</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">»</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">»</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); }
格式写对 传的类型数据不能是中文 中文容易乱码
下面是效果图
新手 写的不好 多多谅解
版权声明：本文为yutang-wangweisong原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。