bootatrap分页控件bootstrap-paginator.js项目中的简单使用

封装js

//分页控件
var paginator = {
	// 参数依次是:元素id,当前页,总条数,一页显示多少条,回调
    init: function (elementId, pageIndex, totalCount, pageSize, pageChangeCbk) {
        if (totalCount <= 0) {
            $("#" + elementId + "").html("");
            $(".totalCountOfPaginator").remove();
            return;
        };
        var options = {
            currentPage: pageIndex + 1, 设置当前页.
            totalPages: (totalCount % pageSize) == 0 ? (totalCount / pageSize) : (totalCount / pageSize) + 1,  // 设置总页数
            numberOfPages: 10, //在页面上显示的页码数最多显示十页
            bootstrapMajorVersion: 3,// 设置版本号
	        useBootstrapTooltip: true,//设置是否使用Bootstrap内置的tooltip(鼠标放上,提示文字), true是使用，false是不使用,默认是不使用。注意：如果使用，则需要引入bootstrap-tooltip.js插件。
            itemTexts: function (type, page, current) { //通过这个参数我们就可以将操作按钮上的英文改为中文。如first-->首页，last-->尾页。
                switch (type) {
                    case "first":
                        return "首页";
                    case "prev":
                        return "上一页";
                    case "next":
                        return "下一页";
                    case "last":
                        return "末页";
                    case "page":
                        return page;
                }
            }, onPageClicked: function (event, originalEvent, type, page) { //为操作按钮绑定click事件。
                pageChangeCbk(page);
            }
        }
        $("#" + elementId + "").bootstrapPaginator(options);
        $(".totalCountOfPaginator").remove();
        var totalCountEle = $("<span class='totalCountOfPaginator'>总共 " + totalCount + " 条</span>");
        var p = $("#" + elementId + "");
        totalCountEle.insertBefore(p);
    }
};

请求完数据之后的使用

// 获取列表数据
$scope.getTransSupportList = function () {
    abp.ui.setBusy("#mianBody");
    var url = serverDomain + 'api/services/app/PlanWorkOrderService/GetCrossBranchApprovalOrCheckList';
    var param = angular.copy($scope.paramData);
    httpService.Get(url, param, function (res) {
       abp.ui.clearBusy("#mianBody");
           if (res.success) {
                $scope.transSupportList = res.result.items;
                   // 总条数
                   var totalCount = res.result.totalCount;
                   //第一次加载时候初始化分页控件(如果当前页是0的时候,初始化)
                   if ($scope.paramData.PageIndex === 0) {
                   	   //下面是封装的分页方法
                   	   //参数一: 分页的id属性
                   	   //参数二: 当前页 0 
                   	   //参数三: 接口返回的总条数
                   	   //参数四: 一页显示多少条
                   	   //参数五: 回调,点击每一页的click事件
                       paginator.init("myPage", $scope.paramData.PageIndex, totalCount, $scope.paramData.PageSize, function (pageIndex) {
                          $scope.paramData.PageIndex = pageIndex - 1;
                          $scope.getTransSupportList();
                       })
                   }
           }
    }, function (err) { });
}

html页面调用

<nav aria-label="Page navigation" class="page">
    <ul class="pagination" id="myPage"></ul>
</nav>