Biarkan saya pertama kali memperkenalkan konsep dasar Angular.js dan Bootstrap.
AngularJS adalah kerangka kerja JavaScript. Ini dapat ditambahkan ke halaman HTML melalui tag <script>.
AngularJS memperluas HTML melalui arahan dan mengikat data ke HTML melalui ekspresi.
Bootstrap, dari Twitter, adalah kerangka kerja front-end paling populer saat ini. Bootstrap didasarkan pada HTML, CSS, dan JavaScript. Ini sederhana dan fleksibel, membuat pengembangan web lebih cepat.
Saya telah belajar Angular.js baru -baru ini dan telah mempraktikkan banyak demo selama proses pembelajaran. Di sini saya akan memposting bentuk + pagination terlebih dahulu.
Mari kita lihat hasil akhirnya:
Saya harus mengatakan bahwa gaya kode Angular.js sangat populer, dan puluhan baris kode dengan jelas dan ringkas menerapkan fungsi -fungsi di atas.
Pertama -tama, sumber data tabel berasal dari server.js, klik untuk mengunduh. Dapatkan nomornya dan kemudian tampilkan di halaman.
1. Tabel ditampilkan melalui NG-RePeat, dan kodenya adalah sebagai berikut:
<able> <tr> <t th> index </t> <th ng-repeat = "(x, y) dalam item [0]"> {{x}} </t th> </tr> <tr ng-repeat = "x dalam item"> <td> {{$ index + 1}} </td> <td ng-bind = " ng-bind = "x.city"> </td> <td ng-bind = "x.country"> </td> </tr> </able>$ index adalah parameter default pengulangan. Header kolom tabel adalah nilai kunci yang dilingkarkan melalui baris pertama sumber data (JSON). Tentu saja, jika bootstrap perlu menentukan bahwa kelas tabel adalah tabel-tabel-bordered.
2. Pagination juga menggunakan NG-repeat. Saya harus mengatakan bahwa NG-Repeat adalah instruksi umum.
Kode paging adalah sebagai berikut:
<av> <ul> <li> <a ng-click = "sebelumnya ()"> <span> halaman sebelumnya </span> </a> </li> <li ng-repeat = "halaman di pagelist" ng-class = "{Active: iSactivePage (halaman)}"> <a ng-klick = "selectpage (halaman) {li li {a ng-click =" li li {a ng-click = ng-click = "next ()"> <span> halaman berikutnya </span> </a> </li> </ul> </av>Di sini kami menggunakan instruksi acara klik ng. Juga menggunakan perintah NG-Class
ng-class = "{Active: isActivePage (halaman)}"Kode di atas adalah gaya yang dipilih untuk pagination.
Tabel ini menambahkan paging ke halaman adalah paging palsu, yang mengambil data dari backend sekali, dan menampilkan data JSON yang difilter melalui paging yang berbeda.
Kode Khusus + Komentar:
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Table</title> </head><body><!-- New Bootstrap core CSS file--><link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css"><style>#divMain {width: 500px;margin: 0 auto;margin-top: 100px;}nav {position: relative;width:100%;height: 50px;}. Pagination {Right: 0px; Posisi: Absolute; Top: -30px;} nav li {kursor: pointer;} </style> <div id = "divmain" ng-app = "myapp" ng-controller = "myctrl"> <table> <tr> </tH-controller = "myctrl"> <TABLE> <TR> </THRET </great = THET = THEP = THEP = THEP = THEPRL "> <TR> </THET </THEAT = THEP = THEP = THEK = THEK = THEK = THEK = THRE" THEK = THRET <TR> </THEAT = Item [0] "> {{x}} </tr> </tr> <tr ng-repeat =" x di item "> <td> {{$ index + 1}} </td> <td ng-bind =" x.name "> </td> <td ng-bind =" x.city "> </td> </td> <td ng-bind =" x.city "> ng-bind="x.Country"></td></tr></table><nav><ul><li><a ng-click="Previous()"><span>Previous page</span></a></li><li ng-repeat="page in pageList" ng-class="{active: isActivePage(page)}" ><a ng-click="selectPage(page)" > {{page}} </a> </li> <li> <a ng-click = "next ()"> <span> halaman berikutnya </span> </a> </li> </ul> </av> </div> <skrip src = "http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular.js"> </script> <script> var app = angular.module ("myapp", []); app.controller ("myctrl", function ($ scope " {$ http.get ("service.js"). Kemudian (fungsi (respons) {// sumber data $ scope.data = response.data.records; // jumlah total halaman $ scope.pages. $ scope.pages> 5? 5: $ scope.pages; $ scope.pagelist = []; $ scope.selpage = 1; // Setel tabel data sumber (paging) $ scope.setData = function () {$ scope.items = $ scope.data.slice (($ scope. $ scope.pagesize)); // Saring data yang ditampilkan saat ini dalam tabel dengan jumlah halaman saat ini} $ scope.items = $ scope.data.slice (0, $ scope.pagesize); // array yang diulangi. 1);} // Cetak indeks halaman yang saat ini dipilih $ scope.selectpage = function (halaman) {// tidak kurang dari 1 dari maksimum jika (halaman <1 || page> $ scope.pages) pengembalian; // Jumlah halaman maksimum yang ditampilkan (halaman -halaman> 2) {// karena hanya 5 halaman yang ditampilkan, konversi halaman yang lebih besar dari halaman; halaman -2) {// karena hanya 5 halaman yang ditampilkan, konversi halaman yang lebih besar dari halaman. 3); i <(halaman + 2)> $ scope.pages? $ Scope.pages: (halaman + 2)); + halaman);}; // Setel gaya halaman yang saat ini dipilih $ scope.isActivePage = function (halaman) {return $ scope.selpage == halaman;}; // halaman sebelumnya $ scope.previous = function () {$ scope.selpage ($ scope.selpage - 1);} // next halaman. 1);};});}) </script> </body> </html>Editor akan memperkenalkan banyak hal kepada Anda tentang kombinasi Angular.js dan Bootstrap untuk mengimplementasikan kode paging tabel, dan saya harap ini akan membantu Anda!