Ng-table: सर्वर साइड सॉर्टिंग, फ़िल्टरिंग, ग्रुपिंग और पेजिनेशन के साथ उदाहरण...

+1

+1

हाय, एनजी-टेबल यह केवल क्लाइंट लाइब्रेरी है, सर्वर पार्ट जिसे आप अपनी इच्छानुसार बना सकते हैं। उदाहरण के लिए आप कोड के इस भाग को देख सकते हैं https://github.com/esvit/bazalt-rest/blob/master/src/Bazalt/Rest/Collection.php#L37 -87

@esvit - अनुरोध एनजी-टेबल हैंडलिंग सर्वर साइड पेजिनेशन, सॉर्टिंग, ग्रुपिंग, फ़िल्टरिंग इत्यादि के पूर्ण विकसित उदाहरण के लिए था। मैं मानता हूं कि एनजी-टेबल क्लाइंट लाइब्रेरी है, लेकिन ऐसा उदाहरण वास्तव में मदद करेगा क्योंकि बहुत कुछ परिदृश्यों में दूरस्थ डेटा के साथ इस क्लाइंट लाइब्रेरी का उपयोग करना शामिल है ...

@esvit हाँ हम सब कुछ दिखाना चाहते हैं कि कोई

+1
भले ही फ़िल्टरिंग, सॉर्टिंग और पेजिंग की क्लिकईवेंट को इंटरसेप्ट करने का एक तरीका ही हमें बाकी को सर्वर से जोड़ने में मदद करेगा... धन्यवाद

महान पुस्तकालय बीटीडब्ल्यू ...

+1

+1

+1

+1 अगर सॉर्ट के लिए कस्टम फ़ंक्शन को कॉल करने का कोई अच्छा तरीका है लेकिन इसकी आवश्यकता नहीं है।

या तो हेडर में ng-click="sort(vars,directionToggle)" डालें और आप सॉर्टिंग को सक्षम भी छोड़ सकते हैं। यह तब तक तीरों को ठीक से प्रदर्शित करेगा जब तक कि आपकी दिशा टॉगल इसके टॉगल से मेल खाती है।
फ़िल्टरिंग थोड़ा अधिक जटिल है, मैं अक्षम एनजी-टेबल फ़िल्टरिंग को कहूंगा और हेडर में पूरी तरह से कस्टम फ़िल्टर इनपुट जोड़ूंगा, तो आपको एनजी-टेबल इंटरजेनरेशन के बारे में चिंता करने की आवश्यकता नहीं है।

वहां से, यह आपके बैकएंड डेटा से निपटने और यह सुनिश्चित करने के बारे में है कि यह आपको सही क्रम में सही डेटा भेज रहा है। फिर बस उस डेटा को प्लग इन करें और बैम करें, आपके पास अजाक्स सॉर्टिंग/फ़िल्टरिंग टेबल होगी।

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

आशा है कि यह किसी के लिए मददगार है।
फॉक्सडोनट

+1

+1

+1

वास्तव में अच्छा

मुझे पता है कि यह थोड़ा देर हो चुकी है लेकिन किसी ने सर्वर-साइड सॉर्ट किए गए डेटा को प्रदर्शित करने का वास्तव में एक अच्छा उदाहरण किया है:
https://www.codeproject.com/Articles/892301/Server-side-Data-Filtering-Sorting-and-Paging-with

मुझे नहीं पता था कि हम ऐसा कर सकते हैं। यह दस्तावेज़ीकरण में इतना स्पष्ट नहीं है। :(

हाय फॉक्सडोनट,
आप टिप्पणी वास्तव में पूरी मदद करते हैं, लेकिन जैसा कि मैं नया हूं कुछ चीजें मेरे लिए स्पष्ट नहीं हैं
1 # क्यों प्राप्त डेटा को फ़ंक्शन में तर्क के रूप में पारित किया जा रहा है।
जब मैं इसके बजाय अपने अजाक्स फ़ंक्शन को कॉल कर रहा हूं
MyResource.query(queryParams, getData);
यह डेटा दिखा रहा है लेकिन बाद में अजाक्स रिटर्न के रूप में गिनती रीफ्रेश नहीं की जा रही है। और अगर मैं अजाक्स कोड के अंदर पुनः लोड का उपयोग कर रहा हूं तो यह इन्फिन्टे लूप में चला जाता है :(

नमस्ते @ rbhargava25

फ़ंक्शन में तर्क के रूप में प्राप्त डेटा क्यों पारित किया जा रहा है।

क्योंकि MyResource.query एक एसिंक्रोनस फ़ंक्शन है। यह सर्वर से अनुरोध कर रहा है, और जब प्रतिक्रिया वापस आती है, तो हमें यह जानना होगा कि कौन सा कोड निष्पादित करना है। इस मामले में, _callback function_ को कॉल करना है, जो कि receiveData ।

उम्मीद है की वो मदद करदे।

ग्रेट थैंक्स फॉक्सडोनट ...
मैं संसाधन के बजाय सरल http अनुरोध का उपयोग करूंगा, मुझे उम्मीद है कि यह काम करेगा।