欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

bootstrap-paginator 分页+MVC

程序员文章站 2022-03-25 18:48:25
bootstrap paginator 分页 效果图 1. Demo前的准备 1.1. 编程环境 VS2019 1.2. 准备 分页插件(bootstrap paginator)下载: https://github.com/lyonlai/bootstrap paginator 下载后找到 这个为该 ......

bootstrap-paginator 分页

  • 效果图
    bootstrap-paginator 分页+MVC

1. demo前的准备

1.1. 编程环境

    - vs2019 

1.2. 准备

  • 分页插件(bootstrap-paginator)下载:
  • 下载后找到 bootstrap-paginator-master\bootstrap-paginator-master\documentation\index.html 这个为该插件的详细介绍
  • 找到包中以下文件并引用到项目中
   <script src="~/files/jquery-1.9.1.min.js"></script>
    <script src="~/files/bootstrap-paginator.js"></script>
    <link href="~/files/bootstrap.min.css" rel="stylesheet" />

2. 后台

namespace mvcpagingdemo.models
{
    public class student
    {
        public int id { get; set; }
        public string name { get; set; }
        public string adress { get; set; }
        public string email { get; set; }
        public string tel { get; set; }
        
        public bool sex { get; set; }
    }
}
  using system;
using system.collections.generic;
using system.linq;
using system.web;
using system.web.mvc;
using mvcpagingdemo.models;
namespace mvcpagingdemo.controllers
{
 public class homecontroller : controller
 {
     list<student> stulist = new list<student>
     {
         new student{  id=1, name="张三", sex=true, adress="北京", email="121@qq.com", tel="18877222723" },
         new student{  id=2, name="李四", sex=true, adress="上海", email="121@qq.com", tel="18877222723" },
         new student{  id=3, name="王五", sex=true, adress="苏州", email="121@qq.com", tel="18877222723" },
         new student{  id=4, name="刘六", sex=false , adress="杭州", email="121@qq.com", tel="18877222723" },
         new student{  id=5, name="曹七", sex=false , adress="郑州", email="121@qq.com", tel="18877222723" },
         new student{  id=6, name="冯八", sex=false , adress="扬州", email="121@qq.com", tel="18877222723" },
         new student{  id=7, name="妲九", sex=true, adress="非洲", email="121@qq.com", tel="18877222723" },
         new student{  id=8, name="万十", sex=true, adress="广州", email="121@qq.com", tel="18877222723" },
           new student{  id=9, name="妲九", sex=true, adress="非洲", email="121@qq.com", tel="18877222723" },
         new student{  id=10, name="万十", sex=true, adress="广州", email="121@qq.com", tel="18877222723" },
           new student{  id=11, name="妲九", sex=true, adress="非洲", email="121@qq.com", tel="18877222723" },
         new student{  id=12, name="万十", sex=true, adress="广州", email="121@qq.com", tel="18877222723" },
     }; 
     public actionresult index()
     { 
         return view();
     }
     /// <summary>
     /// 分页
     /// </summary>
     /// <param name="page">当前页</param>
     /// <param name="pagesize">每页显示数</param>
     /// <param name="total">查询数据的总行数</param>
     /// <param name="totalpages">总页数</param>
     /// <returns></returns>
     public actionresult stulistshow(int page = 1, int pagesize = 3)
     {
         int total = 0;
         list<student> list = stulist;
         total = list.count;   //总数量
         viewbag.totalpages = (int)math.ceiling((decimal)(total) / pagesize);//总页数 
         var targets = list.skip(pagesize * (page - 1)).take(pagesize);
         return partialview(targets);
     }
}
}

3. 前端之 先引入js等文件在 _layout.cshtml

   <script src="~/files/jquery-1.9.1.min.js"></script>
  <script src="~/files/bootstrap-paginator.js"></script>
  <link href="~/files/bootstrap.min.css" rel="stylesheet" />

4. 前端之 添加分页插件配置(bootstrap-paginator)

  • 第一个div为分部视图,用于显示数据
  • 第二个div为分页插件载体,用于显示分页插件
 @{ 
      viewbag.title="index" ;
 }
<div id="data_table">
    @html.action("stulistshow")
</div>

<div id="example"></div> 

<script type='text/javascript'>
    var options = {
        currentpage: 1,                           //当前页 
        totalpages: $("#totalpage").val(),       //总页数 
        bootstrapmajorversion: 2,               // bootstrap->版本2:必须要用div显示,版本3用ul
        size: "normal",                          //大小:large,normal,small,mini
        alignment: "center",                    //对齐方式
        itemtexts: function (type, page, current)//页面项目文字
        {
            switch (type) {
                case "first":
                    return "首页";
                case "prev":
                    return "上一页";
                case "next":
                    return "下一页";
                case "last":
                    return "尾页";
                case "page":
                    return  page;
            }
        },
        numberofpages: 5,  //通过属性numberofpages可控制最大页面数。此属性仅接受整数。 
        onpageclicked: function (e, originalevent, type, page)
        {
            //   异步方式 1
            //$.post("/home/stulistshow", { page: page, pagesize: 3 }, function (data) {
            //    $("#data_table").html(data);
            //});
              //   异步方式 2
            $.ajax({
                   url: '/home/stulistshow',
                   type: 'post',
                   data: { page: page, pagesize: 3 },
                   datatype: 'html',
                   success: function (data){
                        $("#data_table").html(data);
                       }
                    });
        }
}
    $('#example').bootstrappaginator(options);
</script>

5、前端之 分部视图代码(stulistshow.cshtml)

@using mvcpagingdemo.models
@model ienumerable<mvcpagingdemo.models.student>

<table class="table table-hover table-bordered">
    <tr>
        <td>编号</td>
        <td>姓名</td>
        <td>电话</td>
        <td>邮箱</td>
        <td>地址</td> 
    </tr>
    @foreach (var stu in model)
    {
        <tr>
            <td>@stu.id</td>
            <td>@stu.name</td>
            <td>@stu.tel</td>
            <td>@stu.email</td>
            <td>@stu.adress</td> 
        </tr>
    }
</table> 
<input type="hidden" id="totalpage" value="@viewbag.totalpages" />

6. 效果图

bootstrap-paginator 分页+MVC