bootStrap分页组件bootStrapPager

最新推荐文章于 2025-06-28 12:36:45 发布

原创最新推荐文章于 2025-06-28 12:36:45 发布 · 5.8k 阅读

2 ·

CC 4.0 BY-SA版权

分页同时被 2 个专栏收录

12 篇文章

订阅专栏

BootStrap

3 篇文章

订阅专栏

BottStrap分页组件bootStrapPager下载地址：http://www.jq22.com/jquery-info1753

控制器

public class HomeController : Controller
{
    public ActionResult Index()
    {
        BaseDbContent db = new BaseDbContent();
        ViewBag.count = db.location.Count(); // 获取数据的总条数
        return View();
    }

    public JsonResult GetIndexData(int currPage, int pageSize)
    {
        BaseDbContent db = new BaseDbContent();
        var list = db.location.OrderBy(r => r.locId).Skip((currPage - 1) * pageSize).Take(pageSize).ToList();
        return Json(list);
    }
}

视图

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>BottStrap分页组件bootStrapPager测试</title>
    <link href="~/bootStrapPager/css/bootstrap.min.css" rel="stylesheet" />
    <script src="~/bootStrapPager/js/jquery-1.11.1.min.js"></script>
    <script src="~/bootStrapPager/js/bootstrap.js"></script>
    <script src="~/bootStrapPager/js/extendPagination.js"></script>
    <style type="text/css">
    </style>
</head>
<body>    
        <table id="tb">
            <tr><th>编号</th><th>名称</th><th>父编号</th></tr>
        </table>

        <!--分页按钮-->
        <div id="callBackPager"></div>
</body>
</html>

<script type="text/javascript">
    var total = '@ViewBag.count';

    $(function () {
        //进入页面的时候需要调用callBackPagination这个函数，传入当前页，页大小，总页数
        callBackPagination(1, 10, total); //参数一：当前页 参数二：页大小  参数三：数据总条数（不需要传递总页数）
    })


    //这段代码不许要动
    function callBackPagination(showCount, limit, totalCount) {
        createTable(1, limit, totalCount); //第一次调用(加载第一页数据)
        $('#callBackPager').extendPagination({  //根据传入的参数生成分页控件
            totalCount: totalCount,
            showCount: showCount,
            limit: limit,           
            callback: function (curr, limit, totalCount) {//当点击分页控件页码时会触发此回调函数
                createTable(curr, limit, totalCount);
            }
        });
    }

    //用的时候只需要写下面这段ajax代码就可以
    function createTable(currPage, limit, total) {
        $.post("/Home/GetIndexData", { currPage: currPage, pageSize: limit }, function (data) {           
            $("#tb").empty();
            $.each(data, function (k, v) {
                $("#tb").append("<tr><td>" + v.locId + "</td><td>" + v.locName + "</td><td>" + v.parentId + "</td></tr>")
            })
        })     
    }
</script>