zoukankan      html  css  js  c++  java
  • 分页

    这个分页使用EF,差别不是很大,不过逻辑比较清晰,整个交互过程也简单了很多,一加载完页面在$(function(){})方法内调用Load(1, 10)就可以预加载第一页的数据,在Load()方法中实现一个ajax的异步请求,来请求数据和分页html代码。

    1、JS代码

     1 /*
     2 *新闻健康资讯JS
     3 *
     4 */
     5 
     6 $(function () {
     7     $('[data-toggle="tooltip"]').tooltip({ html: true });
     8     Load(1, 10);
     9     
    10 });
    11 
    12 
    13 function Load(pageIndex, pageSize) {
    14 
    15     $.post("/News/LoadNewsInfo", { "pageIndex": pageIndex, "pageSize": pageSize }, function (rst) {
    16         var content = $("#news_list_table");//获取内容div
    17         var total = rst["Total"];
    18         if (total <= 0){
    19             content.html("<h2>暂无健康资讯信息!</h2>");
    20             return;
    21         }
    22         content.html("");
    23         for (var i = 0; i < rst["Total"]; i++) {
    24             content.append("<div class='news_list_item'><span class='news_list_title'><a href='javascript:void(0);'>" + rst["Row"][i].Title + "</a></span><span class='news_list_foornumber'>#" + parseInt(i + 1) + "</span><br /><span class='news_list_description'>--------------------</span> <span class='news_list_description'>"+rst["Row"][i].Remark+"</span></div>");
    25         }
    26 
    27         $("#pageHtml").html(rst["PageHtml"]);
    28 
    29 
    30     });
    31 }
    JS

    2、Html代码

     1  <!--【普通的资讯】-->
     2             <div class="news_list" id="news_list_table">
     3                              
     4 
     5             </div><!--普通资讯结束-->
     6         <!--【标题和描述展示结束】-->
     7 
     8         <div id="pageHtml" class="pageHtml"><!--【分页开始】-->
     9             
    10         </div><!--【分页结束】-->
    Html

    3、后台代码

     1 /// <summary>
     2         /// 【分页加载资讯信息】
     3         /// </summary>
     4         /// <returns></returns>
     5         public ActionResult LoadNewsInfo()
     6         {
     7             //创建数据上下文
     8             DBContext = new WebManagementDBEntities();
     9 
    10             //获取页码和每页条数
    11             int pageIndex = Request["pageIndex"] == null ? 1 : int.Parse( Request["pageIndex"]);
    12             int pageSize = Request["pageSize"] == null ? 10 : int.Parse(Request["pageSize"]);
    13 
    14             //获取相关数据的总数
    15             int total = DBContext.HealthInfo.Where(u=>u.DelFlag == 0 && u.IsHot == 0).Count();
    16             //获取数据
    17             var list = DBContext.HealthInfo.Where(u => u.DelFlag == 0 && u.IsHot == 0).OrderBy(u=>u.SubDate).Skip(pageSize * (pageIndex - 1)).Take(pageSize);
    18             
    19             //要来做数据处理的新数组
    20             ArrayList s = new ArrayList();
    21             foreach(var row in list)
    22             {
    23                 var hel = new
    24                 {
    25                     Title = row.Title,
    26                     Remark = row.Remark
    27                 };
    28                s.Add(hel);
    29             }
    30 
    31             //分页导航的Html代码
    32             string pageHtml = Page.ShowNewsPageNavigate(pageIndex, pageSize, total);
    33 
    34             //把返回条数,数据行,分页的html代码封装成Json格式
    35             var data = new
    36             {
    37                 Total = s.Count,
    38                 Row = s.ToArray(),
    39                 PageHtml = pageHtml
    40 
    41             };
    42             return Json(data, JsonRequestBehavior.DenyGet);
    43         }
    C#代码
  • 相关阅读:
    perl 安装Rex
    salt-stack 客户端运行需要安装python
    Lock wait timeout exceeded
    敏捷BI与数据驱动机制
    MyBatis传入参数为list、数组、map写法
    angular2.js:2 Uncaught ReferenceError: System is not defined
    谈谈企业的数据工作!——企业的数据分析能力金字塔
    SyntaxError: inconsistent use of tabs and spaces in indentation
    Eclipse Save Action功能
    TypeError: unicode strings are not supported, please encode to bytes: 'hu'
  • 原文地址:https://www.cnblogs.com/reader/p/5486411.html
Copyright © 2011-2022 走看看