HERE IS MY SCRIPT:
$("#uploadProductsTable").dataTable({
"aaData": data, //data is a list of "Products" im getting back from the controller
"aoColumnDefs": [
{
"aTargets": [0],
"sTitle": 'Select<br/>All <input type="checkbox" class="selectAll" name="Select All"/>',
"mData": function(source, type) {
switch (type) {
case "set":
return;
case "display":
return '<input type="checkbox" class="select" ' +
'upc="' + source[2] + '" retaillink="' + source[11] + '" />';
case "filter":
return source[2];
default:
return '<input type="checkbox" />'
}
},
"bSortable": false,
"bVisibility": visibility.editable
},
{
"aTargets": [1],
"sTitle": "Incl Rtl Links",
"mData": function(source, type) {
switch (type) {
case "set":
return;
case "display":
if (source[11] != 0) {
return '<input type="checkbox" class="retailLink" checked name="Incl Rtl Links"/>';
} else {
return "";
}
case "filter":
return source[2];
default:
return '<input type="checkbox" />';
}
},
"bSortable": false,
"bVisible": visibility.editable && visibility.hebPartner
},
{ "sName": "UPC", "aTargets": [2], "sTitle": "UPC"},
{ "sName": "Condition ID", "aTargets": [3], "sTitle": "Condition ID"},
{ "sName": "Item Code", "aTargets": [4], "sTitle": "Item Code" },
{ "sName": "Item Status", "aTargets": [5], "sTitle": "Item Status" },
{ "sName": "Product Description", "aTargets": [6], "sTitle": "Product Description", "sClass": "productDescColumn" },
{ "sName": "Size", "aTargets": [7], "sTitle": "Size" },
{ "sName": "Category", "aTargets": [8], "sTitle": "Category" },
{ "sName": "Class", "aTargets": [9], "sTitle": "Class" },
{ "sName": "Commodity", "aTargets": [10], "sTitle": "Commodity" },
{ "sName": "Subcommodity", "aTargets": [11], "sTitle": "Subcommodity" },
{ "sName": "Retail Link", "aTargets": [12], "sTitle": "Retail Link", bVisible: visibility.hebPartner },
{ "sName": "Department", "aTargets": [13], "sTitle": "Department" },
{ "sName": "Sub Department", "aTargets": [14], "sTitle": "Sub Department" },
{ "sName": "Product source type", "aTargets": [15], "sTitle": "Product Source Type" },
{ "sName": "Bdm", "aTargets": [16], "sTitle": "bdm" },
{ "sName": "APLocation", "aTargets": [17], "sTitle": "APLocation" }
]
});
$("#uploadResults").show();
$("#uploadProductsTable").show();
HERE IS MY HTML:
<div id="uploadResults" class="hidden tabContent">
<h4>Search Results</h4>
<table cellspacing="1" id="uploadProductsTable">
<thead>
<tr>
<th>UPC</th>
<th>Condititon ID</th>
<th>Product Description</th>
<th>Item Code</th>
<th>Item Status</th>
<th>Size</th>
<th>Category</th>
<th>Class</th>
<th>Commodotiy</th>
<th>Sub commodity</th>
<th>Retail Link</th>
<th>Department</th>
<th>Sub department</th>
<th>Product source type</th>
<th>bdm id</th>
<th>AP vendor loc</th>
</tr>
<tbody>
</tbody>
</thead>
</table>
<input class="numProducts" type="hidden" value="0" />
</div>
AND HERE IS ONE OF THE OBJECTS IN THE ARRAY: (underscores stand for data that i took out for the purpose of this post)
{"upc":____,"conditionId":0,"description":"TACO MIX","itemCode":____,"status":{"code":"___","description":"Active"},"size":"1.25OZ ","category":{"id":___,"description":null},"productClass":{"id":1,"description":null},"commodity":{"id":____,"description":null},"subcommodity":{"id":____,"description":null},"retailLink":_______,"department":{"id":7,"description":null},"subdepartment":{"code":"A ","description":null},"productSourceType":null,"bdmId":"_______","vendorApLocationMap":{"____":[_____]}}
IM GETTING THE FOLLOWING 2 ERRORS:
-Uncaught TypeError: Cannot read property 'style' of undefined (in the debugger tool)
AND
-requested unknown parameter from the data source for row
QUESTIONS I HAVE:
1. How do i fix this of course..
2. How does data tables read the data? Do my columns HAVE to line up with every value?
3. What exactly is aTargets specifying? The column order of the table?
Thanks!
-Mike
$("#uploadProductsTable").dataTable({
"aaData": data, //data is a list of "Products" im getting back from the controller
"aoColumnDefs": [
{
"aTargets": [0],
"sTitle": 'Select<br/>All <input type="checkbox" class="selectAll" name="Select All"/>',
"mData": function(source, type) {
switch (type) {
case "set":
return;
case "display":
return '<input type="checkbox" class="select" ' +
'upc="' + source[2] + '" retaillink="' + source[11] + '" />';
case "filter":
return source[2];
default:
return '<input type="checkbox" />'
}
},
"bSortable": false,
"bVisibility": visibility.editable
},
{
"aTargets": [1],
"sTitle": "Incl Rtl Links",
"mData": function(source, type) {
switch (type) {
case "set":
return;
case "display":
if (source[11] != 0) {
return '<input type="checkbox" class="retailLink" checked name="Incl Rtl Links"/>';
} else {
return "";
}
case "filter":
return source[2];
default:
return '<input type="checkbox" />';
}
},
"bSortable": false,
"bVisible": visibility.editable && visibility.hebPartner
},
{ "sName": "UPC", "aTargets": [2], "sTitle": "UPC"},
{ "sName": "Condition ID", "aTargets": [3], "sTitle": "Condition ID"},
{ "sName": "Item Code", "aTargets": [4], "sTitle": "Item Code" },
{ "sName": "Item Status", "aTargets": [5], "sTitle": "Item Status" },
{ "sName": "Product Description", "aTargets": [6], "sTitle": "Product Description", "sClass": "productDescColumn" },
{ "sName": "Size", "aTargets": [7], "sTitle": "Size" },
{ "sName": "Category", "aTargets": [8], "sTitle": "Category" },
{ "sName": "Class", "aTargets": [9], "sTitle": "Class" },
{ "sName": "Commodity", "aTargets": [10], "sTitle": "Commodity" },
{ "sName": "Subcommodity", "aTargets": [11], "sTitle": "Subcommodity" },
{ "sName": "Retail Link", "aTargets": [12], "sTitle": "Retail Link", bVisible: visibility.hebPartner },
{ "sName": "Department", "aTargets": [13], "sTitle": "Department" },
{ "sName": "Sub Department", "aTargets": [14], "sTitle": "Sub Department" },
{ "sName": "Product source type", "aTargets": [15], "sTitle": "Product Source Type" },
{ "sName": "Bdm", "aTargets": [16], "sTitle": "bdm" },
{ "sName": "APLocation", "aTargets": [17], "sTitle": "APLocation" }
]
});
$("#uploadResults").show();
$("#uploadProductsTable").show();
HERE IS MY HTML:
<div id="uploadResults" class="hidden tabContent">
<h4>Search Results</h4>
<table cellspacing="1" id="uploadProductsTable">
<thead>
<tr>
<th>UPC</th>
<th>Condititon ID</th>
<th>Product Description</th>
<th>Item Code</th>
<th>Item Status</th>
<th>Size</th>
<th>Category</th>
<th>Class</th>
<th>Commodotiy</th>
<th>Sub commodity</th>
<th>Retail Link</th>
<th>Department</th>
<th>Sub department</th>
<th>Product source type</th>
<th>bdm id</th>
<th>AP vendor loc</th>
</tr>
<tbody>
</tbody>
</thead>
</table>
<input class="numProducts" type="hidden" value="0" />
</div>
AND HERE IS ONE OF THE OBJECTS IN THE ARRAY: (underscores stand for data that i took out for the purpose of this post)
{"upc":____,"conditionId":0,"description":"TACO MIX","itemCode":____,"status":{"code":"___","description":"Active"},"size":"1.25OZ ","category":{"id":___,"description":null},"productClass":{"id":1,"description":null},"commodity":{"id":____,"description":null},"subcommodity":{"id":____,"description":null},"retailLink":_______,"department":{"id":7,"description":null},"subdepartment":{"code":"A ","description":null},"productSourceType":null,"bdmId":"_______","vendorApLocationMap":{"____":[_____]}}
IM GETTING THE FOLLOWING 2 ERRORS:
-Uncaught TypeError: Cannot read property 'style' of undefined (in the debugger tool)
AND
-requested unknown parameter from the data source for row
QUESTIONS I HAVE:
1. How do i fix this of course..
2. How does data tables read the data? Do my columns HAVE to line up with every value?
3. What exactly is aTargets specifying? The column order of the table?
Thanks!
-Mike