Ng-table: مثال مع الفرز والتصفية والتجميع والترقيم من جانب الخادم ...

+1

+1

مرحبًا ، ng-table هذه ليست سوى مكتبة العميل ، وجزء الخادم الذي يمكنك إجراؤه كما يحلو لك. على سبيل المثال ، يمكنك البحث عن هذا الجزء من الكود https://github.com/esvit/bazalt-rest/blob/master/src/Bazalt/Rest/Collection.php#L37 -87

esvit - كان الطلب للحصول على مثال كامل على جدول ng الذي يتعامل مع ترقيم الصفحات من جانب الخادم ، والفرز ، والتجميع ، والتصفية ، وما إلى ذلك ، وما إلى ذلك. من السيناريوهات تتضمن استخدام مكتبة العميل هذه مع البيانات البعيدة ...

esvit نعم ، كل ما نريده هو شيء يوضح كيف يجب أن يفعله أحدهم ، أي ما يتوقعه جدول ng لكائن JSON؟

+1
حتى لو كانت الطريقة الوحيدة لاعتراض أحداث التصفية والفرز والترحيل ستساعدنا في توصيل الباقي بالخادم ... شكرًا

مكتبة كبيرة راجع للشغل ...

+1

+1

+1

+1 إذا كانت هناك طريقة جيدة لاستدعاء وظيفة مخصصة للفرز ولكنها ليست ضرورية.

إما أن تضع ng-click = "sort (vars، directionToggle)" في الرأس ويمكنك حتى ترك الفرز ممكّنًا. سيعرض بعد ذلك الأسهم بشكل صحيح طالما أن تبديل الاتجاه الخاص بك يطابق تبديله.
التصفية أكثر تعقيدًا إلى حد ما ، أود أن أقول لتعطيل تصفية الجدول الزمني وإضافة إدخال مرشح مخصص تمامًا إلى الرأس ، فلا داعي للقلق بشأن التداخل بين الأجيال.

من هناك ، يتعلق الأمر بالتعامل مع البيانات الخلفية الخاصة بك والتأكد من أنها ترسل لك البيانات الصحيحة بالترتيب الصحيح. بعد ذلك ، ما عليك سوى توصيل هذه البيانات و bam ، سيكون لديك جدول فرز / ترشيح في ajax.

+1

إذا كان هذا مفيدًا للبدء ، فإليك مثالاً على ترقيم الصفحات من جانب الخادم. يرسل العميل رقم الصفحة وحجم الصفحة إلى الخادم ، ويعيد الخادم صفوف البيانات لهذه الصفحة فقط ، والعدد الإجمالي للصفوف كرأس استجابة.

    $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);
      }
    });

أتمنى أن يكون هذا مفيدًا لشخص ما.
foxdonut

+1

+1

+1

حقا جيد

أعلم أن الوقت متأخر بعض الشيء ، لكن شخصًا ما فعل مثالًا جيدًا لعرض البيانات المصنفة من جانب الخادم:
https://www.codeproject.com/Articles/892301/Server-sideporate-Filtering-Sorting-and-Paging-with

لم أكن أعلم أنه يمكننا القيام بذلك. هذا ليس واضحًا جدًا في الوثائق. :(

مرحبا foxdonut ،
تعليقك يساعدني حقًا بشكل كامل ، لكن بما أنني جديد ، فإن القليل من الأشياء ليست واضحة بالنسبة لي
1 # لماذا يتم تمرير ReceiptData كوسيطة إلى دالة.
عندما أتصل بوظيفة أياكس الخاصة بي بدلاً من
MyResource.query (queryParams ، تلقي بيانات) ،
إنه يعرض البيانات ولكن مع عودة أجاكس لاحقًا ، لا يتم تحديث العد. وإذا كنت أستخدم إعادة التحميل داخل كود ajax ، فإنه ينتقل إلى حلقة infinte :(

مرحبا @ rbhargava25

لماذا يتم تمرير ReceiptData كوسيطة إلى دالة.

لأن MyResource.query دالة غير متزامنة. إنها تقدم طلبًا إلى الخادم ، وعندما تعود الاستجابة ، نحتاج إلى معرفة الكود الذي يجب تنفيذه. في هذه الحالة ، يتم استدعاء دالة _callback_ ، وهي receiveData .

امل ان يساعد.

شكرا جزيلا Foxdonut ...
سأستخدم طلب http بسيطًا بدلاً من المورد ، وأنا أتنقل أنه سيعمل.