Reputation: 1
I'm close to the edge here, so any help would be greatly appreciated. I attempting to make each row of data a clickable link and that link would be the id in the JSON data. The idea behind this would be that once the user clicks a link the code would populate a form on another page of my app.
I've just started to learn Jquery after years of using Actionscript and it isn't going to well at the moment.
JSON DATA
var data = [
{
"code" : "SF700JR",
"color" : "Orange",
"description" : "RAL 2000",
"finish" : "Smooth",
"gloss" : "Satin",
"id" : "uk1",
"series" : "D1036"
},
{
"code" : "YA602GF",
"color" : "White",
"description" : "RAL 9016",
"finish" : "Smooth",
"gloss" : "Gloss",
"id" : "uk2",
"series" : "D2525 SD"
},
{ "code" : "YA604GF",
"color" : "White",
"description" : "RAL 9018",
"finish" : "Smooth",
"gloss" : "Gloss",
"id" : "uk3",
"series" : "D2525 SD"
}
]
JQUERY
var dynatable = $('#my-final-table').dynatable({
features: {
paginate: false,
recordCount: false,
sorting: false,
search: false
},
dataset: {
records: data
}
}).data('dynatable');
$(data).each(function(index, value) {
var row_content = $('<a href="#">' + value.id + '</a>');
value.id = row_content;
console.log(row_content);
$('#my-final-table tr').append('<a href="#">'+value.color+'</a>').data(value);
$('#my-final-table tr a').on('click', function(){
console.log("click");
});
});
HTML
<div class="ui-grid-solo"><p></p>
<div class="ui-block-a">
<table id="my-final-table" class="product-table" style="width:100%">
<thead>
<th class="table-heads">Description</th>
<th class="table-heads">Code</th>
<th class="table-heads">Series</th>
<th class="table-heads">Color</th>
<th class="table-heads">Gloss</th>
<th class="table-heads">Finish</th>
<th class="table-heads">ID</th>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
Upvotes: 0
Views: 186