Adding xml data to existing table
Adding xml data to existing table
jstenkvist
Posts: 1Questions: 1Answers: 0
I have a html page with an existing table.
The table initially has 1 row with a checkbox, 2 input fields and a select box.
I would like to convert this to a datatable and add rows from inline xml.
This works fine, but what I really want is to add the new rows like the existing row.
I.e. I would like to convert a "true" in the xml to a marked checkbox, and the next 2 xml values to input fields and so on.
Any suggestions on how to do this?
Example code in jFiddle; http://jsfiddle.net/jstenkvist/9UZUh/523/
Code
<html>
<head>
<LINK rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.3/css/jquery.dataTables.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.3/js/jquery.dataTables.min.js"></script>
<script id="tblCommunicationCustomer_system_grid_xmldata" type="application/xml"><entitys><entity><inpPriority>true</inpPriority><inpCustomerCommunicationName>Test Testman</inpCustomerCommunicationName><inpCustomerCommunicationData>test.testman@test.com</inpCustomerCommunicationData><selCustomerCommunicationType>1</selCustomerCommunicationType></entity><entity><inpPriority>false</inpPriority><inpCustomerCommunicationName>Test 2</inpCustomerCommunicationName><inpCustomerCommunicationData>test2@test.com</inpCustomerCommunicationData><selCustomerCommunicationType>1</selCustomerCommunicationType></entity><entity><inpPriority>false</inpPriority><inpCustomerCommunicationName>Test 2</inpCustomerCommunicationName><inpCustomerCommunicationData>555 555 555</inpCustomerCommunicationData><selCustomerCommunicationType>3</selCustomerCommunicationType></entity><entity><inpPriority></inpPriority><inpCustomerCommunicationName></inpCustomerCommunicationName><inpCustomerCommunicationData></inpCustomerCommunicationData><selCustomerCommunicationType></selCustomerCommunicationType></entity></entitys></script>
<script type="text/javascript">
$(document).ready(function() {
var sGridName = "tblCommunicationCustomer";
var thisTable = $('#tblCommunicationCustomer').dataTable( {
"paging": false,
"searching": false,
"lengthChange": false,
"info": false
});
//Simulated data response
var orderSource = document.getElementById("tblCommunicationCustomer_system_grid_xmldata").textContent;
var data = {
xml: orderSource
}
var xmlDoc = $.parseXML(orderSource);
var $xml = $(xmlDoc);
var $events = $($xml).find("entity");
$events.each(function (index, event) {
var $event = $(event),
addData = [];
$event.children().each(function (i, child) {
addData.push($(child).text());
});
thisTable.fnAddData(addData);
});
} );
</script>
</head>
<body>
<table class="display" id="tblCommunicationCustomer">
<thead>
<tr>
<th >
Selected
</th>
<th>
Contact
</th>
<th>
Communication
</th>
<th>
Communication type
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input TYPE="checkbox" name="inpPriority_checkbox" id="inpPriority_checkbox"/>
<input TYPE="hidden" name="inpPriority" id="inpPriority"/>
</td>
<td>
<input TYPE="text" name="inpCustomerCommunicationName" id="inpCustomerCommunicationName"/>
</td>
<td>
<input TYPE="text" name="inpCustomerCommunicationData" id="inpCustomerCommunicationData"/>
</td>
<td>
<select name="selCustomerCommunicationType" id="selCustomerCommunicationType">
<option value=""></option>
<option selected="selected" value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
</td>
</tr>
</tbody>
</table>
</body>
</html>
This discussion has been closed.