Ng-table: Contoh dengan penyortiran sisi server, pemfilteran, pengelompokan, dan pagination...

+1

+1

Hai, ng-tabel ini hanya pustaka klien, bagian server dapat Anda buat sesuai keinginan. Misalnya Anda dapat melihat bagian kode ini https://github.com/esvit/bazalt-rest/blob/master/src/Bazalt/Rest/Collection.php#L37 -87

@esvit - Permintaannya adalah untuk contoh lengkap dari ng-table yang menangani pagination sisi server, pengurutan, pengelompokan, pemfilteran, dll. Saya setuju bahwa ng-table adalah pustaka klien, tetapi contoh seperti itu akan sangat membantu karena banyak skenario melibatkan penggunaan pustaka klien ini dengan data jarak jauh ...

@esvit ya semua yang kami inginkan adalah sesuatu yang menunjukkan bagaimana seseorang _harus_ melakukannya, yaitu apa yang diharapkan objek JSON ng-table?

+1
Bahkan jika hanya cara untuk mencegat peristiwa klik dari pemfilteran, pengurutan, dan paging akan membantu kami menghubungkan sisanya ke server... terima kasih

perpustakaan yang bagus btw ...

+1

+1

+1

+1 jika ada cara yang bagus untuk memanggil fungsi khusus untuk pengurutan tetapi tidak diperlukan.

Masukkan ng-click="sort(vars,directionToggle)" di header dan Anda bahkan dapat membiarkan penyortiran diaktifkan. Ini kemudian akan menampilkan panah dengan benar selama sakelar arah Anda cocok dengan sakelar itu.
Pemfilteran sedikit lebih rumit, saya akan mengatakan untuk menonaktifkan pemfilteran tabel-ng dan menambahkan input filter khusus sepenuhnya ke header, maka Anda tidak perlu khawatir tentang antargenerasi tabel-ng.

Dari sana, ini semua tentang menangani data backend Anda dan memastikannya mengirimkan data yang benar kepada Anda dalam urutan yang benar. Kemudian cukup colokkan data itu dan bam, Anda akan memiliki tabel penyortiran/pemfilteran ajax.

+1

Jika ini berguna untuk memulai, berikut adalah contoh untuk pagination sisi server. Klien mengirimkan nomor halaman dan ukuran halaman ke server, dan server mengembalikan baris data hanya untuk halaman itu, dan jumlah baris sebagai header respons.

    $scope.tableParams = new ngTableParams({
      page: 1, count: 10
    }, {
      getData: function($defer, params) {
        var receiveData = function(data, responseHeaders) {
          // in my case, the server returns the total number of rows as a response header
          // call params.total(...) to tell ng-table the total number of rows
          params.total(responseHeaders("count"));

          // the server returns just the data for the current page, so can send it as is
          $defer.resolve(data);
        };

        // getData gets called when you click on a different page in the pagination links.
        // get the page number and size from params.$params
        var pageNumber = params.$params.page;
        var pageSize = params.$params.count;

        // set up the query parameters as expected by your server
        var queryParams = {"paging.pageSize":pageSize, "paging.pageNumber":pageNumber};

        // send an ajax request to your server. in my case MyResource is a $resource.
        MyResource.query(queryParams, receiveData);
      }
    });

Semoga itu bermanfaat bagi seseorang.
donat rubah

+1

+1

+1

sangat bagus

Saya tahu ini agak terlambat tetapi seseorang melakukan contoh yang sangat bagus untuk menampilkan data yang diurutkan di sisi server:
https://www.codeproject.com/Articles/892301/Server-side-Data-Filtering-Sorting-and-Paging-with

Aku tidak tahu kita bisa melakukan ini. Ini tidak begitu jelas dalam dokumentasi. :(

Halo donat rubah,
Komentar Anda sangat membantu, Tetapi karena saya baru, beberapa hal tidak jelas bagi saya
1# Mengapa receiverData diteruskan sebagai argumen ke dalam suatu fungsi.
Ketika saya memanggil fungsi ajax saya alih-alih
MyResource.query(queryParams, menerimaData);
itu menunjukkan data tetapi ketika ajax kembali nanti maka hitungan tidak di-refresh. Dan jika saya menggunakan reload di dalam kode ajax maka masuk ke infinte loop :(

Hai @rbhargava25

Mengapa receiverData diteruskan sebagai argumen ke dalam suatu fungsi.

Karena MyResource.query adalah fungsi asinkron. Itu membuat permintaan ke server, dan ketika respons kembali, kita perlu tahu kode apa yang harus dieksekusi. Dalam hal ini, memanggil _fungsi panggilan balik_, yaitu receiveData .

Semoga membantu.

Terima kasih banyak, Foxdonut...
Saya akan menggunakan permintaan http sederhana alih-alih Sumber Daya. Saya berharap itu akan berhasil.