Geekly Articles each Day
📜 ⬆️ ⬇️

AngularJS: another table with sorting, filtering and page-by-page navigation

What is it?


This is another AngularJS application that adds sorting, filtering, pagination, etc. to a regular table.

Of course, there are several ready-made solutions ( 1 , 2 , 3 , 4 , 5 ), but they were not suitable for several reasons. As a result, it was decided to create my own version, especially since I do not have much work with AngularJS, and to study this framework and its amazing capabilities is better in practice.

I warn you at once: the source code is not quite “combed”, it is not commented in places, and is not as elegant as we would like; Probably, I did not use any best practices. But since I plan to constantly use this solution and develop it, then over time everything will be. I also hope for your advice, suggestions and suggestions. Nevertheless, this is a fully functional application, and it is already used in our projects. The article will not describe in detail all-all-all features and settings - this has already been done in the source code of the examples, I’ll dwell on the most important, I think.
Sources on github , documentation and examples .
')

For what?




Table structure


<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>

As you noticed, the code uses the binding syntax <[]> instead of {{}}. We use Smarty in our projects and to avoid conflicts, we had to make some changes to the configuration of the application. However, you are free to change or not to use AppFactory at all and use Angular native syntax.
AppFactory Code
 /** *   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); };



Column sorting


Sorting appears in the table if you add the make-sotrable attribute:
 <solo-table items-on-page = "10" make-sortable>

There are 2 modes:
ASC + DESC - sorting by descending or ascending value (default)
 <thead> <tr> <!--   ,    ,    sort-by='_' --> <th sort-by='id'>Id</th> <th sort-by='name'>Name</th> <th>Address</th> </tr> </thead>

DEFAULT + ASC + DESC - sort by default, descending or increasing value. "Default" - this means that the data will be shown in the order in which they were provided to the application. By clicking on the column header, you can sort the data in 3 of these directions. To do this, assign the value “3” to the make-sortable attribute:
 <solo-table items-on-page = "10" make-sortable="3">

And if you want one column to be immediately sorted in some direction, then use default-sort, note that this directive can be applied to only one column of the table (at least for now):
 <th sort-by='name' default-sort="asc">Name</th>

To display sorting pointers in headers, do not forget to insert CSS, or your implementation
CSS code
 .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; }


We use our own filter


To do this, you need to create your own module with a filter implementation and connect it to the application. In this example, the filter by year is used: only those records that have a year field older than the specified one are shown (see example # 5).

 <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>

And also add this filter to ng-repeat, where filterModel is the name of the model associated with input:
 <tr ng-repeat="item in filtered = (original | older:filterModel)" >

And this is how we can filter only by the name and address fields (see example # 6):
 <tr ng-repeat="item in filtered = (original | filterByFields:filterModel:['name', 'address'])" >

In the plans



Something else?


Yes. This all works with AngularJS version 1.1.5 and higher. And with the Russian text also works. For more detailed comments and syntax descriptions, see the source codes of the examples. Questions, suggestions and constructive criticism and help are more than welcome.

Source: https://habr.com/ru/post/197646/

More articles:


All Articles