1. 程式人生 > >bootstrap-paginator分頁示例 源碼 MVC

bootstrap-paginator分頁示例 源碼 MVC

jquer inittab 加載 rbo 創建 etime tps name item

準備

1.數據:bootstrap包(含分頁插件bootstrap-paginator.js)

2.技術方案:ajax動態加載分頁、部分視圖、BLL取數

代碼

模板頁

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    <script src="~/Content/Scripts/jquery/jquery-2.1.1.min.js"></script>
    <link href="~/Content/Scripts/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" />
    <script src="~/Content/Scripts/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="~/Content/Scripts/bootstrap-3.3.7-dist/js/bootstrap-paginator.js"></script>
    @RenderSection("scripts")
</head>
<body>
    <div class="container" style="width:auto;margin:0 0px;">
        @RenderBody()
    </div>
</body>
</html>

  

主頁

@using LeaRun.Entity;
@{
    ViewBag.Title = "View1";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section scripts{
    <script type="text/javascript">
        var limit = 20;
        function initTable() {
            $.ajax({
                url: ‘../SystemSetup/LoadData‘,
                type: ‘post‘,
                data: { page: 1, limit: limit },
                dataType: ‘html‘,
                success: function (data) {
                    $("#data_table").html(data);
                    var pageCount = $(‘#datatotle‘).val(); //總頁數
                    var options = {
                        bootstrapMajorVersion: 3, //版本
                        currentPage: 1, //當前頁數
                        totalPages: pageCount, //總頁數
                        numberOfPages: 5,
                        itemTexts: function (type, page, current) {
                            switch (type) {
                                case "first":
                                    return "首頁";
                                case "prev":
                                    return "上一頁";
                                case "next":
                                    return "下一頁";
                                case "last":
                                    return "末頁";
                                case "page":
                                    return page;
                            }
                        },//點擊事件,用於通過Ajax來刷新整個list列表
                        onPageClicked: function (event, originalEvent, type, page) {
                            $.ajax({
                                url: ‘../SystemSetup/LoadData‘,
                                type: ‘post‘,
                                data: { page: page, limit: limit },
                                dataType: ‘html‘,
                                success: function (data) {
                                    $("#data_table").html(data);
                                }
                            });
                        }
                    };
                    $(‘#pageLimit‘).bootstrapPaginator(options);
                }
            });
            
        }

        $(function () {
            initTable();
        });
    </script>
}
<div class="row clearfix">
    <div class="col-md-12 column">
        <table class="table">
            <thead>
                <tr>
                    <th>
                        編號
                    </th>
                    <th>
                        名稱
                    </th>
                    <th>
                        菜單
                    </th>
                    <th>
                        等級
                    </th>
                    <th>
                        啟用
                    </th>
                    <th>
                        創建時間
                    </th>
                </tr>
            </thead>
            <tbody id="data_table">
            </tbody>
        </table>
        <div class="col-md-12 column text-center">
            <ul id="pageLimit"></ul>
        </div>
    </div>
</div>

分頁

@using LeaRun.Entity;
@{
    #region
    List<Base_Module>
    data = ViewBag.Data as List<Base_Module>;
    if (data == null)
    {
        data = new List<Base_Module>();
    }
    int btotel = ViewBag.BTotel;
    #endregion
}
<input id="datatotle" type="text" hidden="hidden" value="@ViewBag.Totle"/>
@for (int i = 0; i < data.Count; i++)
{
    <tr class="@(i%2==0?"active":"")">
        <td>
            @(btotel++)
        </td>
        <td>
            @data[i].FullName
        </td>
        <td>
            @data[i].Location
        </td>
        <td>
            @data[i].Level
        </td>
        <td>
            @(data[i].Enabled == 1 ? "啟用" : "未啟用")
        </td>
        <td>
            @(Convert.ToDateTime(data[i].CreateDate).ToString("yyyy-MM-dd"))
        </td>
    </tr>
}

Controller

using LeaRun.Business;
using LeaRun.Business.BaseUtility;
using LeaRun.Entity;
using LeaRun.Utilities;
using System.Collections.Generic;
using System.Web.Mvc;

namespace LeaRun.WebApp.Controllers
{
    public class SystemSetupController : Controller
    {
        public Base_ModuleBll base_modulebll = new Base_ModuleBll();

        public ActionResult Index()
        {
            return View();
        }

        public ActionResult LoadData(int page, int limit)
        {
            int total = 0;
            List<Base_Module> list = base_modulebll.GetList(out total, page: page, rows: limit);
            ViewBag.Data = list;
            ViewBag.Totle = total;
            ViewBag.BTotel = (page - 1) * limit + 1;
            return PartialView("LoadData");
        }
    }
}

效果

技術分享圖片

bootstrap-paginator分頁示例 源碼 MVC