Di banyak halaman dalam proyek, pagination digunakan, dan setiap halaman memiliki banyak kode pagination duplikat. Jadi saya menulis instruksi pagination sederhana untuk menyederhanakan kode halaman dan mudah dirawat. Saya menulisnya di blog sebagai cadangan untuk akses mudah di masa depan.
Berikut adalah langkah -langkah untuk menentukan arahan dan aplikasinya:
1. Definisi Petunjuk
Tentukan file JS, Page-Directive.js, yang digunakan untuk menulis kode instruksi paging. File ini berisi template paging. Berikut ini adalah semua kode dalam file JS:
'Gunakan ketat'; (function () {angular.module ('template/pageInit/pageInit.html', []). run (['$ templatecache', function ($ templateCache) {$ templateCache.put ('no/pageinit/pageinit.html', ',', ',' html ',', ',', 'html', ',' html ', ng-class = "{disabled: pagedata.currentpage == 1}">/n '+' <a href = "javascript: void (0);" } ">/n '+' <a href =" javaScript: void (0); "ng-click =" on_prev () "> <span> </span> </a>/n '+' </li>/n '+' <li ng-repeat =" page in pagedata.pages "ng-class =" {"{" {"{" {"{" {"{" {"{" page == pagedata.totalpage} ">/n '+' <a ng-if =" page! =/'.../' "href =" javascript: void (0); "ng-class =" {/'bg-custom/': page == pagedata.currentpage} "{{{{{{{{{{{{{{{{{{{", " }} </a>/n '+' <a ng-if = "page ==/'.../'" href = "javascript: void (0); ng-class = "{Disable: pagedata.currentpage == pagedata.totalpage}">/n '+' <a href = "javascript: void (0); placeholder = "" ng-model = "inpage">/n '+' <input type = "Tombol" value = "jump" ng-click = "on_loadpage (inpage)"> </div>/n '+' </li>/n '+' <li> <a href = "#"> <span> Total {{pagedata.count}} </span> </a> </li>/n '+' </ul>/n '+'); Batasi: 'AE', TemplateUrl: Function (Telement, Tattrs) {return tattrs.templateUrl || function () {if (scope.prev) {scope.prev ()}}; }};}}; }};2. Kontrol Gaya Pagination
Disarankan untuk menulisnya dalam file .css terpisah. Pertama, buat file PageSync.css baru. Berikut ini adalah gaya spesifik.
.pagination-main {display: inline-block; Padding-left: 0; Margin: 0 0; Border-Radius: 4px; Vertical-Align: Middle;}. Pagination-Main li.prev-page> a {border: 0;}. Pagination-main li.next-page> a {border: 0; Border-left: 1px; margin-left: 0;}. Pagination-main li.first-page> a {border-top-left-radius: 0; Border-bottom-left-Radius: 0;}. Pagination-Main li.Last-Page> a {border-top-right-radius: 0; Border-Bottom-Right-Radius: 0;}. Pagination-Main Li Div {Lebar: 80px; Border: 1px solid #ddddd; latar belakang-color: #ffffff; float: left; padding: 0;}. pagination-main li.skip-page input [type = 'text'] {width: 24px li.skip; center;}. Pagination-Main li.skip-page input [type = 'Button'] {padding: 0 4px 1px 10px; Border: 0; border-left: 1px solid #dddddd; latar belakang: #ffffff} .pagination-main li.data-num> a {border: 0; margin-left: 0;}. Pagination-main> li {display: inline;}. pagination-main> li: anak pertama> a, .pagination-main> li: anak pertama> span { /*margin-left: 0; Border-top-left-radius: 4px; Border-Bottom-left-Radius: .Active> a, .pagination-main> .aktif> rentang, .pagination-main> .active> a: hover, .pagination-main> .aktif> rentang: hover, .pagination-main> .aktif> a: fokus, .pagination-main> .active> A:. Warna: #fff; kursor: default; Latar Belakang-Color: #428BCA; Border-color: #428bca;}. Pagination-Main> li> a, .pagination-main> li> span {position: relatif; float: kiri; /*pagination: 6px 12px;*/ padding: 1px 8px; margin -kiri: -1px; Line-Height: 1.42857143; Warna: #428BCA; Dekorasi Teks: Tidak Ada; Latar Belakang-Color: #FFF; Perbatasan: 1px solid #ddd;}. pagination-main> .disabled> span: hover, .pagination-main> .disabled> span: hover, .pagination-main> .disabled> span: fokus, pagination-main> .penabled> a, .pagination--han-main> .disabled> ainining. Warna: #999; kursor: tidak diizinkan; Latar Belakang-Color: #FFF; Border-color: #ddd;}3. Metode permintaan pagination
Saya telah menyesuaikan metode kueri pagination di pabrik, yang dibagikan dan nyaman untuk pemeliharaan kode. Interaksi dengan latar belakang sudut tidak sinkron secara default. Saya menulisnya sebagai pertanyaan sinkron di sini. Pertama, tentukan JS File Pagesync.Service.js. Berikut ini adalah seluruh konten pabrik:
'use strict';angular.module('app').factory('PageSync', ['$http', '$q', function Page($http, $q) { var rowCollectionPage = []; var totalPage = 1; var pages = []; var endPage = 1; var load = function(url, currentPage, pageSize, deferred) { var json = {RowCollectionPage: [], TotalPage: 1, CurrentPage: CurrentPage? EndPage = TotalPage; JSON.PAGE = halaman; itu dianggap memiliki data i = 1; } lain jika (TotalPage - CurrentPage) <= 3) {Temp = [TotalPage - 6, TotalPage - 5, TotalPage - 4, TotalPage - 3, Halaman - 2, Halaman - 1, Totalpage]; } ;/ Temp.push (rowarr [i]); halaman) {var ditangguhkan = $ q.defer (); Currentpage + '&' + PageSize; lancar, halaman, halaman) {var ditangguhkan = $ q.defer ();4. Gunakan perintah
1). Kode di halaman:
Dalam kode saya, halaman ditulis di tfoot di tabel. Prev (), next (), dan loadpage (halaman) adalah semua metode yang didefinisikan dalam pengontrol halaman yang sesuai.
<able> <Thead> <tr> <th> Nomor seri </th> <th> Nama kolom 1 </th> <th> nama kolom 2 </t th> <t th> </t th> </tr> </head> <tbody> <tr ng-if = "! notabledata" ng-repeat = "row di Pagedata.rowcollectionpage $ index+1+(pagedata.currentpage-1)*pageSize: ''}} </td> <td> {{row.args1} </td> <td> {{row.args2}} </td> <td> {{row.args2}} </td> <td> <td> {{row.args2 Center; "> <a href = '#'> memodifikasi </a> </td> </tr> <tr ng-if =" notableData "ng-repeat =" data di pagedata.rowCollectionPage "> <td ng-if =" $ index == 0 "colspan =" 4 "style =" Text-align: center; "no! </td> <td ng-if = "$ index! = 0" colspan = "4"> </td> </tr> </tbody> <tfoot> <tr> <td style = "text-align: center;" COLSPAN = "6"> <SEV> <page-init page-data = "pagedata" prev = "prev ()" next = "next ()" load-page = "loadpage (page)"> </page-init> </div> </td> </td> </tr> </tfoot> </table>2). Kode dalam pengontrol
Pertama, Anda perlu merujuk pada pabrik dan referensi halaman halaman dalam pengontrol, sebagai berikut:
angular.module ('app'). controller ('myctrl', function (pagesync) {});
Sebelum kueri pagination, Anda perlu melakukan beberapa persiapan:
// Pagredata mengatur set data halaman, jumlah total halaman, set nomor halaman, dan jumlah total data. LoadTime adalah parameter khusus untuk merekam status waktu (sebelum mengakses data dan setelah mengembalikan data)
$ scope.pagedata = {rowCollectionPage: [], totalpage: 1, currentpage: 1, halaman: [], hitung: 0, loadtime: 'sebelum'};
// Ini digunakan untuk menghitung ketinggian tabel, sesuai dengan situasi aktual.
$ scope.tabheight = $ scope.height-48-37-10-42-5;
// Hitung berapa banyak baris data yang sebenarnya ada di halaman
$ scope.pagesize = parseInt (($ scope.tabheight-15-34-34-39)/34);
Kemudian tulis metode berikut di pengontrol
// kueri pagination $ scope.load = function (baris) {$ scope.surgeonPagedata.rowCollectionPage = common.setPagerow ([], $ scope.pagesize); $ scope.nosurgeondata = false; $ scope.surgeonPagedata.LoadTime = 'Sebelum'; Pagesync.load (url, $ scope.pagedata.currentpage, $ scope.pagesize) .then (function (data) {$ scope.pagedata = data; if (($ scope.pageData. muloadtime == 'setelah' && scope.pageedata.count == 0) || $ scope.notableData = true;}});}; // halaman berikutnya $ scope.next = function () {if ($ scope.pagedata.currentpage <$ scope.pageData.totalpage) {pageSync.next (url, $ scope.page.current) {pagesync.next $ scope.pagedata = data;}); }}; // halaman sebelumnya $ scope.prev = function () {if ($ scope.pagedata.currentpage> 1) {pagesync.prev (url, $ scope.pagedata.currentpage, $ scope.pageSize) .then (function (data) {$ scopage.pageRaData = }}; // Klik nomor halaman untuk melompat $ scope.loadpage = function (halaman) {$ scope.inpage = tidak terdefinisi; var intpage; if (typeof page == 'string') {if (page! = "") {intpage = parseInt (halaman, 10); } else {intpage = 0; }} else {intpage = page; } if ($ scope.pagedata.totalpage <= 1) {} else if (intpage == tidak terdefinisi || intpage == null) {alert ('Harap isi nomor halaman lompat!'); } lain jika (intpage <= 0 || intpage> $ scope.pagedata.totalpage) {alert ('Nomor halaman lompatan harus lebih besar dari 0, kurang dari jumlah total halaman'+$ scope.pagedata.totalpage); } lain if ($ scope.pagedata.currentpage! = page) {pagesync.loadpage (url, $ scope.pagedata.currentpage, $ scope.pagesize, page) .then (function (data) {$ scope.pagedata = data;}); }};5. Hasil
Efek implementasi akhir adalah sebagai berikut:
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.