कोणीयजेएस तालिका निर्देश

AngularJS एक बहुत ही आशाजनक और तेज़ गति वाली जावास्क्रिप्ट फ्रेमवर्क है। मैंने कई चौखटे आज़माए और इस पर समझौता किया क्योंकि यह सचमुच लेआउट को पुनर्जीवित करना संभव बनाता है। मुझे वास्तव में निर्देशों का कार्यान्वयन पसंद है, जो लगातार उपयोग के लिए कुछ तत्वों को तैयार करना संभव बनाता है। इंटरनेट पर बहुत सारे उदाहरण और तैयार किए गए समाधान हैं, लेकिन मुझे एक समाधान नहीं मिला, यही कारण था कि यह लेख और एक छोटा पुस्तकालय लिखने का कारण था।

मैं अक्सर डेटा पर आता हूं, अर्थात् एक तालिका में डेटा की प्रस्तुति। प्रत्येक ऐसे इंटरफ़ेस में कई क्षमताएं होनी चाहिए: अंजैक्स के साथ डेटा लोड करना, बड़ी मात्रा में डेटा को पृष्ठों में तोड़ना, डेटा को फ़िल्टर करना और सॉर्ट करना।
मैं इन समस्याओं को जल्दी से हल करना चाहता था और कोड की एक न्यूनतम राशि लिखकर।
यहाँ क्या हुआ:
गिटहब भंडार

<table ng-table="tableParams" show-filter="true" class="table"> <tr ng-repeat="user in users"> <td title="Name" filter="{ 'name': 'text' }" sortable="name"> {[user.name]} </td> <td title="Age" filter="{ 'action': 'button' }" sortable="age"> {[user.age]} </td> </tr> </table> 

जावास्क्रिप्ट:

 var Api = $resource('/data'); $scope.tableParams = new ngTableParams({ page: 1, // show first page total: 0, // length of data count: 10, // count per page sorting: { name: 'asc' // initial sorting } }); $scope.$watch('tableParams', function(params) { $scope.loading = true; // ajax request to api Api.get(params.url(), function(data) { $scope.loading = false; // set new data $scope.users = data.result; // update table params $scope.tableParams.total = data.total; }); }, true); 

डेमो

जैसा कि html कोड से देखा जा सकता है, प्रोग्रामर स्वयं तालिका की पंक्तियों को भरने और उसमें प्रत्येक सेल को प्रदर्शित करने के लिए टेम्पलेट को नियंत्रित करता है, जो कि विशिष्ट विशेषता है जो इस समाधान को दूसरों से अलग करता है जिनकी मैंने जांच की है, उदाहरण के लिए, एनजी-ग्रिड ।

तालिका शीर्षक और पृष्ठांकन स्वचालित रूप से उत्पन्न होते हैं और तालिका में जोड़ दिए जाते हैं। निर्देश और डेटा लोडिंग कोड के बीच का पूरा संबंध tableParams पैरामीटर को सौंपा गया है, जिसमें से ट्रैकिंग डेटा (सर्वर से लोड या सरणी को फिर से सॉर्ट करने) को जानने में मदद करती है।

नतीजतन, हमारे पास एक छोटा निर्देश है जो जीवन को थोड़ा बेहतर बनाता है। मुझे लगता है कि AngularJS में एक छोटे से बग के कारण इंटरनेट पर इस तरह के कुछ समाधान हैं। सच में, अगर यह अस्तित्व में नहीं था, तो सब कुछ बहुत ही शांत और उपयोगी ng-transclude साथ हल हो गया होगा। लेकिन जब तक यह तय नहीं हो जाता, मुझे उम्मीद है कि मेरा समाधान आपके लिए उपयोगी होगा।