Pagination and sorting in JQXGrid – with datatype as JSON

[divakarParticipant]

Hi,

I am facing issue while implementing Sorting and Pagination in JQXGrid while using Datatype as JSON.

The content in the grid is not getting loaded. Whethere JSON format is supported for Sorting and Pagination in JQXGrid?

Please help and provide your inputs.

Code:
—–

var params=new Array();
var paramObject=new Object();

paramObject.ctry_cd=”157″;
paramObject.co_cd=”001″;

var poetEventAllCollections=””;

$(document).ready(function(){

// Create the Grid for displaying all proposal details
$(“#displayPoetEventGrid”).jqxGrid({
width: ‘100%’,
height: ‘100%’,
columnsresize: true,
scrollmode: ‘deferred’,
theme:’POET’,
pageable: true,
sortable: true,
columns: [
{ text: ‘Event ID’, datafield:’prpslId’ , width: ‘15%’},
{ text: ‘Event Name’, datafield:’prpslNm’, width: ‘40%’},
{ text: ‘In-Store Date’, datafield:’inStoreDt’, width: ‘15%’},
{ text: ‘Creator ID’, datafield:’useid’, width: ‘15%’},
{ text: ‘Status’, datafield:’statDesc’ , width: ‘15%’}
]
});

// Load the POET Event grid with data from database
loadAllPoetEvents();

});
var loadAllPoetEvents=function(){
var poetEventAllObj=$.when(

$.ajax({
url: servletUrl,
type: ‘post’,
dataType: ‘json’,
data:{ACTION:”searchPoetEventAll”,byPassForward:”true”},
async: true,
cache: false,
beforeSend:loadPoetSelectEventLoader,
complete: hidePoetSelectEventLoader,
/*success: function(data) {
alert(“Return data : ” + data);
},*/
error: function(xhr)
{
alert(“An error occured in Select POET Event ” + xhr.status + ” :: ” + xhr.statusText + ” :: ” + xhr.responseText);
}
})

);

poetEventAllObj.done(function(data){

poetEventAllCollections=data;

var jsonString=JSON.stringify(poetEventAllCollections);
var jsonArray=JSON.parse(jsonString);
jsonString=JSON.stringify(jsonArray);

//alert(“Return jsonString : ” + jsonString );

var tableSource={

datatype: “json”,
cache: false,
datafields: [
{ name: ‘prpslId’, map:’prpslId’ },
{ name: ‘prpslNm’,map:’prpslNm’ },
{ name: ‘inStoreDt’,map:’inStoreDt’ },
{ name: ‘useid’,map:’useid’ },
{ name: ‘statDesc’,map:’statDesc’ }
],
localdata: jsonString,
async: false
};

var dataAdapter = new $.jqx.dataAdapter(tableSource);
dataAdapter.dataBind();
$(“#displayPoetEventGrid”).jqxGrid({source: dataAdapter});
//$(‘#jqxGrid’).jqxGrid({ pageable: true});

});
};

function loadPoetSelectEventLoader()
{
//alert(“Start”);
$(“#poetSelectEventLoader”).html(‘<div id=”poetSelectEventloading”> <p style=”margin-left: 665px; margin-top:75px; font-size: 24px “>Loading…</p></div>’);

}

function hidePoetSelectEventLoader()
{
//alert(“End”);
$(‘#poetSelectEventLoader’).html(”);

}

[divakarParticipant]

I have added following lines of code in JSP and have these JS file in the mentioned path.

<script type=”text/javascript” src=”../jqwidgets/jqxgrid.sort.js”></script>
<script type=”text/javascript” src=”../jqwidgets/jqxgrid.pager.js”></script>

[Peter StoevKeymaster]

Hi divakar,

There’s a demo about Server Paging with Sorting in the PHP demos section. There are also help topics and additional demos in the phpdemos folder in the download package. I suggest you to take a look at them.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[divakarParticipant]

Hi,

I followed the example.

My grid data is not getting loaded whenever I set
pageable: true, property.

I have added following scripts.
<script type=”text/javascript” src=”../scripts/jquery-1.11.1.js”></script>
<script type=”text/javascript” src=”../scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”../jqwidgets/jqxgrid.js”></script>
<script type=”text/javascript” src=”../jqwidgets/jqxgrid.pager.js”></script>
<script type=”text/javascript” src=”../jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”../jqwidgets/jqxdata.js”></script>

Grid creation code in document.ready method.

var dataAdapter1 = new $.jqx.dataAdapter(displayPoetEventGrid());
dataAdapter1.dataBind();

// Create the Grid for displaying all proposal details
$(“#displayPoetEventGrid”).jqxGrid({
width: ‘100%’,
height: ‘100%’,
//columnsresize: true,
scrollmode: ‘deferred’,
theme:’POET’,
pageable: true,
//sortable: true,
source: dataAdapter1,
columns: [
{ text: ‘Event ID’, datafield:’prpslId’ , width: ‘15%’},
{ text: ‘Event Name’, datafield:’prpslNm’, width: ‘40%’},
{ text: ‘In-Store Date’, datafield:’inStoreDt’, width: ‘15%’},
{ text: ‘Creator ID’, datafield:’useid’, width: ‘15%’},
{ text: ‘Status’, datafield:’statDesc’ , width: ‘15%’}
]
});

Should I add any thing else. The input source data is Json.

Please advise.

Thanks.

[Peter StoevKeymaster]

Hi divakar,

I would suggest you to see the sample I suggested, because this initialization is insufficient. It does not include required JavaScript files described in the Grid’s Getting Started help topic. adapter.dataBind() is also not required.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[divakarParticipant]

Hi Peter,
Thanks a lot for your quick response.

I referred to the sample code.

I have made following references in my jsp.

<script type=”text/javascript” src=”../scripts/jquery-1.11.1.js”></script>
<script type=”text/javascript” src=”../scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”../jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”../jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”../jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”../jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”../jqwidgets/jqxwindow.js”></script>
<script type=”text/javascript” src=”../jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”../jqwidgets/jqxgrid.js”></script>
<script type=”text/javascript” src=”../jqwidgets/jqxgrid.pager.js”></script>
<script type=”text/javascript” src=”../jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”../jqwidgets/jqxgrid.columnsresize.js”></script>
<script type=”text/javascript” src=”../jqwidgets/jqxgrid.filter.js”></script>
<script type=”text/javascript” src=”../jqwidgets/jqxgrid.sort.js”></script>
<script type=”text/javascript” src=”../jqwidgets/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”../jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”../jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”../jqwidgets/jqxmaskedinput.js”></script>
<script type=”text/javascript” src=”../jqwidgets/jqxgrid.edit.js”></script>
<script type=”text/javascript” src=”../jqwidgets/jqxcombobox.js”></script>
<script type=”text/javascript” src=”../jqwidgets/jqxpanel.js”></script>
<script type=”text/javascript” src=”../jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”../jqwidgets/jqxnotification.js”></script>
<script type=”text/javascript” src=”../jqwidgets/jqxnumberinput.js”></script>

I am getting below error in the IE console.

SCRIPT5022: jqxGrid: Missing references to the following module(s): jqxgrid.pager.js.

I have placed this jqxgrid.pager.js under the path referenced in the script tag.

I am using JQWidget3.5 commercial version..

Thanks,
Divakar.

[Peter StoevKeymaster]

Hi Divakar,

Here’s the sample which you should look: http://www.jqwidgets.com/jquery-widgets-demo/demos/php/serverfiltering_paging_and_sorting.htm?arctic

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts