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>

    效果图:(只截取部分)

  • 相关阅读:
    并发编程(十)—— Java 并发队列 BlockingQueue 实现之 SynchronousQueue源码分析
    并发编程(九)—— Java 并发队列 BlockingQueue 实现之 LinkedBlockingQueue 源码分析
    Java工程师成神之路
    并发编程(八)—— Java 并发队列 BlockingQueue 实现之 ArrayBlockingQueue 源码分析
    星空雅梦
    星空雅梦
    星空雅梦
    星空雅梦
    星空雅梦
    星空雅梦
  • 原文地址:https://www.cnblogs.com/lk-kk/p/4646477.html
Copyright © 2011-2022 走看看