AngularJS ui.bootstrap.pagination 分页

最新推荐文章于 2024-10-08 09:00:00 发布

KingCruel

最新推荐文章于 2024-10-08 09:00:00 发布

阅读量5k

点赞数

分类专栏： AngularJS 文章标签： angular分页 angular-pagination ui.bootstrap.paginat

本文链接：https://blog.csdn.net/KingCruel/article/details/54631344

版权

AngularJS 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

1、Html

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>MyPagination</title>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />
    <script src="~/Scripts/angular.js"></script>
    <script src="~/Scripts/ui-bootstrap-tpls-0.13.0.min.js"></script>
    <script>
        var readyDataUrl = '@Url.Content("~/StudentManage/GetPageList")';
        var loadDataUrl = '@Url.Content("~/StudentManage/GetPageList")';
        var app = angular.module('app', ['ui.bootstrap']);
        app.controller('ctrl', ['$log', '$http', '$scope', function ($log, $http, $scope) {
            $scope.reportData = [];
            $scope.maxSize = 7;
            $scope.currentPage = 0;
            $scope.totalItems = 0;
            $scope.pageChanged = function () {
                //showLoading("正在查询");
                $http.post(loadDataUrl, {
                    pageIndex: $scope.currentPage,
                    pageSize: 10,
                    name: ""
                })
                 .then(function (result) {
                     $scope.reportData = result.data.Data;
                     $scope.totalItems = result.data.recordTotal;
                 }).catch(function (error) {
                     $log.error('error:' + error);
                 }).finally(function () {
                     //closeLoading();
                 });
            }
            $scope.Inital = function () {
                //showLoading("正在查询");

                $http.post(readyDataUrl, {
                    pageIndex: $scope.currentPage,
                    pageSize: 10,
                    name: ""
                }).then(function (result) {
                    $scope.reportData = result.data.Data;
                    $scope.totalItems = result.data.recordTotal;
                    //closeLoading();
                }).catch(function (error) {
                    $log.error('error:' + error);
                }).finally(function () {

                });
            }
            $scope.Inital();
            $scope.search = function () {
                //showLoading("正在查询");
                $http.post(loadDataUrl, {})
                    .then(function (result) {
                        $scope.reportData = result.data.Data;
                        $scope.totalItems = result.data.recordTotal;
                    }).catch(function (error) {
                        $log.error('error:' + error);
                    }).finally(function () {
                        //closeLoading();
                    });
            }
        }]);
    </script>
</head>
<body>
    <div ng-app="app" ng-controller="ctrl">
        <div class="form-group" id="toolbar">
            <table>
                <tr>
                    <td style="padding-left:10px;">
                        <button type="button" class="btn btn-success btn-sm" id="btnSearch" ng-click="search()">查询</button>
                    </td>
                </tr>
            </table>
            <div class="bootstrap-table">
                <div class="fixed-table-container" style="padding-bottom: 0px;">
                    <div class="table-responsive">
                        <table class="table table-condensed table-hover table-striped">
                            <thead>
                                <tr>
                                    <th><div class="th-inner">序号</div></th>
                                    <th><div class="th-inner">姓名</div></th>
                                    <th><div class="th-inner">电话</div></th>
                                    <th><div class="th-inner">邮箱</div></th>
                                    <th><div class="th-inner">年龄</div></th>
                                    <th><div class="th-inner">国家</div></th>
                                    <th><div class="th-inner">城市</div></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="o in reportData">
                                    <td><span ng-bind="o.Id"></span></td>
                                    <td><span ng-bind="o.Name"></span></td>
                                    <td><span ng-bind="o.Telephone"></span></td>
                                    <td><span ng-bind="o.Email"></span></td>
                                    <td><span ng-bind="o.Age"></span></td>
                                    <td><span ng-bind="o.Country"></span></td>
                                    <td><span ng-bind="o.City"></span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <pagination class="pagination-sm pull-right"
                        items-per-page="10"          @*每页最大显示条数的数量。值小于1表明所有项目在一个页上*@
                        ng-model="currentPage"
                        total-items="totalItems"     @*所有页中的项目总数*@
                        max-size="maxSize"           @*限制分页按钮显示的数量大小*@
                        ng-change="pageChanged()"    @*点击分页按钮触发的方法，可用于更改不同页面数据*@
                        boundary-links="false"       @*是否显示第一个/最后一个按钮*@
                        boundary-link-numbers="true" @*是否显示第一个和最后一个页码*@
                        rotate="false"               @*是否将当前激活页显示在中间*@
                        force-ellipses="true"        @*当总页数大于最大显示页数（max-size）显示省略号按钮*@
                        previous-text="‹"            @*上一个按钮的文本*@
                        next-text="›">               @*下一个按钮的文本*@
            </pagination>
        </div>
    </div>
</body>
</html>

2、Action

[HttpPost]
public JsonResult GetPageList(int pageIndex, int pageSize, string name)
{
    int pageCount = 1;
    int recordTotal = 0;
    int topRecordTotal = 0;
    List<Students> list = new List<Students>();
    try
    {
        list = svc.GetAllStudent();
        recordTotal = list.Count();
        pageCount = (int)Math.Ceiling((decimal)recordTotal / pageSize);
        topRecordTotal = (pageIndex - 1 < 0 ? 0 : pageIndex - 1) * pageSize;
        list = list.Skip(topRecordTotal).Take(pageSize).ToList();
    }
    catch (Exception)
    {
        throw;
    }
    return Json(new
    {
        pageIndex = pageIndex,
        pageCount = pageCount,
        recordTotal = recordTotal,
        Data = list,
    }, JsonRequestBehavior.AllowGet);
}