Knockoutjs.com - Hello World Example

http://knockoutjs.com/examples/helloWorld.html

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/css/jasny-bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/js/jasny-bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<div>
<input type="text" id="mysearch" name="mysearch" placeholder="search"/>
</div>

<table class="table" id="mytable">
  <thead>
    <tr>
     <th>Select</th>
      <th>Id</th>
      <th>First</th>
      <th>Last</th>
      <th>Dept</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

CSS

.dataTables_filter {
display: none; 
}

JavaScript

function employee(id, firstName, lastName, dept, active, displayAsLink) {
    var self = this;
    this.id = id;
    this.firstName = firstName;
    this.lastName = lastName;
    this.dept = dept;
    this.active = active;
    this.displayAsLink = displayAsLink;
}

function model() {
  var self = this;
  this.employees = [];
}

var mymodel = new model();

$(document).ready(function() {
  mymodel.employees.push(new employee('1','Clara','Dellinger','IT',false, true));
  mymodel.employees.push(new employee('2','John','Smith','HR',false, true));
  mymodel.employees.push(new employee('3','Fred','Jones','Finance',false, false));
  mymodel.employees.push(new employee('4','Mary','Jans','Finance',false, false));
  mymodel.employees.push(new employee('5','Bob','Jones','IT',false, false));
  mymodel.employees.push(new employee('6','Fred','Thebes','HR',false, true));
  mymodel.employees.push(new employee('7','Sally','Jane','HR',false, true));
  mymodel.employees.push(new employee('8','Patrick','Roberts','HR',false, true));
  mymodel.employees.push(new employee('9','Lisa','Myers','Lab',false, true));
  mymodel.employees.push(new employee('10','Roscoe','Coletrain','Security',false, true));
 var table = $('#mytable').DataTable( {
    data: mymodel.employees,
   columns: [
          {
                data:   'active',
                render: function ( data, type, row ) {
                    if ( type === 'display' ) {
                        return '<input type="checkbox" class="editor-active">';
                    }
                    return data;
                },
                className: "dt-body-center"
            },
        { data: 'id' },
        { data: 'firstName' },
        { data: 'lastName' },
       //{ data: 'dept' }
       {data: 'dept',
        "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
          $(nTd).html("<a href='Freight_ITN.aspx?scn=" + oData.dept + "' target='_blank'>" + "ITN ENTRY" + "</a>");
        }
       }
    ], 
     ...