Angularjs: dir-pagination-controls tidak menampilkan halaman berikutnya, bahkan setelah tombol halaman ditekan

Saya telah mencoba memasukkan dir-pagination-controls, tetapi tidak dapat menampilkan halaman berdasarkan halaman yang dipilih.

<div ng-controller="TableController as tc">
    <table>
        <tbody dir-paginate="order in tc.orders | itemsPerPage: 10" total-items="tc.totalOrders" current-page="currentPage">
            <tr ng-click="tc.showOrderDetail(order.id)">
                <td ng-bind="order.id"></td>
                <!-- Simliar lines are here -->
            </tr>
        </tbody>
    </table>
    <dir-pagination-controls 
       boundary-links="true" 
       on-page-change="tc.pageChangeHandler(newPageNumber)" 
       template-url="dirPagination.tpl.html">
    </dir-pagination-controls>
</div>

table ini menunjukkan apa yang saya harapkan. Namun, pengontrol penomoran halaman yang dihasilkan tidak menampilkan halaman berikutnya ketika saya menekan salah satu tombolnya.

Berikut adalah bagian yang relevan dari skrip.

angular.module('adminAngular', ['ui.bootstrap','dialogs.main','angularUtils.directives.dirPagination'])
.controller('TableController', function($http){

    var instance = this;

    this.orders = [];
    $http({
        //works fine
    }).then(function (response) {
        instance.orders = response.data;
        instance.totalOrders = instance.orders.length;
        //The "instance.orders" gets the expected data, and used for in dir-paginate="order in tc.orders
    });

    this.pageChangeHandler = function(num) {
        console.log('going to page ' + num);
    };

    this.pageChanged = function(newPage) {
        getResultsPage(newPage);
    };

UPDATE Angka pageChangeHandler menunjukkan tombol mana yang ditekan, namun halaman tidak berubah. (Yang lainnya baik-baik saja.)

Kode ini didasarkan pada dokumen resmi dan demonya, tetapi Saya tidak dapat menemukan apa yang sebenarnya salah.

Saya akan menghargai jika Anda memberikan saran.


javascript php pagination angularjs dirpagination
person Hiroki    schedule 14.04.2016    source sumber
comment
Bukankah seharusnya baris on-page-change=pageChangeHandler(newPageNumber) menjadi on-page-change=tc.pageChangeHandler(newPageNumber) ?   -  person Parthasarathy    schedule 14.04.2016
comment
Kamu benar!! aku akan memperbaiki postingan ini...   -  person Hiroki    schedule 14.04.2016
comment
Apakah Anda menjalankan metode this.pageChanged() di mana saja? Saya kira Anda mungkin harus memanggilnya dari fungsi pageChangedHandler().   -  person Parthasarathy    schedule 14.04.2016

Jawaban (1)


arrow_upward
4
arrow_downward

Solusinya adalah menghapus total-items dari direktif dir-paginate Anda. Berikut adalah plunker dengan contoh sederhana.

Atribut total-items digunakan saat Anda melakukan panggilan asinkron untuk mendapatkan setiap item laman. Jadi, panggilan async pertama Anda mendapatkan item untuk halaman pertama, dan ketika Anda mengubah halaman, Anda seharusnya mendapatkan item untuk halaman terkait dari server. total-items memberi tahu arahan penomoran halaman berapa total halaman yang Anda miliki, sehingga ia mengetahui cara membuat elemen.

Jika Anda menginginkan panggilan async untuk setiap halaman, gunakan total-items dan terapkan pageChanged di mana Anda melakukan panggilan async lainnya.

$scope.pageChanged = function(newPage) {
   // get orders for newPage number
   $http.get(...).then(function(response) {
       // orders for newPage number fill the same 'orders' array
       this.orders = response.data
   });
}
person Lulylulu    schedule 14.04.2016