ASP.NET MVC+bootstrap paginator分页

ASP.NET MVC 使用 Bootstrap Paginator 实现Ajax分页

最新推荐文章于 2025-06-14 14:15:28 发布

遛狗的代码

最新推荐文章于 2025-06-14 14:15:28 发布

阅读量4.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： ASP.NET MVC 文章标签： bootstrap 分页 mvc paginator ajax

本文链接：https://blog.youkuaiyun.com/Brave_Coder/article/details/50655475

本文介绍了如何在ASP.NET MVC项目中，结合Bootstrap Paginator库，实现Ajax分页功能。通过控制器和前端JavaScript代码的配合，实现了动态加载数据并更新页面内容的效果。

之前做过一个bootstrap table的分页的项目，但是今天自己打算写着一个网站来玩儿，但是遇到的问题就是不能用table分页但是最好Ajax分页，经过查阅网上的资料，本人得出了解决方案，马上上代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using AngularJSandMVC.Models;

namespace AngularJSandMVC.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home

        public ActionResult Index()
        {
            return View();
        }
        public ActionResult LoadData()
        {
            int offset = int.Parse(Request.QueryString["page"].ToString());
            int limit = 2;//每页显示的数量
            List list = new List();
            for (int i = 0; i < 10; i++)
            {
                list.Add(new MyObject() { Id=(i+1),Name="Yangxu"});
            }
            List result = list.Skip((offset-1)*limit).Take(limit).ToList();
            return Json(result, JsonRequestBehavior.AllowGet);
        }
    }
        public class MyObject{
            public int Id;
            public string Name;
    }
}

以上是控制器中的代码

前台页面代码如下

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>View</title>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/bootstrap-paginator.min.js"></script>
</head>
<body>
<ol id="content">

</ol>
<ul id="pagination" pageSize="2">

</ul>
<script type='text/javascript'>
&n