Title: Basic pagination
Post by: zolotoy on July 08, 2015, 11:20:02 AM
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
Title: Re: Basic pagination
Post by: jarry on July 08, 2015, 04:28:44 PM
This tutorial has told you how to build a paging datagrid. Please download that tutorial, all the codes are available.
Title: Re: Basic pagination
Post by: zolotoy on July 09, 2015, 12:50:13 AM
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
Title: Re: Basic pagination
Post by: jarry on July 09, 2015, 02:31:28 AM
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. var dg = $('#dg');
dg.datagrid({...});
dg.datagrid('clientPaging');
Title: Re: Basic pagination
Post by: zolotoy on July 09, 2015, 02:36:40 AM
So, you are saying I have to include all this 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>
Title: Re: Basic pagination
Post by: jarry on July 09, 2015, 02:44:28 AM
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. <script src="datagrid-clientpaging.js"></script>
Title: Re: Basic pagination
Post by: zolotoy on July 09, 2015, 11:16:00 AM
I was hoping that pagination is a built-in function.
Title: Re: Basic pagination
Post by: zolotoy on July 12, 2015, 04:50:35 AM
The provided code is not generic. I need a generic solution for a client pagination.
Anything available?
Thanks
Title: Re: Basic pagination
Post by: zolotoy on July 12, 2015, 09:00:36 AM
I am trying to implement code the example. Just to reiterate. I put this into a separate file: (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: <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: 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
Title: Re: Basic pagination
Post by: zolotoy on July 19, 2015, 05:22:19 AM
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
Title: Re: Basic pagination
Post by: zolotoy on July 19, 2015, 05:34:52 AM
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
|