We will build two types of data-grids (tables) in this article:
* One with AJAX based paging and sorting for displaying large number of records
* One with JavaScript based (no-postbacks/AJAX calls) paging and sorting for lesser number of records
In both of the above we want the following:
* Reusable, extensible, and maintainable JavaScript code
* Use Knockout JS (KO)
We would display a list of students, their age, school name, and school address in a data-grid (as shown in the image above).
In this article, I want to demonstrate the use of KO and some basic object oriented JavaScript. There are other good articles on CodeProject demonstrating, for example, the use of jqGrid with MVC 4. However here we will develop the entire data-grid (with paging/sorting functions) to have better control over the generated output.
Though I have used ASP.NET MVC 4 as backend to this project, other technologies (PHP etc.) can be used as well, as the client side code to generate data-grid is agnostic of backend technology. I will keep explaining any particular JavaScript constructs that are a bit tricky for users having only basic knowledge of JavaScript.