zoukankan      html  css  js  c++  java
  • 分页

    分页是因为由于一些信息条数过多,在一个页面不能全部显示出来,或者全部显示出来会有很长的滚动条,这就需要分页来实现了。

    分页需要两个方法。

    第一个方法是根据每页显示多少条信息和当前页的ID,直接查询到指定页的数据;所需要的两个参数:①每页多少条信息②当前页的ID

    第二个方法是根据每页显示多少条信息,并且获取到总的信息条数,用"总信息条数"/"每页显示多少条信息",以此来获得总的页数。 需要的参数是:①每页显示多少条信息

    下来开始显示代码:注意在路由里要设置默认id=1

    1、Models
    namespace 分页.Models
    {
        public class CarBF
        {
            private MyDBDataContext _context = new MyDBDataContext();
            //需要写两个方法。
            //一个方法是点击指定页数,显示出指定页数的信息。需要两个参数,一个参数是一页几条信息;另一个参数是当前页。
            public List<car> SelectPageSize(int PageSize,int PageNo) //第一个参数是一页显示几条信息,另一个参数是当前页
            {
                var query = _context.car.Skip(PageSize *( PageNo - 1)).Take(PageSize);//Skip跳过几条信息,Take取几条信息。 假如是第一页,就跳过零条信息,显示Pagesize条信息
                return query.ToList();
            }
    
            //另一个方法是获取到总页数的方法。
            public int SelectPageCount(int PageSize) //参数是每页几条信息
            {
                int Count = _context.car.Count();//获取到car表里一共多少条信息
                int PageCount = (int)Math.Ceiling((1.0*Count) / PageSize); //总页数=总的信息数/每页显示的信息数
                return PageCount;        
            }
            
        }
    }
    
    
    二、Controllers
     public class HomeController : Controller
        {
           
            private const int PageSize = 3; //定义一个常量每页显示3条信息
            public ActionResult Index(int id) //里面的参数是当前页,这里默认的当前页为第1页
            {
                //需要一个值来获取当前页
                ViewBag.PageNo = id;//id就是当前页
                //下面开始获取总的页数
                int PageCount=new CarBF().SelectPageCount(PageSize);//这是总页数
                ViewBag.PageCount = PageCount;//把总页数赋给ViewBag.PageCount
                //下面开始做一个总页数的下拉列表
                List<int> xialalist = new List<int>();//做一个int类型的泛型集合
                for (int i = 1; i <= PageCount; i++)//给这个集合赋值
                {
                    xialalist.Add(i);
                }
                //造一个下拉的集合
                SelectList sec = new SelectList(xialalist,id);//把刚才的集合做成下拉列表
                ViewBag.sec = sec;//将这个下拉列表的集合赋给ViewBag.sec
         
                
                //获取到当前页的信息
                List<car> list=new CarBF().SelectPageSize(PageSize,id); //这里是查出来当前页为第1页的信息
                return View(list);
            }
    
        }
    }
    
    
    3、Views
    @{
        Layout = null;
    }
    @using 分页.Models;
    @model List<car>
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Index</title>
    </head>
    <body>
        <div>
            @{
              int PageNo = (int)ViewBag.PageNo;//获取到当前页的信息
              int LastPage = PageNo - 1; //获取到上一页的Id
              int NextPage = PageNo + 1;//获取到下一页Id
              int PageCount = (int)ViewBag.PageCount;//获取到总页数
              SelectList sec = ViewBag.sec as SelectList;//获取到下拉列表的集合
              } 
            <ul>
                @foreach(car data in Model)
                {
                <li>@data.name</li>
                }
            </ul>
            @Html.ActionLink("首页", "Index", new {id=1 },null)
            @Html.ActionLink("上一页", "Index", new { id = LastPage }, new { onclick=LastPage<=0?"return false":"return true"})
            @Html.ActionLink("下一页", "Index", new { id = NextPage }, new { onclick=NextPage>PageCount?"return false":"return true"})
            @Html.ActionLink("尾页", "Index", new {id=PageCount },null)
            转向 @Html.DropDownList("id", sec, new {onchange="change()" }) 页
        </div>
    </body>
    </html>
    <script>
        function change() //写一个下拉里面的值改变时转向相应的页面的函数
        { 
            var a = document.getElementById("id").value;//获取到Id为sec对象的值
            window.location.href = "/Home/Index/" + a;//页面跳转到Home控制器下的Index动作上,并且将参数a传过去
            
        }
        </script>

    效果图:(只截取部分)

  • 相关阅读:
    Elasticsearch Query DSL 整理总结(三)—— Match Phrase Query 和 Match Phrase Prefix Query
    Elasticsearch Query DSL 整理总结(二)—— 要搞懂 Match Query,看这篇就够了
    Elasticsearch Query DSL 整理总结(一)—— Query DSL 概要,MatchAllQuery,全文查询简述
    Elasticsearch Java Rest Client API 整理总结 (三)——Building Queries
    Elasticsearch date 类型详解
    python 历险记(五)— python 中的模块
    python 历险记(四)— python 中常用的 json 操作
    python 历险记(三)— python 的常用文件操作
    Elasticsearch Java Rest Client API 整理总结 (二) —— SearchAPI
    Elasticsearch Java Rest Client API 整理总结 (一)——Document API
  • 原文地址:https://www.cnblogs.com/lk-kk/p/4646477.html
Copyright © 2011-2022 走看看