JSFiddle - React, Tailwind, and code Playground

by jstenkvist

HTML

<script src="https://cdn.datatables.net/1.10.3/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.3/css/jquery.dataTables.css">
<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>
<body>
<table id="tblCommunicationCustomer">
	<thead>
		<tr>
			<th >
				Prio
			</th>
			<th>
				Kontaktperson
			</th>
			<th>
				Kontaktuppgift
			</th>
			<th>
				Typ
			</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"...

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);
		    });

		} );