# Grids and server side paging, sorting and filtering **URL:** \ **Category:** Ember Data\ **Created:** [October 11, 2013, 2:52am UTC](https://discuss.emberjs.com/t/grids-and-server-side-paging-sorting-and-filtering/2938 "2013-10-11T02:52:05Z")\ **Posts on this page:** 13\ **Page:** 1
**Author:** ![ccverak](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/ccverak/32/15060_2.png) [@ccverak](https://discuss.emberjs.com/u/ccverak)\ **Post date:** [October 11, 2013, 2:52am UTC](https://discuss.emberjs.com/t/grids-and-server-side-paging-sorting-and-filtering/2938/1 "2013-10-11T02:52:05Z")
I want to make a grid with server side pagination sorting and filtering, i have all set on the back-end with Rails and active-models-serializers, currently i managed to do it with [datatables.net](http://datatables.net) plugin and plain JS/JQuery, but ATM i want to migrate the front-end to EmberJS, till the moment all i can find are some examples with ArrayController and Pageable-Mixings doing some kind of client side pagination which don’t work for me on this application. Is there any [datables.net](http://datables.net) replacement in the EmberJS ecosystem?, any help is appreciated. ---
**Author:** ![jasonmit](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/jasonmit/32/182_2.png) [@jasonmit](https://discuss.emberjs.com/u/jasonmit)\ **Post date:** [October 11, 2013, 6:02am UTC](https://discuss.emberjs.com/t/grids-and-server-side-paging-sorting-and-filtering/2938/2 "2013-10-11T06:02:37Z")
On my project we leveraged [Ember Table](https://github.com/Addepar/ember-table) but we had to extend it to handle our complicated use-case. You might find what you are looking for out-of-the-box. ---
**Author:** ![tcjr](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/tcjr/32/14655_2.png) [@tcjr](https://discuss.emberjs.com/u/tcjr)\ **Post date:** [October 11, 2013, 2:55pm UTC](https://discuss.emberjs.com/t/grids-and-server-side-paging-sorting-and-filtering/2938/3 "2013-10-11T14:55:07Z")
Here’s how I use server-side (kaminari) pagination with Ember. [https://gist.github.com/tcjr/6935684](https://gist.github.com/tcjr/6935684) ---
**Author:** ![ccverak](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/ccverak/32/15060_2.png) [@ccverak](https://discuss.emberjs.com/u/ccverak)\ **Post date:** [October 11, 2013, 3:15pm UTC](https://discuss.emberjs.com/t/grids-and-server-side-paging-sorting-and-filtering/2938/4 "2013-10-11T15:15:49Z")
@jasonmit, @tcjr I appreciate the help, let’s see what i can do with it, I wish there is a versatile table with all this features as Backbone and AngularJS has, I’m sure there are many people with complex grids requirements on their sites; I’m sure too many of them are not using EmberJS for the lack of full featured grids; sometimes there is not time to assemble all the peaces together by yourself. Do you agree?, I think we should start with a project regarding this, a 1-1 replacement to [datatables.net](http://datatables.net) written in EmberJS. ---
**Author:** ![jasonmit](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/jasonmit/32/182_2.png) [@jasonmit](https://discuss.emberjs.com/u/jasonmit)\ **Post date:** [October 11, 2013, 4:15pm UTC](https://discuss.emberjs.com/t/grids-and-server-side-paging-sorting-and-filtering/2938/5 "2013-10-11T16:15:30Z")
[Here is a gist](https://gist.github.com/alexspeller/6251054) by @alexspeller where he extended Ember Table and implemented sorting/filtering/grouping etc. ---
**Author:** ![ccverak](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/ccverak/32/15060_2.png) [@ccverak](https://discuss.emberjs.com/u/ccverak)\ **Post date:** [October 11, 2013, 5:10pm UTC](https://discuss.emberjs.com/t/grids-and-server-side-paging-sorting-and-filtering/2938/6 "2013-10-11T17:10:06Z")
It is using server side?, seems interesting to me, i will take a look to it, many thanks @jasonmit!!!. ---
**Author:** ![jasonmit](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/jasonmit/32/182_2.png) [@jasonmit](https://discuss.emberjs.com/u/jasonmit)\ **Post date:** [October 11, 2013, 5:29pm UTC](https://discuss.emberjs.com/t/grids-and-server-side-paging-sorting-and-filtering/2938/7 "2013-10-11T17:29:07Z")
When you say server side, you’re asking if it’s hitting an API and returning data that is rendering in the grid? If so, yes. It’s essentially an ArrayController and you can redraw the content with events that bubble up to the router, make the AJAX request, and swap out the array controller’s content. ---
**Author:** ![ccverak](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/ccverak/32/15060_2.png) [@ccverak](https://discuss.emberjs.com/u/ccverak)\ **Post date:** [October 11, 2013, 10:02pm UTC](https://discuss.emberjs.com/t/grids-and-server-side-paging-sorting-and-filtering/2938/8 "2013-10-11T22:02:11Z")
Hey guys, seeing some many examples and sites using client side pagination; now i wonder: why is so much focus on client side pagination?, is it suitable for large amounts of data?, AFAIK is not but i might be wrong (i might have missed http request gzipping and client side caching which can improve performance) can you please give your opinion?, imagine you have to show up to 10k rows of data. ---
**Author:** ![jasonmit](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/jasonmit/32/182_2.png) [@jasonmit](https://discuss.emberjs.com/u/jasonmit)\ **Post date:** [October 12, 2013, 5:08am UTC](https://discuss.emberjs.com/t/grids-and-server-side-paging-sorting-and-filtering/2938/9 "2013-10-12T05:08:11Z")
> [@ccverak](#): > > imagine you have to show up to 10k rows of data. That is where virtualization comes in, which is built into Ember Table. You can check out their [second example](http://addepar.github.io/ember-table/) which has 500k records. If you’re worried about payload size that could potentially be a concern (I’m not sure how complex your models are). Ember Table is agnostic to how it receives the data it’s rendering. You could easily implement pagination with basic routes or send it all down in one shot. ---
**Author:** ![ccverak](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/ccverak/32/15060_2.png) [@ccverak](https://discuss.emberjs.com/u/ccverak)\ **Post date:** [October 12, 2013, 6:01pm UTC](https://discuss.emberjs.com/t/grids-and-server-side-paging-sorting-and-filtering/2938/10 "2013-10-12T18:01:23Z")
Thanks for everything @jasonmit! ---
**Author:** ![ccverak](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/ccverak/32/15060_2.png) [@ccverak](https://discuss.emberjs.com/u/ccverak)\ **Post date:** [October 12, 2013, 6:12pm UTC](https://discuss.emberjs.com/t/grids-and-server-side-paging-sorting-and-filtering/2938/11 "2013-10-12T18:12:13Z")
Is there any place where i can read more on virtualization? ---
**Author:** ![jasonmit](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/jasonmit/32/182_2.png) [@jasonmit](https://discuss.emberjs.com/u/jasonmit)\ **Post date:** [October 13, 2013, 1:22am UTC](https://discuss.emberjs.com/t/grids-and-server-side-paging-sorting-and-filtering/2938/12 "2013-10-13T01:22:04Z")
I’m not an expert in this but I can explain the gist of it. It only ever renders the number of rows that could fit inside the viewport, in this case the height of the table, into the DOM. The rest of the rows sit in memory (or lazy loaded via ajax calls) while emulating the rest of the rows by making the scrollbar appear as if there is content below or above the point where you are at. This is calculated based on the fixed row height \* total count. Tt would be difficult to implement virtualization otherwise if the row height is not fixed. As you scroll, it reuses the existing row views, instead of creating new ones and simply swaps out the row content with new content based on the scroll position. ---
**Author:** ![ccverak](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/ccverak/32/15060_2.png) [@ccverak](https://discuss.emberjs.com/u/ccverak)\ **Post date:** [October 14, 2013, 5:56pm UTC](https://discuss.emberjs.com/t/grids-and-server-side-paging-sorting-and-filtering/2938/13 "2013-10-14T17:56:34Z")
@jasonmit +1, I appreciate the explanation.