Basic pagination

[zolotoy]

Do I have to write any JS code to get pagination working just like in this example?
http://www.jeasyui.com/tutorial/datagrid/datagrid2.php

[jarry]

This tutorial has told you how to build a paging datagrid. Please download that tutorial, all the codes are available.

[zolotoy]

Just to make it clear. I am not after that specific solution which involves server side processing to serve pages. I am using it just as an UI illustration. MY data is fully loaded and I want to have pagination. Setting up pagination to true only creates a pager which is not functioning. What do I do to make it work?

Thanks

[jarry]

You may need to enable the client side pagination on a datagrid. Please refer to http://www.jeasyui.com/demo/main/index.php?plugin=DataGrid&theme=default&dir=ltr&pitem=Client%20Side%20Pagination

After create datagrid successfully, call 'clientPaging' method to enable client side pagination on a datagrid.

Code:

var dg = $('#dg');
dg.datagrid({...});
dg.datagrid('clientPaging');

[zolotoy]

So, you are saying I have to include all this code:

Code:

<script>
        (function($){
            function pagerFilter(data){
                if ($.isArray(data)){    // is array
                    data = {
                        total: data.length,
                        rows: data
                    }
                }
                var dg = $(this);
                var state = dg.data('datagrid');
                var opts = dg.datagrid('options');
                if (!state.allRows){
                    state.allRows = (data.rows);
                }
                var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
                var end = start + parseInt(opts.pageSize);
                data.rows = $.extend(true,[],state.allRows.slice(start, end));
                return data;
            }
 
            var loadDataMethod = $.fn.datagrid.methods.loadData;
            $.extend($.fn.datagrid.methods, {
                clientPaging: function(jq){
                    return jq.each(function(){
                        var dg = $(this);
                        var state = dg.data('datagrid');
                        var opts = state.options;
                        opts.loadFilter = pagerFilter;
                        var onBeforeLoad = opts.onBeforeLoad;
                        opts.onBeforeLoad = function(param){
                            state.allRows = null;
                            return onBeforeLoad.call(this, param);
                        }
                        dg.datagrid('getPager').pagination({
                            onSelectPage:function(pageNum, pageSize){
                                opts.pageNumber = pageNum;
                                opts.pageSize = pageSize;
                                $(this).pagination('refresh',{
                                    pageNumber:pageNum,
                                    pageSize:pageSize
                                });
                                dg.datagrid('loadData',state.allRows);
                            }
                        });
                        $(this).datagrid('loadData', state.data);
                        if (opts.url){
                            $(this).datagrid('reload');
                        }
                    });
                },
                loadData: function(jq, data){
                    jq.each(function(){
                        $(this).data('datagrid').allRows = null;
                    });
                    return loadDataMethod.call($.fn.datagrid.methods, jq, data);
                },
                getAllRows: function(jq){
                    return jq.data('datagrid').allRows;
                }
            })
        })(jQuery);
 
        function getData(){
            var rows = [];
            for(var i=1; i<=800; i++){
                var amount = Math.floor(Math.random()*1000);
                var price = Math.floor(Math.random()*1000);
                rows.push({
                    inv: 'Inv No '+i,
                    date: $.fn.datebox.defaults.formatter(new Date()),
                    name: 'Name '+i,
                    amount: amount,
                    price: price,
                    cost: amount*price,
                    note: 'Note '+i
                });
            }
            return rows;
        }
        
        $(function(){
            $('#dg').datagrid({data:getData()}).datagrid('clientPaging');
        });
    </script>

[jarry]

The 'clientPaging' method is not defined in the datagrid plugin, it is only an extended method. To use it, you have to include these codes to your page. You can save these codes to a single file such as 'datagrid-clientpaging.js' and then you can use it on any your pages.

Code:

<script src="datagrid-clientpaging.js"></script>

[zolotoy]

I was hoping that pagination is a built-in function.

[zolotoy]

The provided code is not generic. I need a generic solution for a client pagination.
Anything available?

Thanks

[zolotoy]

I am trying to implement code the example.
Just to reiterate. I put this into a separate file:

Code:

(function ($) {
    function pagerFilter(data) {
        if ($.isArray(data)) {    // is array
            data = {
                total: data.length,
                rows: data
            }
        }
        var dg = $(this);
        var state = dg.data('datagrid');
        var opts = dg.datagrid('options');
        if (!state.allRows) {
            state.allRows = (data.rows);
        }
        var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);
        var end = start + parseInt(opts.pageSize);
        data.rows = $.extend(true, [], state.allRows.slice(start, end));
        return data;
    }

    var loadDataMethod = $.fn.datagrid.methods.loadData;
    $.extend($.fn.datagrid.methods, {
        clientPaging: function (jq) {
            return jq.each(function () {
                var dg = $(this);
                var state = dg.data('datagrid');
                var opts = state.options;
                opts.loadFilter = pagerFilter;
                var onBeforeLoad = opts.onBeforeLoad;
                opts.onBeforeLoad = function (param) {
                    state.allRows = null;
                    return onBeforeLoad.call(this, param);
                }
                dg.datagrid('getPager').pagination({
                    onSelectPage: function (pageNum, pageSize) {
                        opts.pageNumber = pageNum;
                        opts.pageSize = pageSize;
                        $(this).pagination('refresh', {
                            pageNumber: pageNum,
                            pageSize: pageSize
                        });
                        dg.datagrid('loadData', state.allRows);
                    }
                });
                $(this).datagrid('loadData', state.data);
                if (opts.url) {
                    $(this).datagrid('reload');
                }
            });
        },
        loadData: function (jq, data) {
            jq.each(function () {
                $(this).data('datagrid').allRows = null;
            });
            return loadDataMethod.call($.fn.datagrid.methods, jq, data);
        },
        getAllRows: function (jq) {
            return jq.data('datagrid').allRows;
        }
    })
})(jQuery);

And here is my grid:

Code:

<div style="width:100%;height:100%">
    <table id="tg" easyui-treegrid ng-model="alarms" toolbar="#toolbar" pagination="true" fit="true"
            rownumbers="true" fitColumns="true" singleSelect="true" idField="id" treeField="name">
    </table>
</div>

Controller:

Code:

alarms.directive('easyuiTreegrid', function () {
    return {
        restrict: 'AE',
        require: 'ngModel',
        link: function (scope, elem, attrs, ngModel) {
            $(elem).datagrid({
                   columns: [[
                       { field: 'name', title: 'Name' },
                       { field: 'itemtype', title: 'Item Type' },
                        ....
                   ]]
            });
            ngModel.$render = function (value) {
                $(elem).treegrid('loadData', ngModel.$viewValue);
            };
            $(elem).datagrid({ data: ngModel.$viewValue }).datagrid('clientPaging');
        }
    }
});

Paging is not working for me. Please help.

Thanks

[zolotoy]

It does not work. First of all, the grid comes up with a vertical scroll bar which is wrong already. Clicking on pager Next button triggers some kind of event and then pager buttons become disabled and it says Page 0 of 0.
Please tell me how I can trouble shoot it.
Here is how I am setting up client paging on the my treegrid after data has been loaded:

ngModel.$render = function (value) {
                $(elem).treegrid('loadData', ngModel.$viewValue);
            }
$(elem).treegrid('clientPaging');

Thanks

[zolotoy]

I have also found this example:
http://www.aa.org/js/jquery-easyui/demo/datagrid/clientpagination.html

I am trying to understand how come it does work without setting 'clientPaging' anywhere.

Can you please provide a little explanation of how does pagination work in your product?

Thanks