AngularJS: छँटाई, छानने और पेजिंग के साथ एक और तालिका

यह क्या है

किस लिए?

• हम जल्दी से एक प्रोटोटाइप एप्लिकेशन विकसित करना चाहते हैं, छांटने, फिल्टर और पेज नेविगेशन के साथ एक टेबल (सूची) के सर्वर संस्करण को विकसित करने का समय नहीं है। इसलिए, तालिका का सभी डेटा क्लाइंट पर है, सर्वर तक पहुंचने की कोई आवश्यकता नहीं है।
• एंगुलरजेएस को जानने के लिए लेआउट डिजाइनर की आवश्यकता नहीं है
• तालिका का लेआउट यथासंभव सामान्य HTML के अनुरूप होना चाहिए, और निर्देशों का ढेर नहीं होना चाहिए। कम जादू, कृपया।
• मार्कअप में अन्य कोणीय निर्देशों के उपयोग को सीमित न करें।
• सूची में लाइव खोज जब रिकॉर्ड फ़िल्टर किए जाते हैं जैसे आप खोज पाठ में लिखते हैं।
• सभी कॉलमों को नहीं बल्कि चयनात्मक लोगों द्वारा फ़िल्टर करने की क्षमता।
• अपने स्वयं के फ़िल्टर लिखने की क्षमता।
• नेविगेशन को शांत करने की क्षमता की आवश्यकता है।
• स्तंभ की छँटाई।
• तालिका के HTML कोड को बदलने की स्वतंत्रता, और आम तौर पर तालिका से संबंधित कोड।
• सीखना AngularJS

तालिका संरचना

<div id="testApp"> <!-- ,      --> <solo-table items-on-page = "10"> <!--       JSON,  --> <div solo-table-data> [{ "id": 1, "name": "Alvah Gleason", "address": "58707 Ophelia FieldEast Lorena, LA 89754-9301", "year": "1981" }, ......] </div> <!--         --> <div> Page <[pager.currentPage]> of <[pager.foundPages]>. Total items: <[pager.found]> </div> <!--   --> <table class="table table-striped table-bordered" > <thead> <tr> <th>Id</th> <th>Year</th> <th>Name</th> <th>Address</th> </tr> </thead> <!--     --> <tr ng-repeat="item in filtered = (original)" > <td><[item.id]></td> <td><[item.year]></td> <td><[item.name]></td> <td><[item.address]></td> </tr> </table> <!--   --> <div> <a href="" ng-click="gotoFirstPage()">First page | </a> <a href="" ng-click="gotoPrevPage()"> ←prev | </a> <a href="" ng-click="gotoNextPage()">next → | </a> <a href="" ng-click="gotoLastPage()">Last page </a> </div> </solo-table> </div> <script> //   ,    AngularJS  //     example,     testApp, //        AppFactory("testApp", "example", ["solo.table"]); </script> 

 /** *   Angular    . *       . * * @param elementId ID DOM-,     * @param appName   ( ) * @param modules  ,    * @constructor */ var AppFactory = function(elementId, appName, modules) { 'use strict'; if (!modules) modules = []; var el = document.getElementById(elementId); angular.module(appName, modules).config([ /** * ..  Smarty,   {{  }}  , * ,  <[  ]> */ "$interpolateProvider", function($interpolateProvider){ $interpolateProvider.startSymbol('<['); $interpolateProvider.endSymbol(']>'); } ]); modules.push(appName); angular.bootstrap(el, modules); }; 

स्तंभ क्रमबद्ध करें

 <solo-table items-on-page = "10" make-sortable> 

 <thead> <tr> <!--   ,    ,    sort-by='_' --> <th sort-by='id'>Id</th> <th sort-by='name'>Name</th> <th>Address</th> </tr> </thead> 

 <solo-table items-on-page = "10" make-sortable="3"> 

 <th sort-by='name' default-sort="asc">Name</th> 

 .solo-table-sort-asc > .solo-column-arrow { position: relative; top: 10px; margin-left: 5px; border-color: black transparent; border-style: solid; border-width: 5px 5px 0px 5px; height: 0px; width: 0px; } .solo-table-sort-desc > .solo-column-arrow { position: relative; top: -10px; margin-left: 5px; border-color: black transparent; border-style: solid; border-width: 0px 5px 5px 5px; height: 0px; width: 0px; } .solo-table-column-cursor { cursor: pointer; } 

हम अपने स्वयं के फ़िल्टर का उपयोग करते हैं

 <script> //     angular.module("myFilters", []) //    ,    year   .filter("older", function(){ return function(items, search){ if (!search) return items; search = parseInt(search); var test = function(el, idx, array){ return el.year > search; }; return items.filter(test); }; }); //     AppFactory("testApp", "example", ["solo.table", "myFilters"]); </script> 

 <tr ng-repeat="item in filtered = (original | older:filterModel)" > 

 <tr ng-repeat="item in filtered = (original | filterByFields:filterModel:['name', 'address'])" > 

योजनाओं में

• और उदाहरण
• URL में तालिका पैरामीटर सहेजना
• न केवल तालिकाओं पर लागू करने की क्षमता, बल्कि किसी भी DOM तत्वों (UL> LI, div, आदि) से सूचियों तक।
• ...

कुछ और?