EasyUI Forum
September 14, 2025, 03:58:23 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Client pagination  (Read 8353 times)
zolotoy
Jr. Member
**
Posts: 89


View Profile Email
« on: July 20, 2015, 07:25:21 AM »

I am trying to setup a client pagination. Here is my code:
Code:
$(elem).treegrid({
                columns: [[
                    { field: 'name', title: 'Name' },
                     ............
                ]],
                loadFilter: scope.pagerFilter

Code:
$scope.pagerFilter = function (data) {
        var dg = $(this);
        var opts = dg.treegrid('options');
        var pager = dg.treegrid('getPager');
        pager.pagination({
            onSelectPage: function (pageNum, pageSize) {
                opts.pageNumber = pageNum;
                opts.pageSize = pageSize;
                pager.pagination('refresh', {
                    pageNumber: pageNum,
                    pageSize: pageSize
                });
                dg.treegrid('loadData', data);
            }
        });
        if (!data.originalRows) {
            data.originalRows = (data.rows);
        }
        var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);
        var end = start + parseInt(opts.pageSize);
        data.rows = (data.originalRows.slice(start, end));
        return data;
    }

Does not work at all.
Can some please help?

Thanks
Logged
jarry
Administrator
Hero Member
*****
Posts: 2298


View Profile Email
« Reply #1 on: July 20, 2015, 08:10:43 PM »

The client paging code for the datagrid can not be used in the treegrid component. You must use the corresponding client paging code for the treegrid. Please refer to the following example.

http://www.jeasyui.com/demo/main/index.php?plugin=TreeGrid&theme=default&dir=ltr&pitem=Client%20Side%20Pagination
Logged
zolotoy
Jr. Member
**
Posts: 89


View Profile Email
« Reply #2 on: July 21, 2015, 11:01:25 AM »

I am using code for the example.
My controller:
Code:
.....
ngModel.$render = function (value) {
                $(elem).treegrid('loadData', ngModel.$viewValue);
            };
$(elem).treegrid().treegrid('clientPaging');

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

And all the code that starts with (function($){ .....  has been copied into a separate file which is loaded in the main page.

The screen comes up with a pager that shows 30, but the Next button is disabled.
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!