title: Datatable data binding using knockoutjs
body: <p>I want to render data into table using datatable knockoutjs binding.
  I am using the below link and code for rendering data into table. <a href="http://datatables.net/dev/knockout/" rel="nofollow">http://datatables.net/dev/knockout/</a></p>
  
  <p>The only change I did in above example is while rendering age data I have added input box in age col for ever record and Updatebutton at the bottom of table, so that user can change his age and click of update button data should be updated automatically and in next page it should reflect in table.</p>
  
  <p>The issue am facing is that i am unable to update local js "people" model and hence unable to bind updated data using knockoutjs.</p>
  
  <pre><code>ko.observableArray.fn.subscribeArrayChanged = function(addCallback, deleteCallback) {
      var previousValue = undefined;
      this.subscribe(function(_previousValue) {
          previousValue = _previousValue.slice(0);
      }, undefined, 'beforeChange');
      this.subscribe(function(latestValue) {
          var editScript = ko.utils.compareArrays(previousValue, latestValue);
          for (var i = 0, j = editScript.length; i &lt; j; i++) {
              switch (editScript[i].status) {
                  case "retained":
                      break;
                  case "deleted":
                      if (deleteCallback)
                          deleteCallback(editScript[i].value);
                      break;
                  case "added":
                      if (addCallback)
                          addCallback(editScript[i].value);
                      break;
              }
          }
          previousValue = undefined;
      });
  };`
  
  
   `var data = [
      { id: 0, first: "Allan", last: "Jardine", age: 86 },
      { id: 1, first: "Bob", last: "Smith", age: 54 },
      { id: 2, first: "Jimmy", last: "Jones", age: 32 }
  ]; `
  
     `var Person = function(data, dt) {
      this.id    = data.id;
      this.first = ko.observable(data.first);
      this.last  = ko.observable(data.last);
      this.age   = ko.observable(data.age);
  
      // Subscribe a listener to the observable properties for the table
      // and invalidate the DataTables row when they change so it will redraw
       var that = this;
      $.each( [ 'first', 'last', 'age' ], function (i, prop) {
          that[ prop ].subscribe( function (val) {
              // Find the row in the DataTable and invalidate it, which will
              // cause DataTables to re-read the data
              var rowIdx = dt.column( 0 ).data().indexOf( that.id );
              dt.row( rowIdx ).invalidate();
          } );
      } ); 
  };
  
      $(document).ready(function() {
  
  var people = ko.mapping.fromJS( [] );
      //loadData();
  
      var dt = $('#example').DataTable( {
          "bPaginate": false,
          "bInfo" : false,
          "bAutoWidth" : false,
          "sDom" : 't',
          "columns": [
              { "data": 'id' },
              { "data": 'first' },
              { "data": 'age',
                  "mRender": function (data, type, row ) {    
                                  var html = '&lt;div style="display:inline-flex"&gt;' + 
                                                  '&lt;input type="text" class="headerStyle h5Style" id="ageId" value="'+data()+'"/&gt;' +
                                                  '&lt;/div&gt;';
  
                                    return html;
                              } 
               }
          ]
  
  
      } );
  
  
      // Update the table when the `people` array has items added or removed
      people.subscribeArrayChanged(
          function ( addedItem ) {
              dt.row.add( addedItem ).draw();
          },
          function ( deletedItem ) {
              var rowIdx = dt.column( 0 ).data().indexOf( deletedItem.id );
              dt.row( rowIdx ).remove().draw();
          }
      );
  
      // Convert the data set into observable objects, and will also add the
      // initial data to the table
      ko.mapping.fromJS(
          data,
          {
              key: function(data) {
              var d = data;
  
                  return ko.utils.unwrapObservable(d.id);        
              },
              create: function(options) {
                  return new Person(options.data, dt);
              }    
          },
          people
      );
  
  
  
  } );
  </code></pre>