jqxdatatable serverprocessing with dynamic columns

[SJParticipant]

Hi,

Is there any way i can do serverprocessing with dynamic columns in jqxdatatable. like

I can get the columns and rows dynamically through ajax function and process dataFields using below code:
var json = xhr.responseText;
var obj = $.parseJSON(json);
var columns = obj.columns;
var rows = obj.rows;

var datafields = new Array();
for (var i = 0; i < columns.length; i++) {
datafields.push({
name : columns[i].datafield
});
}

But the problem is “Source” Object I dont know what value i need to put in source so i can process dataAdapter & next pager button will read the source and hit the server again to get more records.
source = {
dataType : “json”,
datafields : datafields,
url : “readDatViewFile.do”
};

var dataAdapter = new $.jqx.dataAdapter(source, {
formatData : function(data) {
return data.rows;// returns null object
},
downloadComplete : function(data, status, xhr) {
if (!source.totalRecords) {
source.totalRecords = data.rows.length;
}
}
});

$(“#viewDataTable”).jqxDataTable({
width : ‘99%’,
theme : ‘bootstrap’,
autoRowHeight : true,
altRows : true,
height : “98%”,
columnsHeight : 50,
source : dataAdapter,
sortable : true,
editable : false,
columnsResize : true,
columns : columns,
pageable : true,
pageSize: 100,
pagerButtonsCount : 5,
serverProcessing : true,
filterable : true,
filterMode : ‘simple’

});

Thank you in advance for help!

SJ

[HristoParticipant]

Hello SJ,

Please, take a look at this demo:
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdatatable/javascript-datatable-server-paging.htm?light
You need to set:

data.$skip = data.pagenum * data.pagesize;
data.$top = data.pagesize;
data.$inlinecount = "allpages";

(in the formatData callback)

About “how to change columns dynamically” – I would like to suggest you look at this forum topic:
http://www.jqwidgets.com/community/topic/jqxdatatable-column-dynamically-reload-and-change-issue/#post-54000

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[SJParticipant]

Thank you Hristo for quick reply.

I followed as you suggested but in dataAdapter , datafield is empty (i saw in debug mode) thats the reason my table is empty. Please correct me where I am wrong.

Note:- Columns and datafield are generated dynamically. I dont know how many columns, rows and dataField will be there in my dynamic datatable. In other words, datatable is generated on fly with serverPRocessing so when user will do sorting, filtering it will hit the server to get more data.

Please help!
Thanks,

var datafields = new Array();
source = {
dataType : “json”,
datafields : datafields,
url : “readDatViewFile.do”,
beforeprocessing : function(data) {
columns = obj.columns;
rows = obj.rows;
for (var i = 0; i < columns.length; i++) {
datafields.push({
name : columns[i].datafield
});
}
}

};

var dataAdapter = new $.jqx.dataAdapter(source, {
formatData : function(data) {
data.$skip = data.pagenum * data.pagesize;
data.$top = data.pagesize;
data.$inlinecount = “allpages”;

return data;
},
downloadComplete : function(data, status, xhr) {
if (!source.totalRecords) {
source.totalRecords = data.rows.length;
}
},
loadError : function(xhr, status, error) {
throw new Error(“http://services.odata.org: ” + error.toString());
}
});

$(“#viewDataTable”).jqxDataTable({
width : ‘99%’,
theme : ‘bootstrap’,
autoRowHeight : true,
altRows : true,
height : “98%”,
columnsHeight : 50,
source : dataAdapter,
sortable : true,
editable : false,
columnsResize : true,
columns : columns,
pageable : true,
pageSize : 100,
pagerButtonsCount : 5,
serverProcessing : true,
filterable : true,
filterMode : ‘simple’

});

[HristoParticipant]

Hello SJ,

The “beforeprocessing” is the same as “downloadComplete” (please, refer to this topic).
You could try without set dataFields field in the source and this will automatically generate all data fields.
I would like to ask you is there any error message?

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[SJParticipant]

Hi Hristo,

Finally i am able to populate the table but still unable to load dynamic columns. when i hard code the columns, it works but not the dynamic way.
Please suggest!
Thanks,
SJ
json:
readDatViewFilejsonArray{
“columns”: [{
“datafield”: “PATCD”,
“text”: “PATCD”,
“width”: 100
},
{
“datafield”: “AETERM”,
“text”: “AETERM”,
“width”: 100
},
{
“datafield”: “AEBODSYS”,
“text”: “AEBODSYS”,
“width”: 220
}],
“rows”: [{
“PATCD”: “0”,
“AETERM”: “0001”,
“AEBODSYS”: “1”
},
{
“PATCD”: “1”,
“AETERM”: “0002”,
“AEBODSYS”: “2”
},
{
“PATCD”: “0”,
“AETERM”: “0004”,
“AEBODSYS”: “1”
}]
}

Code:
var source = {
dataType : “json”,
url : “readDatViewFile.do”
};
var columns;

var dataAdapter = new $.jqx.dataAdapter(source, {
formatData : function(data) {
data.$skip = data.pagenum * data.pagesize;
data.$top = data.pagesize;
data.$inlinecount = “allpages”;
return data.rows;
},
downloadComplete : function(data, status, xhr) {
if (!source.totalRecords) {
source.totalRecords = data.rows.length;
}
},
loadError : function(xhr, status, error) {
throw new Error(“http://services.odata.org: ” + error.toString());
},
beforeLoadComplete : function(records, original) {
columns = original.columns;
return original.rows;
}
});

$(“#viewDataTable”).jqxDataTable({
width : ‘99%’,
theme : ‘bootstrap’,
autoRowHeight : true,
altRows : true,
height : “98%”,
columnsHeight : 50,
source : dataAdapter,
sortable : true,
editable : false,
columnsResize : true,
columns : columns,//not work:dynamic
columns : [ {//worked
text : ‘PATCD’,
dataField : ‘PATCD’,
width : 100,
filterable : false,
editable : false
}, {
text : ‘AETERM’,
dataField : ‘AETERM’,
width : 100,
editable : false
} ],
pageable : true,
pageSize : 100,
pagerButtonsCount : 5,
serverProcessing : true,
filterable : true,
filterMode : ‘simple’

});

[HristoParticipant]

Hello SJ,

Try with this $("#viewDataTable").jqxDataTable({ columns: columns }); when you want to change the columns.
Also, you could check this variable (columns) is not empty before you set it.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[SJParticipant]

Thank you Hristro! it works!

[Author]

Posts