AngularJS is GREAT! you should neglect whatever framework you are using right now, and switch to AngularJS immediately!
In the following posts I will show you how you can easily write a reusable table with sorting, filter and paging! And it is all reusable, customizable and easy - thanks to AngularJS! You guys rock! At the end I will show you how it all comes together, and I will provide a github link to the source code. This example is great for advanced programming in AngularJS.
Weeks after writing these posts (not all published yet) - I came across a nice project called “smart table” - what do you know? After you read my posts, you will know how to write this “smart table” plugin in AngularJS.
Let me use this opportunity to point out this plugin did a nice job with the filtering feature. It simply placed an input field on every column header - which is very intuitive and space is used well.
What I show in these posts is the basics. You can easily modify them to include server side filtering, customizable templates, page jump links and probably a lot more.
Before we begin implementing the features, we need to set the environment. For data, I decided to use a nifty cool tool for JSON data generation. However, since they will not save my JSON for longer than 30 days, I saved their output into a google doc, and I serve it from my google drive.
Below you can find an HTML template to start from. This template shows a simple AngularJS usage for building a table from JSON data. I added some basic CSS to comfort. For some reason, using $http.get did not go that well, so I used JQuery instead.
Here is the code as it should look like at the end.