Populating Json Data in Datatable

[VivekParticipant]

Hi,

I just want to populate JSON data in the data table in the form of rows only. Can you tell me how i can do it..?

I am sending an array list in the form of json object from my backend to the jsp and i want to populate that data in the jqxdatatable.

Please help me with this.

Regards,
Vivek

[Peter StoevKeymaster]

Hi Vivek,

There’s a sample for using JSON data. Please, look at: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdatatable/javascript-datatable-binding-to-json.htm?arctic

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[VivekParticipant]

Hi Peter,

I have already seen that example thats why i asked you that i want some alterations in the current widget. In the datatable widget you have a row template type.

In that i am trying to populate each row with some data that i am passing in the form of json objects.

There is a method called –> cellsRenderer

columns: [
{
text: ‘Products’, align: ‘left’, dataField: ‘model’,
// row – row’s index.
// column – column’s data field.
// value – cell’s value.
// rowData – rendered row’s object.
cellsRenderer: function (row, column, value, rowData) {
var laptops = rowData.laptops;
var container = “<div>”;
for (var i = 0; i < laptops.length; i++) {
var laptop = laptops[i];
var item = “<div style=’float: left; width: 210px; overflow: hidden; white-space: nowrap; height: 265px;’>”;
var image = “<div style=’margin: 5px; margin-bottom: 3px;’>”;
var imgurl = laptop.img;
var img = ‘‘;
image += img;
image += “</div>”;
var info = “<div style=’margin: 5px; margin-left: 10px; margin-bottom: 3px;’>”;
info += “<div><i>” + laptop.model + “</i></div>”;
info += “<div>Price: $” + laptop.price + “</div>”;
info += “<div>RAM: ” + laptop.ram + “</div>”;
info += “<div>HDD: ” + laptop.hdd + “</div>”;
info += “<div>CPU: ” + laptop.cpu + “</div>”;
info += “<div>Display: ” + laptop.display + “</div>”;
info += “</div>”;
var buy = “<button class=’buy’ style=’margin: 5px; width: 80px; left: -40px; position: relative; margin-left: 50%; margin-bottom: 3px;’>Buy</button>”;
item += image;
item += info;
item += buy;
item += “</div>”;
container += item;
}
container += “</div>”;
return container;
}

I am trying to iterate my json objects in each row.
Can you give me an example to do it.

[Peter StoevKeymaster]

Hi Vivek,

The row parameter represents the row’s index. Depending on it, you will have to determine for your scenario what kind of HTML to return.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts