当前位置: 首页 > 工具软件 > ng-pagination > 使用案例 >

angularjs+uib-pagination实现同一页面多个分页功能

荣沈义
2023-12-01

1.html代码
第一个分页pagination

 <ul uib-pagination
 			<!--总条数-->
                        total-items="totalItems_money"
                        first-text="«" rotate="false"
                        last-text="»"
                        previous-text="上一页"
                        next-text="下一页"
                        force-ellipses="true"
                        max-size="maxSize"
                        <!--页数改变时重新执行函数-->
                        ng-change="queryList(currentPageMoney)"
                        <!--绑定当前页数-->
                        ng-model="currentPageMoney"
                        <!--每页显示条数-->
                        items-per-page="items_per_page_money"
                        class="pagination-sm page-right" boundary-links="true" boundary-link-numbers="true" ></ul>

第二个分页插件

<ul uib-pagination
                        total-items="totalItemsChange"
                        first-text="«" rotate="false"
                        last-text="»"
                        previous-text="上一页"
                        next-text="下一页"
                        force-ellipses="true"
                        max-size="maxSize"
                        ng-change="queryList_change(currentPage_change)"
                        ng-model="currentPage_change"
                        items-per-page="10"
                        class="pagination-sm page-right" boundary-links="true" boundary-link-numbers="true" ></ul>

2.js代码
第一个数据源

   $scope.getProjectDTO = {
                currentPage: 1,
                limit: 10//后台分页条数
            };
            //获取数据源
            $scope.queryList = function(){
                var reqq = $scope.getProjectDTO;
                
		//后台主要注意每个currentpage对应不同
		 reqq.currentPage = $scope.currentPageMoney;
                $$getProjectInfo.getProjectByCondition(reqq)
                    .success(function(data){
                        if(data.content.result=="0"){
                        //表格的循环遍历数组对象
                            $scope.allitemMoney = data.content.content.projectSurveyDTOS;
                            $scope.totalItems_money = data.content.content.counts;
                        }else{
                            SweetAlert.swal({
                                title: data.content.resultMessage,
                                type: "warning",
                                closeOnConfirm: true
                            });
                        }
                    }).error(function(){

                });
            };

第二个数据源跟第一个大同小异,主要就是获取数据源函数里面的currentpage对应的不同

    $scope.requestPeo = {
                currentPage:1,
                limit:6,
            }
            //离职在职转正人员
            $scope.queryList_change = function(){
                $scope.requestPeo.currentPage = $scope.currentPage_change;
                var req = $scope.requestPeo;
                $$getChangePeo.changeList(req)
                    .success(function(data){
                             $scope.allitem_change= data.content.contentpage;
                    }).error(function(){
                });
            }
 类似资料: