Knockout

JQuery DataTable With Knockout Server Side Paging in MVC

Vasu .Net MVC, javascript, Jquery Data Table, KnockoutJs , ,

Content

  1. Analysis of client side and server side listings
  2. How to implement the same by choosing the best approach
  3. Solution to the Server Side Grid Problem

1. Analysis of client side and server side listings

Every project needs to show some or the other listing be it a job listing or a product listing and if this list grows in size then it is also  required to add paging and filtering to it. You may even want to add sorting to the list for the ease of user. We have tons of solutions for the above problem statement I will list few of them –

  1. Create your custom paging , sorting and Filtering which actually requires a lot of time and expertise.
  2. Use some third party client side library like JQGrid or JQuery Datatable, I personally prefer JQuery Data Table because it is much more matured and has a good community backing it up.

Now using these client side libraries makes it very easy to implement all these functionalities and everything works pretty well.

But a major problem in using these client side libraries is that they fetch all the data at once and then apply paging and sorting to it. And if the length of JSON data travelling over the network is very large that is if the no of records you are fetching is very large then it may become very slow or even fail to load in some cases.

2. How to implement the same by choosing the best approach

One of the possible solution to this problem is to apply server side paging and sorting .And the good part about Jquery Datatable is that it also gives you an option to apply server side paging by  providing an ajax data source which works great.

But it becomes a nightmare if you try to integrate knockout with server side Jquery Data Tables. I prefer knockout as it goes very well with MVC and saves a lot of time I am sure you will agree with me to it if you have used it with MVC in your projects.

An easier way out to this problem is to bind your table using knockout and then apply data table to it, which is actually not very high in performance and not a suggested approach.

There are many third party libraries that can integrate Knockout with data table and server side paging for you, but it is very difficult to find the right one and there are a very few that will give you an integration with the latest version of data table like 1.10.3.

3. Solution to the Server Side Grid Problem 

I found a similar library that  had support for knockout data table and server side paging it was cog.js a third party library and it works like a charm with the older version of JQuery Data Tables that is 1.9, but when we upgraded the data table version it stopped working.

So I tried to change the basic attributes and tweak it a bit to  make it work with JQuery Data Table 1.10.3 . There might be some scope of improvement for the same but it is working perfectly fine for me. I  have also implemented templating as it is a very common requirement these days, it will help you easily switch between Grid and list views.The data tables also uses Data Table Twitter Bootstrap css  specially designed for data tables so they are responsive as well.

KnocoutJs + Jquery DataTable + Templating +Server Side Paging + Responsive + what else could you ask for ?

You can find the source code for the same over here .

I have commented the code as much as I could if you face any problem in understanding the code or if you feel a need to have a documented post for the same do let me know.

I will be happy to hear if anyone has even a better solution to this problem.