This topic contains 14 replies, has 3 voices, and was last updated by cje 10 years ago.
-
How can I put data into the table instead of “laptopdata” ?
<!DOCTYPE html>
<html lang=”en”>
<head>
<link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.base.css” media=”screen” />
<link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.arctic.css” media=”screen” />
<link rel=”stylesheet” href=”../../styles/jqx.apireference.css” media=”screen” />
<link rel=”stylesheet” href=”../../styles/site.css” media=”screen” /><script type=”text/javascript” src=”../../scripts/format.js”></script>
<script type=”text/javascript” src=”../../scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”../../scripts/demos.js”></script>
<script type=”text/javascript” src=”../../scripts/demofunctions.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxtabs.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxdatatable.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/jqxlistbox.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxresponse.js”></script><script type=”text/javascript”>
$(document).ready(function () {
//initDemo();var source =
{
datatype: “json”,
datafields: [
{ name: ‘CompanyName’, type: ‘string’},
{ name: ‘ContactName’, type: ‘string’},
{ name: ‘ContactTitle’, type: ‘string’},
{ name: ‘Address’, type: ‘string’},
{ name: ‘City’, type: ‘string’}
],
url: ‘data.php’,
cache: false
};var dataAdapter = new $.jqx.dataAdapter(source);
var itemsInCart = 0;
$(“#dataTable”).jqxDataTable(
{
width: 860,
source: dataAdapter,
sortable: true,
pageable: true,
pageSize: 3,
theme: ‘arctic’,
pagerButtonsCount: 5,
enableHover: false,
selectionMode: ‘none’,
rendered: function () {
$(“.buy”).jqxButton({ theme: ‘arctic’ });
$(“.buy”).click(function () {
itemsInCart++;
$(“.cart-top p”).html(itemsInCart + ” products”);
});
},
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>”;
//alert(laptops.length);
for (var i = 0; i < 4; 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 = ‘../../images/l-18.gif’;
var img = ‘‘;
image += img;
image += “</div>”;var info = “<div style=’margin: 5px; margin-left: 10px; margin-bottom: 3px;’>”;
info += “<div><i>” + “res[i+1].ContactName” + “</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;
}
}]
});
});</script>
</head>
<body class=’default’><div id=”dataTable”></div>
</body></html>
Now I can put the data into the table but I get 4 equal containers(columns) in one row. How can I make it 4 different ?
<script type=”text/javascript”>
$(document).ready(function () {
var source =
{
datatype: “json”,
datafields: [
{ name: ‘CompanyName’, type: ‘string’},
{ name: ‘ContactName’, type: ‘string’},
{ name: ‘ContactTitle’, type: ‘string’},
{ name: ‘Address’, type: ‘string’},
{ name: ‘City’, type: ‘string’}
],
url: ‘data.php’,
cache: false
};
var dataAdapter = new $.jqx.dataAdapter(source);
var itemsInCart = 0;$(“#dataTable”).jqxDataTable(
{
width: 860,
source: dataAdapter,
sortable: true,
pageable: true,
pageSize: 3,
theme: ‘arctic’,
pagerButtonsCount: 5,
enableHover: false,
selectionMode: ‘none’,
rendered: function () {
$(“.buy”).jqxButton({ theme: ‘arctic’ });
$(“.buy”).click(function () {
itemsInCart++;
$(“.cart-top p”).html(itemsInCart + ” products”);
});
},
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;
//alert (laptops.CompanyName);
var container = “<div>”;
//alert(laptops.length);
for (var i = 0; i < 4; 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 = ‘../../images/l-18.gif’;
var img = ‘
image += img;
image += “</div>”;var info = “<div style=’margin: 5px; margin-left: 10px; margin-bottom: 3px;’>”;
info += “<div><i>” + “res[i+1].ContactName” + “</i></div>”;
info += “<div>Price: $” + laptops.ContactName + “</div>”;
info += “<div>RAM: ” + “laptop.ram” + “</div>”;
info += “<div>HDD: ” + “laptop.hdd” + “</div>”;
info += “<div>CPU: ” + “j” + “</div>”;
info += “<div>Display: ” + laptops.CompanyName + “</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;
}
}]
});
});</script>
You must be logged in to reply to this topic.