I am facing problem with pagination in jqgrid with array data having 18 records, but the records are not displaying in pages even I specified pagination:true,pager:jQuery('#pager1'). Can you please help me to implement pagination instead of scrolling.
<script type="text/javascript">
jQuery("#list4").jqGrid({
datatype: "clientSide",
height: 200,
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:60, sorttype:"int"},
{name:'invdate',index:'invdate', width:90, sorttype:"date"},
{name:'name',index:'name', width:100},
{name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
{name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},
{name:'total',index:'total', width:80,align:"right",sorttype:"float"},
{name:'note',index:'note', width:150, sortable:false}
],
multiselect: true,
pagination:true,
pager:jQuery('#pager1'),
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'id',
sortorder: 'asc',
viewrecords: true,
page: 1,
loadonce: true,
totalpages: 2,
totalrecords:18,
showpage:true,
imgpath: "/themes/default/images",
caption: "Manipulating Array Data"
});
var mydata = [
{id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"10",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"11",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"12",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"13",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"14",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"15",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"16",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"17",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"18",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
];
for(var i=0;i<=mydata.length;i++)
jQuery("#list4").addRowData(i+1,mydata[i]);
You main problem is you should reset rowNum after the adding the large number of rows. The line
jQuery("#list4").setGridParam({ rowNum: 10 }).trigger("reloadGrid");
at the end of your code will fix the problem. I recommend you to add the line
jQuery("#list4").jqGrid('navGrid','#pager1',{edit:false,add:false,del:false});
directly after the definition of the jqGrid. You will then have not only data paging, but also data filtering (searching) and refresh (reset filter).
Some more small remarks:
in the definition of the mydata array you should remove ',' before ']'.
in the for loop you should use i<mydata.length instead of i<=mydata.length.
you should remove from the definition of jqGrid following parameters which are either non existent (like pagination) or have no sense in the context (like loadonce: true): pagination, page, loadonce, totalpages, totalrecords, showpage, imgpath.
You receive the best results if you constructs jqGrid with respect of data: myData parameter, or set all data from mydata at once (see description of addRowData method in http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#array_data).
Oleg is correct.
Adding jQuery("#list4").setGridParam({ rowNum: 10 }).trigger("reloadGrid");
works.
Although it might not work if formatter property is set where the rowObject values will be undefined.(if they are used)
Therefore make sure in your formatter method u always check for their availability.
e.g.
function getFormattedFileName(cellvalue, options, rowObject) {
if(!rowObject.fileName) {// this is due to ...trigger("reloadGrid");
return cellvalue; // the value is already formatted, let's just return it
}
return rowObject.fileName.trim();
}
Related
I am working on a task where I need to update entire row data in jqgrid.
Here is a sample fiddler: https://jsfiddle.net/99x50s2s/47/
In the above fiddler, please update a row and then try to scroll to the right.
Code:
var $thisGrid = jQuery("#sg1");
$thisGrid.jqGrid({
datatype: "local",
gridview: true,
loadonce: true,
shrinkToFit: false,
autoencode: true,
height: 'auto',
width: 400,
viewrecords: true,
sortorder: "desc",
scrollrows: true,
loadui: 'disable',
colNames:["", 'Inv No', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{
name: "Symbol", index: "Symbol", width: 70, align: 'center', frozen: true,
formatter: function (cellValue, options, rowObject) {
return '<button class="btn btn-info btn-xs update" type="button" title="Update" >' +
'<span class="glyphicon glyphicon-remove-circle"></span> Update</button>';
}
},
{name:'id',width:60, sorttype:"int"},
{name:'name', width:100},
{name:'amount', width:80, align:"right",sorttype:"float"},
{name:'tax', width:80, align:"right",sorttype:"float"},
{name:'total', width:80,align:"right",sorttype:"float"},
{name:'note', width:150}
],
caption: "Test Data",
onCellSelect: function (rowid,
iCol,
cellcontent,
e) {
if (iCol == 0) {
var newdata = [
{id:"1",name:"new test1 name for testing purpose",note:"new note1",amount:"500.00",tax:"50.00",total:"510.00"},
];
$thisGrid.jqGrid('setRowData', rowid, newdata[0]);
}
}
}).jqGrid('setFrozenColumns');
var mydata = [
{id:"1",name:"test1",note:"note1",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"2",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"3",name:"test3",note:"note3",amount:"400.00",tax:"25.00",total:"360.00"},
{id:"4",name:"test4",note:"note4",amount:"500.00",tax:"60.00",total:"350.00"},
{id:"5",name:"test5",note:"note5",amount:"600.00",tax:"70.00",total:"340.00"}
];
for(var i=0;i<=mydata.length;i++)
$thisGrid.jqGrid('addRowData',i+1,mydata[i]);
I am wondering how I can fix this behavior? Any help is appreciated.
Note:
jqGrid version: 4.6.0
Applied: Frozen column and cell text wrap.
EDIT:
snapshot taken from the fiddler with solution:
I wrote you already in the past that the version 4.6.0 don't support editing of grids with frozen columns.
To make the code working one have to do many things after every change of the grid content. One have to adjust position of frozen divs and to set explicitly the height and the width of every row in the frozen div. You can find examples from the code which one have to use here and here.
There are exist more easy solution now. If you just replace the version jqGrid 4.6 to the current one code of free jqGrid from github
<link href="https://rawgit.com/free-jqgrid/jqGrid/master/css/ui.jqgrid.css" rel="stylesheet"/>
<script src="https://rawgit.com/free-jqgrid/jqGrid/master/js/i18n/grid.locale-en.js"></script>
<script src="https://rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.src.js"></script>
then your code start working as expected: https://jsfiddle.net/OlegKi/99x50s2s/48/
So you can either to do many things yourself or to get the code which already do this.
I am trying to pass the array value into jqgrid. As follows, the "ranking" value is another array, I would like to put each element (rank and score) in the array in a separate column:
Javascript:
$(document).ready(function(){
jQuery("#ggp_info").jqGrid('GridUnload');
jQuery("#ggp_info").jqGrid({
data: jsonObj.entry,
datatype: "local",
colModel:[
{name:'id',index:'id', width:55, align:"center"},
{name:'name',index:'name', width:110, align:"center"},
{name:'sort',index:'sort', width:50, align:"center"},
{name:'ranking.rank',index:'ranking.rank', jsonmap:'ranking.rank', width:250, align:"center"}
],
rowNum:7,
sortname: 'id',
viewrecords: true,
sortorder: "desc",
height: "100%",
shrinkToFit: false,
caption:"Leaderboard"
});
});
The jsonObj value is as follows:
{"entry":
[{"id":"10000935","name":"Queen","sort":"0","ranking":[{"rank":"1","score":"60"}]},
{"id":"10000936","name":"Level1","sort":"0","ranking":[{"rank":"1","score":"700"}]}]
First you have to parse your json object and split it to retrieve separated rank and score
Then you have to create two columns like the following:
{name:'rank',index:'rank', editoptions:{value:rankArray}}
{name:'scores',index:'scores', editoptions:{value:scoresArray}}
So you will put ranks in rankArray and scores in scoresArray
Here append similar questions but I cannot find answer to my one:
In html is
table id= grid and div id=pager:
Also I have mine js code:
var myGrid = $("#grid").jqGrid({
url: _options.gridFetch,
datatype: "json",
colModel:[
{name:'id',index:'id', width:55},
{name:'name',index:'name', width:555, editable:true},
{name:'is_promoted',index:'is_promoted', width:165, editable:true, formatter: $.adminCategoryEntries._boolFormatter, edittype: 'select', editoptions:{value:"1:Yes;0:No"}},
{name:'is_in_shop',index:'is_in_shop', width:165, editable:true, formatter: $.adminCategoryEntries._boolFormatter, edittype: 'select', editoptions:{value:"1:Yes;0:No"}},
{name:'actions', formatter:'actions', width: 85, formatoptions:{keys:true}},
],
pager: '#pager',
jsonReader : { repeatitems: false } ,
rowNum: 10,
rowList: [10, 20, 500],
viewrecords: true,
autowidth: true,
sortname: 'id',
sortorder: 'desc'
});
myGrid.jqGrid('navGrid','#pager',{edit:false,add:false,del:false,search:false});
I've use code from other stackoverflow tutorial.
And here is my issue: If I try to change number of showed rows in my navigator I can see all stored data (86 rows) but if I set rows to i.e 10 (value less than rows number)per page I always see in my navigator:
page 1 of 5
and I cannot switch it to another it always stays on first
json info:
>page: 1
>records: "86"
>rows: [{id:3, name:Ulkofilee/Naudanliha, is_promoted:1, is_in_shop:1},…]
>total: 5
thanks in advance
Radek
Are you getting the data from a server method you can control? It's somewhat cryptic, but the data coming from your _options.gridFetch needs to have a property named "total" defined that specifies the current page that should be viewed.
I'm having a problem that I can't sort it out.
Please take a look at this image first
As you can see, I have been able to request the JSON data from server. The pager shows that there were 4 records. But the records didn't shows in the table.
This is my javascript code
jQuery("#pickFlex66").jqGrid({
url: root + '<?=$mod?>' + '/listpicker',
datatype: "json",
altRows: true,
mtype: 'POST',
colNames:['Code','Company Name'],
colModel:[
{name:'company_code',index:'company_code', width:100},
{name:'company_name',index:'company_name', width:100}
],
rowNum:10,
width: 540,
height: 310,
rowList:[10,20,30],
pager: '#pagerFlex66',
sortname: 'company_code',
shrinkToFit: false,
viewrecords: true,
sortorder: "desc",
caption:"<?=lang("users_title")?>",
onSelectRow: function(id){
}
});
jQuery("#pickFlex66").jqGrid('navGrid','#pagerFlex66',{edit:false,add:false,del:false,search:false});
And here is my JSON data
{
"page": "1",
"total": 0,
"records": "4",
"rows": [{"id":"5","cell":["55-123","123"]},{"id":"3","cell":["123","IBM"]},{"id":"2","cell":["00000","BDO"]},{"id":"1","cell":["000-00","IT GROUP Inc "]}]
}
Is there a mistake in my javascript? Or maybe in my JSON data?
I agree with Briguy37 that the value "total": 0 is strange and of cause incorrect. Nevertheless jqGrid should do display all data.
I suppose that you have the problem in the part of your code which you not posted here. How you can see from the demo the code which you posted can do read and display the JSON data.
Here's a couple issues...haven't figured out why your results aren't getting populated yet, though:
Total in your returned JSON should be the number of pages. Because it is set to 0, that is why it is displaying 0. Also, you'll probably want to return rowCount as 10 in case you change the number of results per page.
You are missing a json reader, I had the exact same problem.
$("#list").jqGrid({
url : "my-json-table-action' />",
datatype: 'json',
jsonReader: {
root: 'gridModel',
id: 'idTT',
repeatitems: false,
},
resize: false,
hidegrid: false,
data: 'trabajosTerminales',
mtype: 'POST',
height: 'auto',
colNames:['No. de Registro', 'Título', 'Tipo', 'Periodo'],
colModel :[
{name:'numRegistro', index:'titulo', search: 'true', stype:'text', align:'center' searchrules:{required:true}, width:100 },
{name:'titulo', key:'true', index:'titulo', search: 'true', stype:'text', searchrules:{required:true}, width:800 },
{name:'tipo', key:'true', index:'tipo', search: 'true', stype:'text',align:'center', searchrules:{required:true}, width:100 },
{name:'periodo', key:'true', index:'titulo', search: 'true', stype:'text', searchrules:{required:true}, width:100 },
],
pager: '#pager',
rowNum:10,
rowList:[10,20,30],
viewrecords: true,
gridview: true,
caption: 'Trabajos Terminales dirigidos',
});
jQuery("#list").navGrid('#pager',{edit:false,add:false,del:false});
});
Where the root element is the array that contains your data, in this case I'm returning my data in an array called 'gridModel', the id is not necessary. But you have to make sure to set the root element right, in your case it's called 'rows' instead 'gridModel'.
Does Jqgrid allow us to add pager which we are using dataType local and don't want the whole data to be loaded at once. I am trying to do the same without success. It only shows the first page and show Page 1 Of 1 on the pager when there are many more records to be displayed.
Probably you fill the grid contain in the wrong way. Look at the example to see how you can use data parameter of jqGrid.
I have this same issue. I have a "local" jqgrid setup and it's showing my data but the pager values aren't completely accurate. Until I figured out that I needed to muck with the 'localReader' property. On the jqgrid wiki I saw that the jsonReader can have functions that define how to get the page, records, etc. It also states that the localReader can do whatever the jsonReader does so I gave it shot. Here's what I am doing.
var grid = $('#table').jqGrid({
datatype: 'local',
altRows: true,
colModel: [
{name: '0', label: "Name"},
{name: '1', label: "Color"},
],
pager: "#pager",
rowNum: 15,
sortname: '0',
viewrecords: true,
gridview: true,
height: '100%',
autowidth: '100%'
});
var reader = {
root: function(obj) { return results.rows; },
page: function(obj) { return results.page; },
total: function(obj) { return results.total; },
records: function(obj) { return results.records; },
grid.setGridParam({data: results.rows, localReader: reader}).trigger('reloadGrid');
My "results" is an object like this:
{page: "1", total: "70", records: "1045", rows:[.....]}
This seems to work as desired.