Populate Existing Table With Data Using JQuery - javascript

Using the method below I am trying to populate an existing table with data however the function fills it with the same values. I can perform such action adding append method, but in my case the table should be exist already :)
HTML
<table class="table">
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
</table>
JQuery
$.each(data, function(i, value){
$(".table td").text(value.product);
});
var data= [
{"product":"RD0"},
{"product":"RD1-184"},
{"product":"RD1-185"}
]

Here's a code snipped using your sample from above with a demo in JSFiddle.
$(function() {
var data = [{
"product": "RD0"
}, {
"product": "RD1-184"
}, {
"product": "RD1-185"
}];
var table = $('.table');
$.each(data, function(i, value) {
table.find('tr').eq(i).find('td').text(value.product);
});
});
https://jsfiddle.net/qur62os2/

you probably need something like this:
$(".table").find('td').each(function(i) {
$(this).text(data[i].product);
});
https://jsfiddle.net/ahmadabdul3/fn8q8e3x/

Related

Get id from td of a table

<script type="text/javascript">
function LoadData(){
var url = serverURL+"/List.php";
$.ajax({
type: "GET",
url: url,
dataType: "json",
success: function(data){
$.each(data.data, function (key, value) {
var doc_id=value['id'];
var doc_name=value['name'];
var doc_speci = value['specialize'];
$("#myTable").append("<tr><td>"+doc_name+"</td><td>"+doc_speci+"</td><td class='retrieve' data-did="+doc_id+" style='cursor: pointer;'>EDIT</td></tr>");
});
},
error: function(data){
toastr.error("Opps! Something went wrong");
$(".se-pre-con").fadeOut("slow");
},
});
}
</script>
The above appends a tr to my html table below.
The HTML TABLE is as follows:
<table id="myTable" class='table table-bordered table-hover table-striped'>
<tr>
<th>Name</th>
<th>Specialization</th>
<th>Action</th>
</tr>
</table>
Now i want to retrieve the id from the data attribute from td class retrieve so that i can send the id and redirect it to other page for editing.
// Clicks the edit field
$("td.retrieve").on("click", function(e) {
var id = $(e.currentTarget).attr("data-did");
// do with the ID what you want
alert(id);
});
I'm aware that jQuery has a "data(...)" function but I've run into issues with that sometimes in the past. "attr(...)" will do something similar but relies specifically on the attribute instead of stored objects.
First, to add your data attribute you should make sure you add quotes around the value:
data-did='"+doc_id+"'...
So the rendered cell must look something like this:
<td class='retrieve' data-did='n' style='cursor: pointer;'>EDIT</td>
(where n is some value)
Then you can easily retrieve this value with jQuery:
$('specific-td').data('did'); //specific-td referes to a specific cell in a row, you must write that, this is just an example
To get all of the rows:
var ids = [];
$('.retrieve').each(function() {
ids.push($(this).data('did'));
});
Example:
If you have a button for example:
$('#myTable').on('click', '.retrieve input[type="button"]', function() {
var id = $(this).parent().data('did');
alert(id);
});
JSFiddle: https://jsfiddle.net/y2an0fu7/1/

Dynamic column header in datatable from json array

I want to populate a Datatable with a dynamic column header and column data. I can populate dynamic column data successfully, but I can't achieve a dynamic column. I am using an array I get from a JSON AJAX request. My code is this:
<body>
<table id="example" class="display" cellspacing="0" width="100%" border="1"></table>
</body>
var JSONResult = '{"column1":"data1","column2":"data2","column3":"data3","columnN":"dataN"}';
var row_dtable = new Array();
var dtable_api = $('#example').dataTable();
$.each(JSONResult , function(key, value) {
row_dtable.push(value);
});
dtable_api.api().row.add(row_dtable).draw(false);
Thanks in advance.
Datatables doesn't have the ability to change it's structure once being created. You have to destroy it and then re-create with a new set of columns.
Additional reading: How to dynamically change Datatables multiple column headers using ajax and jquery without refreshing the webpage?
Ideally your JSONResult will always have the same columns and only data will be updated. For this the solution will be to create the columns once in the header of your table and then using the datatable API to add the data.
First you should change your table HTML like this, which shouldn't be a problem.
<body>
<table id="example" class="display" cellspacing="0" width="100%" border="1">
<thead>
<tr></tr>
</thead>
</table>
</body>
Then you create the headers through jQuery
var JSONResult = [{ "column1": "data1", "column2": "data2", "column3": "data3", "columnN": "dataN" },
{ "column1": "data1", "column2": "data2", "column3": "data3", "columnN": "dataN" }];
$.each(JSONResult[0], function (key, value) {
$('#example thead tr:first-child').append($('<th>', {
text: key
}));
});
And last, add the data to dataTable
var row_dtable = new Array();
var dtable_api = $('#example').dataTable();
$.each(JSONResult, function (i, l) {
$.each(l, function (key, value) {
console.log(key + " " + value);
row_dtable.push(value);
});
dtable_api.api().row.add(row_dtable).draw(false);
});

Append to table from JSON

I'm trying to get a table with data from JSON. My code looks like this:
var KrediteArray = $.parseJSON(data);
$.each(KrediteArray, function(index, item) {
$('#UserKreditsTableBody').append($('<tr id="UserKreditsTr'+index+'">'));
$.each(item, function(key, value) {
$('#UserKreditsTr' + index).append($('<td>', {
text: value
}));
});
});
KreditArray looks like this:
{
"1": {
"Admin":"Luke",
"Kapital":"100.000"
},
"2": {
"Admin":"Capto",
"Kapital":"100.000"
}
}
My Table HTML Code looks like:
<table id="UserKreditsTable">
<thead>
<tr>
<td>Name<td>
<td>Betrag<td>
</tr>
</thead>
<tbody id="UserKreditsTableBody">
</tbody>
</table>
My Problem is that in the Table I do have 2 columns at the moment (I'm gonna add more soon, along with the data from the JSON). The Script only appends one <td> to the row, so I got one cell holding all information.
Could you please give me a hint?
Edit: Have a look at the picture
(source: 666kb.com)
Try nesting another each() on key and then append each value to a <td> element.
Code should probably look like this:
var KrediteArray = $.parseJSON(data);
$.each(KrediteArray, function(index, item) {
$('#UserKreditsTableBody').append($('<tr id="UserKreditsTr'+index+'">'));
$.each(item, function(key, value) {
$.each(item, function(key, value) {
$('#UserKreditsTr' + index).append($('<td>', {
text: value
}));
});
});
});

How do I get the id for a <tr> in when using jQuery DataTables?

I am adding a button that will "approve" all rows in the table (call a URL to process the record). I generate the table then attach the DataTable to the prefilled table. On each tr I have the id number of the record.
<tr id="11309742">
<td>blah</td>
<td>blah</td>
<td>blah</td>
</tr>
<tr id="11309743">
<td>blah</td>
<td>blah</td>
<td>blah</td>
</tr>
Here is what I have so far:
$.each(table.fnGetData(), function (i, row) {
var id = $(this).attr("id");
$.get(myUrl, { id: id },
function (json) {
if (json.Sucess) {
// TODO remove from the page
}
}, "json");
});
var id = $(this).attr("id"); worked before I switched to the datatable plugin (and I know it won't work now). Everything I have seen is either setting the id or getting the index from a click in the row. How do I get that id attribute in a loop?
Instead of using .fnGetData(), I should have used .fnGetNodes().
$.each(table.fnGetNodes(), function (i, row) {
var id = $(this).attr("id");
$.get(myUrl, { id: id },
function (json) {
if (json.Sucess) {
//table.fnDeleteRow(i);
}
}, "json");
});
Now it works as expected.

How to pass javascript array variable values to html using angular.js

I am new to angular.js
I want to create a table by populating values from a javascript array variable.
I created and entered values in my variable like this
var result=[];
//some loop. Just demonstrating that there are multiple values of id and text
result.push(
{
"id":obj["id"],
"text":obj["text"],
}
);
I want a new row for each id and text from result variable in html
<table>
<tr><td>id</td><td>text</td></tr>
<table>
What is way to do this using angular.js.
Figured it out. Putting it here if anyone needs it.
Javascript code:
function controller($scope, $http) {
$scope.results=[];
$http.get(url).success(function (data) {
$.each(data, function () {
var obj = data;
console.log(obj);
$scope.results.push(
{
"id": obj["obj_id"],
"text": obj["text"]
}
);
});
});
}
html code
<div ng-controller="controller">
<table ng-repeat="result in results">
<tr><td>{{result.id}}</td><td>{{result.text}}</td></tr>
<table>
</div>

Categories