Knockout.Extensions DataBinding Sample 1

HTML

<link rel="stylesheet" href="https://raw.github.com/DataTables/DataTables/master/media/css/demo_table_jui.css">
<script src="https://github.com/douglascrockford/JSON-js/blob/master/json2.js"></script>
<script src="https://raw.github.com/CogShift/Knockout.Extensions/master/Javascript/src/cog.js"></script>
<script src="https://raw.github.com/CogShift/Knockout.Extensions/master/Javascript/src/cog.utils.js"></script>
<script src="https://raw.github.com/CogShift/Knockout.Extensions/master/Demo/Knockout.Extensions.Demo.Web/Scripts/DataTables-1.8.2/media/js/jquery.dataTables.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout/master/build/output/knockout-latest.debug.js"></script>
<script src="https://raw.github.com/CogShift/Knockout.Extensions/master/Javascript/src/knockout.bindings.dataTables.js"></script>
<!-- Sample 1: Basic Data Table -->
<div Id="sample1" class="sample">
    <h1>Sample1: Basic Data Table</h1>
    <p class="description">
        This example demonstrates a basic data table using a knockout observable array as a data source.  
        Using the Add and Remove links will add and remove items to the table's data source, and in turn will
        add and remove rows in the data table.  This shows that each row in the table is bound to each item in the
        array data source.
    </p>
    <div class="table">
        <a data-bind="click: addItem">Add</a>
        <a data-bind="click: removeLastItem">Remove</a>
        <br /><br />
        <table data-bind="dataTable: { 
            dataSource: data, 
            columns: [
                'Column1', 
                'Column2', 
                'Column3', 
                { mDataProp: 'IsSelected', bSortable: false }
            ]
        }">
            <thead>
                <tr>
                    <td>Column 1</td>
                    <td>Column 2</td>
                    <td>Column 3</td>
                    <td>Select All <input type="checkbox" name="chkSelectAll"...

CSS

.sample
{
    border:1px solid gray;
    padding:15px;
    margin-top:10px;
    margin-bottom:10px;
}

.sample .description
{
    
}

.sample h1
{
    margin-top: 0px;
    margin-bottom: 20px;
    font-size:1.5em;
}

.sample h2
{
    margin-top: 0px;
    margin-bottom: 5px;
    font-size:1.1em;
}
.sample .table, .sample table
{
    width:800px;
    
}

.sample p 
{
     margin-top:20px;   
     margin-bottom:20px;
}

.sample a
{
     color:blue;
     text-decoration:underline;
     cursor:pointer;   
}

JavaScript

function Record(Id, Column1, Column2, Column3) {
        this.Id = Id;
        this.Column1 = ko.observable(Column1);
        this.Column2 = ko.observable(Column2);
        this.Column3 = ko.observable(Column3);
        this.IsSelected = ko.observable(false);
    }

    function ViewModel() {

        var cellCounter = 0;
        var idCounter = 0;
        var vm = this;

        this.selectAll = ko.observable(false);

        this.editable = ko.observable(true);

        this.toggleEdit = function () {
            vm.editable(!vm.editable());
        }

        this.data = ko.observableArray([
                    CreateRecord(),
                    CreateRecord(),
                    CreateRecord(),
                    CreateRecord()
                ]);

        this.getData = function (options, callback) {
            $.ajax({
                url: '/Demo/DataTables',
                data: ko.toJSON(options),
                type: "POST",
                contentType: "application/json charset=utf-8",
                dataType: "json",
                success: function (responseData, textStatus, jqXHR) {
                    callback(responseData);
                }
            });
        }

        this.json = ko.dependentObservable(function () {
            return ko.toJSON(this.data);
        }, this);

        this.selectAll.subscribe(function (isSelected) {
            $.each(vm.data(), function (i, item) {
                item.IsSelected(isSelected);
            });
        });

        this.addItem = function () {
            this.data.push(CreateRecord());
        }

        this.removeLastItem = function () {
            this.data.pop();
        }

        this.removeItem = function (item) {
            // Issue: DataTables is copying the dataSource of the data table internally, so an attempt to remove by instance here wont work.
            // Unfortunately we have to match by key here currently...
            //            this.data.remove(item);
      ...