We Keep Coding

How to add a dropdown list to each rows with values using jquery datatable in asp.net c#

I want to add the dynamic dropdown list to each row when I click the add button and I have written this below code to achieve this and values are coming but not like dropdown list
example code is :-
var ddlInputParameters = $("<select class='input-small' id='ddltype'></select>");
$.each(data.d, function (key, value) {
if (value.Type == "inputparameters") {
//var option = $("<option />");
var option = $("<option></option>");
option.html(value.TypeData);
option.val(key);
ddlInputParameters.append(option);
}
});
//Initially When the page is loaded I'm checking the length and adding the records to jquery table
if ($("#EntryParametersTableDataID,#EntryParametersTableRightDataID tbody").children().children().length == 1) {
var trd = "";
trd += "<tr>";
//trd += "<td hidden='hidden'><button class = 'btn btn-danger btn-sm'> delete </button></td>";
trd += "<td>";
//trd += "<select class='input-small' id='ddltype'><option value='1'>Pts</option><option value='2'>%</option></select>";
trd += ddlInputParameters.html(); //Here I want to add(bind)that dropdown list
trd += "</td>";
trd += "<td>";
trd += "<select class='input-small' id='ddlexit'><option value='1'>None</option><option value='2'>Sq Off Leg</option><option value='3'>Sq Off Strategy</option><option value='4'>Partial Exit</option></select>";
trd += "</td>";
trd += "<td><input type='text'> </td>";
trd += "<td><input type='text'> </td>";
trd += "<td><input type='text'> </td>";
trd += "<td><input type='text'> </td>";
trd += "</tr>";
$("#EntryParametersTableRightDataID tbody").append(trd);
}
Output is coming like values not like dropdown list this :-
Suggest me where I did the mistake and how can I achieve this.
I'm very new to this jQuery logics.

Try using ddlInputParameters.outerHTML() instead of ddlInputParameters.html() in trd += like below.
trd += ddlInputParameters.outerHTML(); //Here I want to add(bind)that dropdown list
The outerHTML attribute of the Element DOM interface gets the serialized HTML fragment describing the element including its descendants. It can also be set to replace the element with nodes parsed from the given string.

The outerHTML attribute is not worked in my scenario and I have changed the existing logic like below and it's work well to me
var optionsdata = '';
$.each(data.d, function (key, value) {
if (value.Type == "inputparameters") {
optionsdata += "<option value="+key+">"+value.TypeData+"</option>";
});
var ddlInputParameters = "<select class='input-small' id='ddltypeauto'>" + optionsdata + "</select>";
And I have added this ddlInputParameters to <td> like this trd += ddlInputParameters;

Issues with Porto Theme basic tables with Advance Tools

I have JSON data and from that i am building my Table. Below is an extract of my code.
var table = '';
table = " <table class='table table-bordered table-striped mb-0' id='datatable-tabletools'>";
table += "<thead>";
table += "<tr>";
table += "<th> <i class='glyphicon glyphicon-wrench'></i> Actions</th>";
table += "<th>PAX</th>";
table += "<th>Group No</th>";
table += "<th>Group Name</th>";
table += "</tr>";
table += "</thead>";
table += "<tbody>";
for (var j = 0; j < data.length; j++) {
table += "<tr>";
table += "<td>" + data[j]["PAX"] + "</td>";
table += "<td>" + (data[j]["GroupNo"] == undefined ? '' : data[j]["GroupNo"]) + "</td>";
table += "<td>" + (data[j]["GroupName"] == undefined ? '' : data[j]["GroupName"]) + "</td>";
table += "</tr>";
}
table += "</tbody>";
table += "</table>";
$('#gridContainer').html(table);
$("table#datatable-tabletools").dataTable();
As you can see in the code above I am trying to append it to a div with id="gridContainer". Up till here I have things up and running as required but the issue is my EXPORT bar doesn't appear at all. Currently, the searching, sorting functionalities and the table structure are all fine. Below is a screenshot of how it looks currently.
But when i declare a static table instead of appending the table to a DIV tag it appears fine and the exporting options also appear and are functiona. This is how the top header looks then
How to resolve this issue?

JQuery Drag and Drop from two tables

I need to implement drag and drop feature form one table to another and vise versa.
This is my function where i get transactions to particular IBAN number, I also have the same function which retrieves users transaction which are hidden.
function getAllTransactions(iban) {
var iban = $("#ibanSelection").val();
var username = $("#hiddenusername").val();
var url = 'http://localhost:64300/api/BankAccountApi/GetUserTransaction/?iban=' + iban;
var table = "<table id=\"table1\">";
if ((username != "") && (iban !="")) {
$.getJSON(url, function (data) {
table += "<tr class=\"ibanSelection\">";
table += "<th>My IBAN</th>";
table += "<th>Send to IBAN</th>";
table += "<th>Transfer Date</th>";
table += "<th>Amount</th>";
table += "</tr>";
$.each(data, function (key, val) {
table += "<tr class=\"draggable_tr\">";
table += "<td>" + val.My_Iabn + "</td>";
table += "<td>" + val.Iban_To + "</td>";
table += "<td>" + val.Transfer_Date + "</td>";
table += "<td>" + val.Amount_Transferd + "</td>";
table += "</tr>";
});
table += "</table>";
$("#divResult2").html(table);
});
}
}

Just use the jQueryUI Sortable feature.
Here's the complete example + documentation. Very easy.
Also this example shows your case:
http://jqueryui.com/sortable/#connect-lists

core:forEach in javascript

I have this code to display details from database to jsp. I'm using core:forEach to sort through the list of results.But now inorder to simplify jsp code I'm implementing the core:forEach in javascript.And I'm displaying the results in a dynamically created table. But now while using core:forEach in javascript, only the last value in the list is getting displayed. Code is as follows.
window.onload = function CreateTable()
{
<core:forEach items="${requestScope.projectWiseDetails}" var="row">; //first list sorting based on project name
var tablecontents = "";
tablecontents = "<table>"; //dynamic table
tablecontents += "<tr>";
tablecontents += "<td>" + "Resource Name" + "</td>";
tablecontents += "</tr>";
<core:forEach items="${row.onsite3to5YearsList}" var="resource"> //second sorting which comes under project name
tablecontents += "<tr>";
tablecontents += "<td>" +<core:out value="${resource.resourceName}"></core:out>+ "</td>";
</core:forEach>
tablecontents += "</tr>";
tablecontents += "</table>";
</core:forEach>
document.getElementById("tablespace").innerHTML = tablecontents; //attaching the table to an element
}
<p id="tablespace"></p> //This is where the table gets generated

You're overriding tablecontents everytime, take var tablecontents = "" outside the loop, then replace tablecontents = "<table>" with tablecontents += "<table>".
window.onload = function CreateTable()
{
var tablecontents = "";
<core:forEach items="${requestScope.projectWiseDetails}" var="row">; //first list
tablecontents += "<table>";
// The rest of your code

Insert array values in table cell with javascript

I need to insert some values ​​in a table. All values are contained in a returned array from an Ajax/php request like this:
var data = [];
//Consider that the number of the object (in this case only 3) obtained from the server are equal to the number of rows in tbody (6 rows in tbody = 6 object from server).
data[0] = {From: '01/01/2012', To: '01/01/2013', Interest: 80.00, Residual: 0, Capital: 1000.00, Days: 366};
data[1] = {From: '01/01/2013', To: '01/01/2014', Interest: 85.00, Residual: 0, Capital: 980.00, Days: 365};
data[2] = {From: '01/01/2014', To: '29/04/2014', Interest: 20.00, Residual: 75.00, Capital: 980.00, Days: 118};
It's a bit tricky to explain how the values must to be inserted in the table, so I created a fiddle with the result I would like to get.
I do not expect you to give me the final result (of course, would be welcome :) ), but at least some idea from which to start.
FIDDLE
**EDIT
I assigned id to cells and now all values are right inserted. That's the updated fiddle, do you think code can be written more elegantly?
UPDATE FIDDLE

I can see the data returned from ajax/php request is in JSON format. So to insert them in HTML table you can use JQuery.
Example (as you given sample data):
function buildDataTableHtml(data){
var tableHtml = "<table><tr>";
tableHtml += "<th>From</th>";
tableHtml += "<th>To</th>";
tableHtml += "<th>Interest</th>";
tableHtml += "<th>Residual</th>";
tableHtml += "<th>Capital</th>";
tableHtml += "<th>Days</th>";
tableHtml += "</tr>";
$.each(data, function(i, v){
tableHtml += "<tr>";
tableHtml += "<td>" + v.From + "</td>";
tableHtml += "<td>" + v.To + "</td>";
tableHtml += "<td>" + v.Interest + "</td>";
tableHtml += "<td>" + v.Residual + "</td>";
tableHtml += "<td>" + v.Capital + "</td>";
tableHtml += "<td>" + v.Days + "</td>";
tableHtml += "</tr>";
});
tableHtml += "</table>";
return tableHtml;
}
If you use this JavaScript function (along with JQuery) then this function will return the HTML of a table you wanted. Hope this will be helpful for you
NOTE: I just write it down in answer box, didn't try to make sure this is working. But hope the code will work. :)