ember data grid

//    JS
App.DataGridView = Em.View.extend({

    tagName : 'table',

    layoutName : 'dataGrid',

    orderBy : null,
    order : 'asc',
    currentPage: 1,
    limit: 10,
    total : 0,

    init : function() {
        this._super();
        var pagingParams = this.get('controller.pagingParams');
        if (pagingParams) {
            this.set('orderByProp', pagingParams.orderBy);
            this.set('limit', pagingParams.limit);
            this.set('currentPage', Math.floor(pagingParams.offset / pagingParams.limit) + 1);
            this.set('order', pagingParams.desc ? 'desc' : 'asc');
        }
    },

    onCollectionUpdate : function() {
        this.set('total', this.get('controller.collectionSize'));
    }.observes('controller.collectionSize'),

    didInsertElement : function() {
        this.onCollectionUpdate();
    },

    maxPage : function() {
        return Math.floor(this.get('total')/this.get('limit')) + 1;
    }.property('total', 'limit'),

    columns : function() {
        var orderByProp = this.get('orderByProp');
        var order = this.get('order');
        var columns = this.get('columnNames').split('|').map(function(item) {
            var arr = item.split('=');
            var label = arr.length==2 ? arr[1].trim() : arr[0].trim();
            var name = arr.length==2 ? arr[0].trim() : "";
            var sortClass = "";
            if (orderByProp === name) {
                sortClass = order;
            }
            return  Em.Object.create({name : name, label : label, sortClass: sortClass});
        });

        return columns;
    }.property('columnNames').cacheable(),

    colCount : function() {
        return this.get('columns.length');
    }.property('columns'),

    pagingToShow : function() {
        var res = [];
        var currentPage  = this.get('currentPage');
        var maxPage  = this.get('maxPage');
        if (currentPage>3) {
            res.push({label:'...'});
        }
        if (currentPage>2) {
            res.push({label:currentPage-2, link:true});
            res.push({label:currentPage-1, link:true});
        } else if (currentPage==2) {
            res.push({label:1, link:true});
        }

        res.push({label:currentPage});

        if (currentPage < maxPage) {
            res.push({label:currentPage+1, link:true});
        }
        if (currentPage + 1 < maxPage) {
            res.push({label:currentPage+2, link:true});
        }
        if (currentPage + 2 < maxPage) {
            res.push({label:"..."});
        }

        return res;
    }.property('currentPage', 'maxPage'),

    isLimit10 : function() {
        return this.get('limit') == 10;
    }.property('limit'),
    isLimit20 : function() {
        return this.get('limit') == 20;
    }.property('limit'),
    isLimit30 : function() {
        return this.get('limit') == 30;
    }.property('limit'),

    actions : {
        sortCol : function(col) {
            if (this.get('orderBy') != col) {
                if (this.get('orderBy')) {
                    this.get('orderBy').set('sortClass', '');

                }

                col.set('sortClass', 'asc');
                this.set('orderBy', col);
                this.set('order', 'asc');
            } else if (this.get('order') == 'asc') {
                this.set('order', 'desc');
                col.set('sortClass', 'desc');
            } else {
                this.set('orderBy', null);
                col.set('sortClass', '');
            }

            this.updateState();
        },

        firstPage : function() {
            this.set('currentPage', 1);
            this.updateState();
        },
        prevPage : function() {
            var currentPage = this.get('currentPage');
            this.set('currentPage', currentPage > 1 ? currentPage-1 : 1);
            this.updateState();
        },
        toPage : function(page) {
            this.set('currentPage', page);
            this.updateState();
        },
        nextPage : function() {
            var currentPage = this.get('currentPage');
            this.set('currentPage', currentPage < this.get('maxPage') ? currentPage+1 : this.get('maxPage'));
            this.updateState();
        },
        lastPage : function() {
            this.set('currentPage', this.get('maxPage'));
            this.updateState();
        },
        setLimit : function(limit) {
            this.set('limit' , limit);
            this.updateState();
        }
    },

    getParams : function() {
        return {
            limit : this.get('limit'),
            offset : (this.get('currentPage')-1)*this.get('limit'),
            orderBy : this.get('orderBy.name'),
            desc : this.get('order') == 'desc'
        };
    },

    updateState : function() {
        this.get('controller').send('updateDataGridState', {
            collectionName : this.get('collectionName'),
            params : this.getParams()
        });
    }
});




//Grid template



<script type="text/x-handlebars" data-template-name="dataGrid">
    <thead>
        <tr>
            {{#each col in view.columns}}
                <th>
                    {{#if col.name}}
                        <a {{action sortCol col target="view"}}>{{col.label}}</a>
                        <i {{bind-attr class=":sort col.sortClass"}}></i>
                    {{else}}
                        {{col.label}}
                    {{/if}}
                </th>
            {{/each}}
        </tr>
    </thead>
    <tbody>
        {{yield}}
    </tbody>
    <tfoot>
        <tr>
            <td {{bind-attr colspan="view.colCount"}}>
                <div class="paging-controls">
                    <a {{action firstPage target="view"}}>
                        <i class="paging paging-first"></i>
                    </a>
                    <a {{action prevPage target="view"}}>
                        <i class="paging paging-prev"></i>
                    </a>

                    {{#each page in view.pagingToShow}}
                        {{#if page.link}}
                            <a {{action toPage page.label target="view"}}>
                                {{page.label}}
                            </a>
                        {{else}}
                                {{page.label}}
                        {{/if}}
                    {{/each}}
                    <a {{action nextPage target="view"}}>
                        <i class="paging paging-next"></i>
                    </a>
                    <a {{action lastPage target="view"}}>
                        <i class="paging paging-last"></i>
                    </a>
                </div>
                <div class="limit-controls">
                    Отображать по
                    <a {{action setLimit 10 target="view"}} {{bind-attr class="isLimit10:active"}}> 10 </a>
                    <a {{action setLimit 20 target="view"}} {{bind-attr class="isLimit20:active"}}> 20 </a>
                    <a {{action setLimit 30 target="view"}} {{bind-attr class="isLimit30:active"}}> 30 </a>
                    строк
                </div>
            </td>
        </tr>
    </tfoot>

</script>


//grid usage

{{#view App.DataGridView class="dashletTable" collectionName="audit" collectionBinding="controller.model"
            columnNames="№ | datetime=Дата | userId=Пользователь | Сообщение" }}

                {{#each cont in controller}}
                    <tr>
                        <td>
                            {{#link-to "audit.detail" cont}}{{cont.id}}{{/link-to}}
                        </td>
                        <td>
                            {{view App.FormatDateView dateBinding='cont.datetime' format="DD.MM.YYYY HH:mm:ss"}}
                        </td>
                        <td>
                            {{#if cont.user}}
                                {{cont.user.name}}
                            {{else}}
                                Система
                            {{/if}}
                        </td>
                        <td>
                            {{cont.message}}
                        </td>
                    </tr>
                {{else}}
                    <tr>
                        <td colspan="4">
                            Нет данных
                        </td>
                    </tr>
                {{/each}}
            {{/view}}