JSFiddle - React, Tailwind, and code Playground

Knockout DataTables

by Sybeus

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js"></script>
<script src="http://cdn.datatables.net/1.9.4/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="http://cdn.datatables.net/1.9.4/css/jquery.dataTables.css">
<table id="tblSelected">
	<thead>
		<tr>
			<th>Name</th>
			<th>Gender</th>
			<th>Image</th>
			<th></th>
		</tr>
	</thead>
	<tbody>
	</tbody>
</table>
<script type="text/html" id="tblSelected_rowTemplate">
    <td data-bind="text: displayName"></td>
    <td data-bind="text: (isMale ? 'Male' : 'Female')"></td>
    <td><img data-bind="attr: { src: imageUrl }" /></td>
    <td><button type="button" data-bind="click: remove">Remove</button></td>
</script>

JavaScript

/* BEGIN test data */
// Simulate server side list of item.
var serverData = {"count": 64, "items": [{"personID":"468c6d00-e5ea-11e3-8e2e-b8ca3ab75681","displayName":"Kurt Roemer","firstName":"Kurt","lastName":"Roemer","isMale":true,"imageUrl":"http://www.principalfocus.com/images/unknown.gif","alert":false,"doNotContact":false,"createdByID":"72aac0fe-f512-46ef-8bc2-a32b01698d67","updatedByID":"72aac0fe-f512-46ef-8bc2-a32b01698d67","createdOn":"2012-08-01 12:00 AM","updatedOn":"2014-05-27 03:00 PM"},{"personID":"468c6e00-e5ea-11e3-8e2e-b8ca3ab75681","displayName":"James Creamer","firstName":"James","lastName":"Creamer","isMale":true,"imageUrl":"http://www.principalfocus.com/images/unknown.gif","alert":false,"doNotContact":false,"createdByID":"468c6d18-e5ea-11e3-8e2e-b8ca3ab75681","updatedByID":"468c6d18-e5ea-11e3-8e2e-b8ca3ab75681","createdOn":"2004-02-16 12:00 AM","updatedOn":"2009-07-23 11:07 AM"},{"personID":"468c6d04-e5ea-11e3-8e2e-b8ca3ab75681","displayName":"Sid Agnew","firstName":"Sid","lastName":"Agnew","isMale":true,"imageUrl":"http://www.principalfocus.com/images/unknown.gif","alert":false,"doNotContact":false,"createdByID":"72aac0fe-f512-46ef-8bc2-a32b01698d67","updatedByID":"72aac0fe-f512-46ef-8bc2-a32b01698d67","createdOn":"2010-10-22 12:00 AM","updatedOn":"2014-05-27 03:00 PM"},{"personID":"468c6f07-e5ea-11e3-8e2e-b8ca3ab75681","displayName":"Robert Aisenbrey","firstName":"Robert","lastName":"Aisenbrey","isMale":true,"imageUrl":"http://www.principalfocus.com/images/unknown.gif","alert":false,"doNotContact":false,"createdByID":"468c6d48-e5ea-11e3-8e2e-b8ca3ab75681","updatedByID":"468c6d48-e5ea-11e3-8e2e-b8ca3ab75681","createdOn":"2004-02-26 12:00 AM","updatedOn":"2008-09-04 08:13 AM"},{"personID":"468c6d08-e5ea-11e3-8e2e-b8ca3ab75681","displayName":"Amy...