首页 > 代码库 > 分布视图分页
分布视图分页
//数据库中新建存储过程：
1 USE [SAAS0626] 2 GO 3 /****** Object: StoredProcedure [dbo].[Paging] Script Date: 2017/8/7 11:03:32 ******/ 4 SET ANSI_NULLS ON 5 GO 6 SET QUOTED_IDENTIFIER ON 7 GO 8 ALTER PROCEDURE [dbo].[Paging] 9 ( @TableName VARCHAR(1000), --表名,多表时使用 tA a inner join tB b On a.AID = b.AID 10 @Fields NVARCHAR(2000) = ‘*‘, --读取字段 11 @Condition NVARCHAR(3000) = ‘‘, --Where条件 12 @Sort NVARCHAR(200) = ‘‘, --排序字段，不能为空 13 @CurrentPage INT = 1, --开始页码 14 @PageSize INT = 10, --页大小 15 @GroupBy varchar(200), --分组语句 16 @RecordCount INT = 0 OUT 17 ) 18 AS 19 20 DECLARE @strWhere VARCHAR(2000) 21 DECLARE @strGroup VARCHAR(200) 22 DECLARE @strsql NVARCHAR(3900) 23 24 IF @Condition IS NOT NULL AND len(ltrim(rtrim(@Condition)))>0 25 BEGIN 26 SET @strWhere = ‘ WHERE ‘ + @Condition + ‘ ‘ 27 END 28 ELSE 29 BEGIN 30 SET @strWhere = ‘‘ 31 END 32 33 IF @GroupBy IS NOT NULL AND len(ltrim(rtrim(@GroupBy)))>0 34 BEGIN 35 SET @strsql = ‘SELECT @RecordCount = Count(1) FROM (SELECT 1 AS total FROM ‘ + @TableName + @strWhere + ‘ group by ‘ + @GroupBy + ‘) as t‘ 36 SET @strGroup = ‘ GROUP BY ‘ + @GroupBy + ‘ ‘ 37 END 38 ELSE 39 BEGIN 40 SET @strsql = ‘SELECT @RecordCount = Count(1) FROM ‘ + @TableName + @strWhere 41 SET @strGroup = ‘‘ 42 END 43 44 45 EXECUTE sp_executesql @strsql, N‘@RecordCount INT output‘, @RecordCount OUTPUT 46 47 IF @CurrentPage = 1 --第一页提高性能 48 BEGIN 49 SET @strsql = ‘SELECT TOP ‘ + str(@PageSize) + ‘ ‘ + @Fields + ‘ FROM ‘ + @TableName + ‘ ‘ + @strWhere + @strGroup + ‘ ORDER BY ‘+ @Sort 50 END 51 ELSE 52 BEGIN 53 DECLARE @startRecord NVARCHAR(50) 54 DECLARE @endRecord NVARCHAR(50) 55 SET @startRecord = CONVERT(NVARCHAR(50),(@CurrentPage - 1) * @PageSize + 1) 56 SET @endRecord = CONVERT(NVARCHAR(50),@CurrentPage * @PageSize) 57 SET @strsql = ‘SELECT * FROM ( 58 SELECT ‘+ @Fields + ‘,ROW_NUMBER() OVER(ORDER BY ‘ + @Sort + ‘) AS rownum FROM ‘+ @TableName + @strWhere + @strGroup + ‘) AS XX 59 WHERE rownum BETWEEN ‘+ @startRecord + ‘ AND ‘ + @endRecord 60 END 61 EXEC(@strsql) 62 RETURN
建立Model:
public class PageData<T> { public PageData() { this._Items = new List<T>(); } private IList<T> _Items; public IList<T> Items { get { return _Items; } set { _Items = value; } } public int RecordCount { get; set; } public int CurrentPage { get; set; } public int PageCount { get; set; } } public class PageParams { /// <summary> /// 表名（多表使用tA a inner join tB b On a.AID = b.AID） /// </summary> public string TableName { get; set; } private string _Fileds = "*"; /// <summary> /// 查询字段 /// </summary> public string Fields { get { return _Fileds; } set { _Fileds = value; } } private string _Sort = "ID"; /// <summary> /// 排序字段（不能为空） /// </summary> public string Sort { get { return _Sort; } set { _Sort = value; } } /// <summary> /// 查询条件 /// </summary> public string Condition { get; set; } private int _CurrentPage = 1; /// <summary> /// 当前页数（从1开始） /// </summary> public int CurrentPage { get { return _CurrentPage; } set { _CurrentPage = value; } } private int _PageSize = 10; /// <summary> /// 每页条数 /// </summary> public int PageSize { get { return _PageSize; } set { _PageSize = value; } } public string GroupBy { get; set; } /// <summary> /// 总记录数 /// </summary> public int RecordCount { get; set; } }
Js代码(jquery.pagination.min.js)：
1 (function(b){var a={init:function(d,c){return(function(){a.fillHtml(d,c);if(d[0]&&!b._data(d[0],"events")){a.bindEvent(d,c)}})()},fillHtml:function(d,c){return(function(){var l=c.current,h=c.pageCount,f=[],m,g,e=10;if(isNaN(h)){d.html("");return}if(l<=1){m=1;g=e;if(g>h){g=h}}else{if(l>=h){m=h-e+1;g=h;if(m<=0){m=1}}else{var k=Math.ceil(e/2);m=l-k;if(m<=0){m=1}g=m+e-1;if(g>h){g=h}if(m>h){g=h}}}if(l>1){f.push(‘<li><a href="javascript:;" class="first">首页</a></li>‘);f.push(‘<li><a href="javascript:;" class="prev">上一页</a></li>‘)}else{f.push(‘<li class="disabled"><span>首页</span></li>‘);f.push(‘<li class="disabled"><span>上一页</span></li>‘)}for(var j=m;j<=g;j++){if(j==l){f.push(‘<li class="disabled"><span class="current">‘+j+"</span></li>")}else{f.push(‘<li><a href="javascript:;" class="number">‘+j+"</a></li>")}}if(l<h){f.push(‘<li><a href="javascript:;" class="next">下一页</a></li>‘);f.push(‘<li><a href="javascript:;" class="last">末页</a></li>‘)}else{f.push(‘<li class="disabled"><span>下一页</span></li>‘);f.push(‘<li class="disabled"><span>末页</span></li>‘)}d.html(f.join(""))})()},bindEvent:function(d,c){return(function(){d.on("click","a",function(){var e;switch(this.className){case"first":e=1;break;case"prev":var f=parseInt(d.find("span.current").text(),10);e=f-1;break;case"number":e=parseInt(this.innerText);break;case"next":var f=parseInt(d.find("span.current").text(),10);e=f+1;break;case"last":e=c.pageCount;break}typeof c.callback=="function"&&c.callback(e)})})()}};b.fn.Paging=function(d){var e={current:1,pageCount:1,pageSize:10,callback:function(){}};var c=b.extend({},e,d);a.init(this,c)}})(jQuery);
View视图中添加分页样式:
1 <div class="text-left"> 2 <div class="pagesize"> 3 每页 4 <select id="positions-pagesize"> 5 <option value="10">10</option> 6 <option value="30">30</option> 7 <option value="50">50</option> 8 </select> 9 条 共 <span id="pCount"></span> 页 共 <span id="rCount"></span> 条记录 10 </div> 11 <ul class="pagination" id="positionPager"> 12 <li class="disabled"><span>上一页</span></li> 13 <li class="disabled"><span class="current">1</span></li> 14 <li class="disabled"><span>下一页</span></li> 15 </ul> 16 </div>
需要引用JS<script src="http://www.mamicode.com/~/JS/Common/jquery.pagination.min.js"></script>
分布视图中需要添加隐藏button存储参数:
1 <input id="pageCount" type="hidden" value="@(Model != null ? Model.PageCount : 0)" /> 2 <input id="reCount" type="hidden" value="@(Model != null? Model.RecordCount : 0)" />
Js代码：
1 //页码显示条数触发事件 2 $("#positions-pagesize").on("change", function () { LoadOrderReply(1, this.value); }) 3 4 //首页刷新 5 LoadOrderReply(); 6 function LoadOrderReply(page, size) { 7 size = $("#positions-pagesize").val(); 8 $("#orderTb").load("/OrderReply/OrderReplyPartial", { "page": page || 1, "size": size || 10 }, function () { 9 //显示第几页，共几条记录 10 if ($("#pageCount").val() != 0) { 11 $("#pCount").text($("#pageCount").val()); 12 $("#rCount").text($("#reCount").val()); 13 } 14 else { 15 $("#pCount").text(0); 16 $("#rCount").text(0); 17 } 18 19 //触发鼠标停留显示 20 $("[data-toggle=‘popover‘]").popover({ html: true }); 21 $("[data-toggle=‘popover‘]").popover(); 22 $("#positionPager").Paging({ 23 current: page, 24 pageCount: parseInt($("#pageCount").val(), 10), 25 callback: function (p) { LoadOrderReply(p, size); } 26 }); 27 }); 28 }
分布视图分页
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。