Knockoutjs.com - Hello World Example

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

by Muhammad Mushtaq Sheikh

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) {
  var self = this;
  this.id = id;
  this.firstName = firstName;
  this.lastName = lastName;
  this.dept = dept;
  this.active = active;
}

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

var mymodel = new model();

$(document).ready(function() {
  mymodel.employees.push(new employee('1', 'Clara', 'Dellinger', 'IT', false));
  mymodel.employees.push(new employee('2', 'John', 'Smith', 'HR', false));
  mymodel.employees.push(new employee('3', 'Fred', 'Jones', 'Finance', false));
  mymodel.employees.push(new employee('4', 'Mary', 'Jans', 'Finance', false));
  mymodel.employees.push(new employee('5', 'Bob', 'Jones', 'IT', false));
  mymodel.employees.push(new employee('6', 'Fred', 'Thebes', 'HR', false));
  mymodel.employees.push(new employee('7', 'Sally', 'Jane', 'HR', false));
  mymodel.employees.push(new employee('8', 'Patrick', 'Roberts', 'HR', false));
  mymodel.employees.push(new employee('9', 'Lisa', 'Myers', 'Lab', false));
  mymodel.employees.push(new employee('10', 'Roscoe', 'Coletrain', 'Security', false));
  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'
    }],
    rowCallback: function(row, data) {
      // Set the checked state of the checkbox in the table
      $('input.editor-active', row).prop('checked', data.active);
    },
    "aaSorting": [
      [3, 'asc']
    ],
  });

  $('#mytable tbody').on('click', 'input[type="checkbox"]', function(e) {
    var active = $(this).prop('checked');
    var $row = $(this).closest('tr');
    var employee = table.row($row).data();
    employee.active =...