Menerapkan Pagination Berdasarkan AngularJS
Kata pengantar
Sebelum mempelajari bahasa apa pun, harus ada kebutuhan bisnis untuk mendorong Anda untuk mempelajarinya. Tentu saja, NG tidak terkecuali. Sebelum belajar NG, demo pertama yang ingin saya lakukan adalah menerapkan paging berdasarkan NG. Selain ide komputasi dasar, ini adalah menggunakan instruksi untuk merangkumnya ke dalam plug-in dan secara langsung merujuknya di halaman daftar yang membutuhkan paging.
Plugin
Ketika saya merangkum plugin paging, saya menerapkan beberapa metode secara umum, dan saya akhirnya menemukan plug-in yang dikemas oleh teman (http://www.miaoyueyue.com/archives/813.html). Saya merasa itu cukup bagus, jadi saya membaca kode sumbernya dan menggunakannya langsung di proyek.
Prinsip dan instruksi untuk digunakan
1. Kode sumber plug-in terutama diimplementasikan berdasarkan Petunjuk Angular.
2. Poin kunci saat menelepon adalah fungsi pemrosesan permintaan latar belakang, yaitu mengambil data dari latar belakang.
3. Plug-in memiliki dua parameter utama: SurrentPage, ItemsPerPage, nomor halaman saat ini dan jumlah catatan per halaman.
4. Setelah menerapkan panggilan metode, kita perlu mengirimkan kembali latar belakang untuk mendapatkan data nomor halaman yang sesuai berdasarkan setiap klik pada nomor halaman plug-in paging. Di nomor halaman panggilan saya menggunakan $ watch untuk memantau. Ketika saya pertama kali menggunakannya, saya meletakkan fungsi panggilan di onchange plug-in, tetapi saya menemukan bahwa latar belakang akan dipicu dua kali setiap kali. Tempat ini membutuhkan perhatian.
5. Saya merangkum latar belakang permintaan menjadi lapisan layanan dan kemudian memanggilnya di pengontrol, yang juga sesuai dengan ide MVC.
Diagram reproduksi
Kode panggilan
<Div ng-app = "DemoApp" ng-controller = "democontroller"> <able> <head> <tr> <td> <td> id </td> <td> FirstName </td> <td> </td </td </td </td </td </td </td </td/td </td/td </td/td </td/td </td/td </td/td </td> <td> <td> ng-repeat = "emp di orang"> <td> {{emp.id}} </td> <td> {{emp.firstname}} </td> <td> {emp.status}} </td> <td> {emp. <td> {{emp.address}} </td> </tr> </tbody> </able> <tm-pagination conf = "paginationconf"> </tm-pagination> </div> <script type = "text/javaScript"> var app = angular.module ('demoapp', ['tm.'>); app.controller ('Democontroller', ['$ scope', 'BusinessService', function ($ scope, bisnis layanan) {var getAlleMreyee = function () {var postdata = {pageIndex: $ scope.paginationconf.currentpage, fageSize: $ scope.poponf.pagination BusinessService.list (postdata) .success (function (response) {$ scope.paginationconf.totalitems = response.count; $ scope.persons = response.items;}); /****************************************************************************************** When page numbers and page records change, monitoring background query If currentPage and itemsPerPage are monitored separately, two background events will be triggered. ***************************************************************/ $ scope. $ watch ('paginationconf.currentpage + paginationconf.itemsperpage', getAllemployee); // Kelas Bisnis App.Factory ('BusinessService', ['$ http', function ($ http) {var list = function (postdata) {return $ http.post ('/karyawan/getAllemployee', postData);} return {list: function (function (postdata) {postData);); POSTDATA);} {list: function (function (postData) {postData ();););) {list {function: function (postData) {postData);Plugin dan unduhan demo
http://yunpan.cn/cqehnlrpnkniq access password be74
Di atas adalah informasi yang diterapkan AngularJS pada fungsi pagination. Kami akan terus menambahkan informasi yang relevan di masa mendatang. Terima kasih atas dukungan Anda untuk situs web ini!