이 글에서는 특정 참조 가치가 있는 AngularJS 프런트엔드 페이징 구현을 주로 소개합니다. 이제 필요한 친구들이 참고할 수 있습니다.
사실 페이징의 원리도 매우 간단합니다. 페이징을 위해 선택한 페이지 수와 각 페이지의 데이터 항목 수를 기준으로 현재 표시되는 배열의 항목 수를 결정합니다. 그런 다음 기존 페이징 지침을 전달하여 페이징 매개변수를 구성합니다.
// 初始化分页参数 $scope.pageParams = { size: $stateParams.size, // 每页数据条数 page: $stateParams.page, // 页码数 last: undefined, // 是否首页 first: undefined, // 是否尾页 totalPages: undefined, // 总页数 totalElements: undefined, // 总数据条数 numberOfElements: undefined // 当前页有几条数据 };
이것은 페이징 명령에 필요한 데이터이므로 두 가지 작업이 있습니다. 첫째, 현재 페이지에 표시되어야 하는 데이터를 가로채는 것과 둘째, 매개변수를 생성하여 페이징에 전달하는 것입니다. 명령.
Public method
CommonService
에 구현된 마지막 public 메소드입니다. /** * 重新生成分页参数与分页数据 * @param {每页数据条数} size * @param {页码数} page * @param {全部数据} data * @param {Function} callback * callback (pageParams, currentPageData) * pageParams: 分页的标准 * currentPageData: 当前页的数据 */ self.reloadPageParamsAndData = function(size, page, data, callback) { // 校验传入的参数 if (typeof size === 'undefined') { throw '未接收到每页数据条数信息'; } if (typeof page === 'undefined') { throw '未接收到分页信息'; } if (typeof data === 'undefined') { throw '未接收到数据信息'; } // 计算总页数和总数据条数 var totalPages = Math.ceil(data.length / size); var totalElements = data.length; // 计算当前页是否为首页 是否为尾页 var first = page === 0 ? true : false; var last = page === totalPages - 1 ? true : false; // 根据分页参数计算当前页应该显示的数据 slice数组元素分割 var currentPageData = data.slice(0 + page * size, size + page * size); // 获取当前页总共有多少条数据 var numberOfElements = currentPageData.length; // 重新生成分页参数 var pageParams = { size: size, // 每页数据条数 page: page, // 页码数 last: last, // 是否首页 first: first, // 是否尾页 totalPages: totalPages, // 总页数 totalElements: totalElements, // 总数据条数 numberOfElements: numberOfElements // 当前页有几条数据 }; // 回调 if (callback) { callback(pageParams, currentPageData); } };
현재 페이지의 데이터 가져오기CommonService
中的公共方法。
var currentPageData = data.slice(0 + page * size, size + page * size);
获取当前页的数据,我们需要知道每页数据条数,页码数即可对数据进行分割。
// 计算总页数和总数据条数 var totalPages = Math.ceil(data.length / size); var totalElements = data.length; // 计算当前页是否为首页 是否为尾页 var first = page === 0 ? true : false; var last = page === totalPages - 1 ? true : false; // 获取当前页总共有多少条数据 var numberOfElements = currentPageData.length;
对数据进行分割,数据应该是从0
到size
,加上page * size
就是之前的页数中的数据量。
<yunzhi-page></yunzhi-page>
数据总数除以每页数据条数向上取整得到总页数。
如果页数为0
,则为首页;如果页数为总页数减1
rrreee 데이터를 분할합니다. 데이터는 0
부터 size
까지여야 하며, page * size
는 이전 값이어야 합니다. 페이지 수의 데이터 양입니다.
페이징 매개변수 구축
rrreee총 데이터 수를 페이지당 데이터 항목 수로 나누고 반올림하여 총 페이지 수를 구합니다.
페이지 수가 0
이면 첫 번째 페이지이고, 전체 페이지에서 1
을 뺀 값이면 첫 페이지입니다. 마지막 페이지다. rrreee
위 내용은 모두의 학습에 도움이 되기를 바랍니다. PHP 중국어 웹사이트! 관련 권장 사항:
AngularJS Excel 내보내기 명령
위 내용은 AngularJS 프런트엔드 페이징 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!