title: Maintaining State of CheckBoxes While Paging Jquery datatable
body: <p>I am trying to implement a simple list of addresses, with checkboxes to select any or all the data, using <a href="http://datatables.net/" rel="nofollow">Jquery Datatable</a>.</p>
  
  <p>It pretty much works fine, except when I try selecting all items using the select all checkbox. It only selects the current page.</p>
  
  <p>Please tell me what am I doing wrong. </p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="dt_example" class="table-responsive example_alt_pagination clearfix"&gt;
  &lt;table class="table table-condensed table-striped table-hover table-bordered pull-left" id="data-tableAddress"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;&lt;input name="checkall" type="checkbox" class="selectall" data-bind="checked: checkAll" /&gt;&lt;/th&gt;
              &lt;th style="width:10%"&gt;Type&lt;/th&gt;
              &lt;th style="width:10%"&gt;Status&lt;/th&gt;
              &lt;th style="width:30%"&gt;Address&lt;/th&gt;
              &lt;th style="width:14%"&gt;City&lt;/th&gt;
              &lt;th style="width:10%"&gt;State&lt;/th&gt;
              &lt;th style="width:10%"&gt;Zip Code&lt;/th&gt;
              &lt;th style="width:10%"&gt;Country&lt;/th&gt;
              &lt;th style="width:10%"&gt;As Of&lt;/th&gt;
              &lt;th style="width:3%"&gt;&lt;/th&gt;
              &lt;th style="width:3%"&gt;&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody data-bind="foreach: addresses"&gt;
          &lt;tr&gt;
              &lt;th class="checkers"&gt;&lt;input type="checkbox" class="case" /&gt;&lt;/th&gt;
              &lt;td class="hidden-phone" data-bind="html: Type"&gt;&lt;/td&gt;
              &lt;td class="hidden-phone" data-bind="html: Status"&gt;&lt;/td&gt;
              &lt;td class="hidden-phone" data-bind="html: Address"&gt;&lt;/td&gt;
              &lt;td class="hidden-phone" data-bind="html: ZipCode.City"&gt;&lt;/td&gt;
              &lt;td class="hidden-phone" data-bind="html: State.Name"&gt;&lt;/td&gt;
              &lt;td class="hidden-phone" data-bind="html: ZipCode.ZipCode"&gt;&lt;/td&gt;
              &lt;td class="hidden-phone" data-bind="html: Country.Name"&gt;&lt;/td&gt;
              &lt;td class="hidden-phone" data-bind="html: StartDate"&gt;&lt;/td&gt;
  
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p></p>
  
  <p>VIEW MODEL</p>
  
  <pre><code>define(['durandal/app',
      'services/logger',
      'plugins/router',
      'global/session',
      'services/security/setup/state',
      'services/security/employee/general',
      'services/security/employee/address_history',
      'features/employee/address_history/manage',
      'jquery',
      'knockout'],
  function (app, logger, router, session, stateService,
            empGeneralService, addressService, manageAddress, $, ko) {
  
      var dtOptions = {
          //"sPaginationType": "bootstrap",
          "bStateSave": true,
          "bFilter": true,
          "bSort": false,
          "oLanguage": {
              //"sInfo": 'Showing _END_ Sources.',
              "sInfoEmpty": 'No entries to show',
              "sEmptyTable": "No Address found.",
          },
          "iDisplayLength": 1,  //records per page
          "aoColumnDefs": [
              {
                  aTargets: [0],    // Column number which needs to be modified
                  fnRender: function (o, v) {   // o, v contains the object and value for the column
                      return '&lt;input type="checkbox" id="someCheckbox" name="someCheckbox" /&gt;';
                  },
                  sClass: 'tableCell'    // Optional - class to be applied to this table cell
              }]
      };
  
      ko.bindingHandlers.dateString = {
          update: function (element, valueAccessor) {
              var value = valueAccessor();
              var date = moment(value);
              $(element).text(date.format("L"));
          }
      };
  
      var addressTable = null;
      var addresses = ko.observableArray([]);
      var countryList = ko.observableArray();
      var stateList = ko.observableArray();
      var currentHome = ko.observable();
  
      var ctor = function (index) {
          var self = this;
          self.id = index;
          self.addressTable = addressTable;
          self.addresses = addresses;
          self.countryList = countryList;
          self.checkAll = ko.computed({
              read: function () {
                  var addresses = self.addresses();
                  for (var i = 0, l = addresses.length; i &lt; l; i++)
                      if (!addresses[i].Selected()) return false;
                  return true;
              },
              write: function (value) {
                  ko.utils.arrayForEach(self.addresses(), function (address) {
                      address.Selected(value);
                  }); 
              }
          });
  
      };
  
      ctor.prototype.activate = function () {
          var self = this;
          session.isBusy(true);
  
          stateService.getAllStates()
                .done(function (jsret) {
                    stateList(jsret.ReturnValue);
                })
                .fail(function (error) {
                });
  
          stateService.getAllCountries()
                .done(function (jsret) {
                    countryList(jsret.ReturnValue);
                })
                .fail(function (error) {
                });
  
          return addressService.getAddresses(self.id)
              .done(function (jsret) {
                  if (jsret.OperationStatus == "Success") {
                      $.each(jsret.ReturnValue, function (i, item) {
                          if (i == 0 &amp;&amp; item.Type == 'Home' &amp;&amp; item.Status == 'Current') {
                              app.trigger('address:event', item);
                          }
  
                          if (item.Type == 'Home' &amp;&amp; item.Status == 'Current')
                              currentHome(item);
                      });
  
                      addresses([]);
                      ko.utils.arrayMap(jsret.ReturnValue, function (item) {
                          addresses.push(new AddressView(item.Id,
                                                   item.EmployeeId,
                                                   item.Status,
                                                   item.Type,
                                                   item.Address,
                                                   item.State,
                                                   item.Country,
                                                   item.ZipCode,
                                                   item.StartDate))
                      });
                  }
              })
              .fail(function () {
                  //logger.display("Get Employees Failed!");
              })
              .always(function () {
                  session.isBusy(false);
              });
      };
  
      ctor.prototype.attached = function (view) {
          addressTable = $('#data-tableAddress').dataTable(dtOptions);
  
          $("#data-tableAddress_length").css("display", "none");
          $(".dataTables_filter").css("display", "none");
  
      };
  
  
      function AddressView(id, empId, status, type, address, state, country, zipCode, startDate) {
          var self = this;
          self.Id = id;
          self.EmployeeId = empId;
          self.Status = status;
          self.Type = type;
          self.Address = address;
          self.State = {
              Id: state.Id,
              Name: state.Name
          };
          self.Country = {
              Id: country.Id,
              Name: country.Name
          };
          self.ZipCode = {
              City: zipCode.City,
              ZipCode: zipCode.ZipCode
          };
          self.StartDate = startDate;
          self.Selected = ko.observable(false);
      }
  
      return ctor;
  });
  </code></pre>