前台分页数据,适合数据少量的时候,因为分页的数据是从后台获取的,大数据的话不建议使用
先看下前台代码:
@ { Layout=null}!DOCTYPE html html head meta name=' viewport ' content=' width=device-width '/script src=' http : ~/kk pager/lib/jquery-1。10 .2 .量滴js '/script script src=' http : ~/kk寻呼机/src/kk寻呼机。js '/脚本链接href=' ~/kk pager/src/kk pager _ orange。CSS“rel=”外部no follow“rel=”样式表/title index/title/headymargin :0 auto ' div class=' table-responsive ' id=' main content '/div div id=' kk pager '/div/div/body/html脚本类型=' text/JavaScript ' function getparameter(name){ var reg=new regexp('(^|)' name '=([^]*)(|$)');var r=窗口。位置。搜索。substr(1).match(reg);if (r!=null)返回unescape(r[2]);返回null}函数GetExcelTable(pageindex) { $ .ajax({ url: '/Home/index2 ',dataType: 'json ',type: 'POST ',data : { ' page index ' : page index }),成功:函数(数据){ if(数据。状态=' 0 '){ $(' #主内容').empty();$(“# main content”).html(' div style=' text-align : center;颜色:红色氘暂无数据/H2/div’;返回;} $(“# main content”).html(数据。数据);//定义分页样式var总计数=Parseint(数据。页数);var PageSize=ParSeint(数据。页面大小);var页码=GetParameter('页面索引');//该参数为插件自带,不设置好,调用数据的时候当前页码会一直显示在第一页if(!页码){页码=页码索引;} var TotalPages=TotalCount % PageSize==0?总计数/页面大小:(parsent(总计数/页面大小)1);kk寻呼机。GeneraL page HTMl({ pno :页码,total: totalPages,totalRecords: totalCount,mode: 'click ',单击: function(n){ this。选择页面(页码);搜索页面(n);返回false} },真);},错误:函数(jqXHR,textStatus,错误通过){ } });}//init $(function(){ GetExcelTable(1)});//ajax翻页函数搜索页面(n){ GetExcelTable(n);}/脚本后台代码:
使用系统;使用系统。集合。通用;使用系统Linq .使用系统。文字;使用系统网络.使用系统网络。手动音量调节命名空间MvcKKpager .控制器{公共类家庭控制器:控制器{私有只读int页面大小=2;////GET:/Home/public动作结果索引(){ return View();}公共行动结果索引2(字符串页面索引){ ListString list=new ListString();名单。添加('保护环境');名单。添加('保护环境');名单。添加('保护环境');名单。添加('保护环境');名单。添加('保护环境');var persons=(从列表中的p中选择p ).跳过((int .解析(页面索引)- 1) *页面大小)。take(PageSize);StringBuilder builder=new StringBuilder();建筑商。追加(' table class= ' table table-stripped B- t B- light text-sm ' id= ' comptable ');建筑商。追加(' theadtrth时间/th展示/th点击(点击率)/th激活(激活率)/th平均点击单价/th实际激活成本/th消耗/th/tr/the ad ';建筑商。追加(' t body ');foreach (var项目中的人员){建设者.追加(' tr class= ' trStyle ');建筑商。追加(' td '项/TD ');建筑商。追加(' td '项/TD ');建筑商。追加(' td '项/TD ');建筑商。追加(' td '项/TD ');建筑商。追加(' td '项/TD ');建筑商。追加(' td '项/TD ');建筑商。追加(' td '项/TD ');建筑商。追加('/tr ');}建设者。追加(“/t body/table”);定义变量结果=new { status='1 ',data=builder .ToString(),pagecount=list .计数()。ToString(),pagesize=pageSize .ToString()};返回Json(结果);} }}也没什么好说的
看下样式吧
总结
以上所述是小编给大家介绍的kkpager实现创建交互式、快速动态网页应用的网页开发技术分页查询功能实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!