/knockout-table

Knockout plugin for displaying

Primary LanguageJavaScript

knockout-table

Knockout plugin for displaying arrays of models as a table.

Goals:

  • Separation of UI and Javascript code.
  • Give the design and program flexibility
  • Efficiently work with large datasets.

Dependencies

Basic Example

Create a knockout model to represent your data.

HTML

<html>
<head>
  <script src="jquery.min.js"></script>
  <script src="knockout.min.js"></script>
  <script src="bootstrap-slider.min.js"></script>
  <script src="knockout-table.js"></script>
</head>
<body>
<div id='simpleDemo'>
  <div style="float: right;">
			<input class="scrollbar" type="text" 
					data-slider-tooltip="hide"
					data-slider-min="-100"
					data-slider-step="1"
					data-slider-orientation="vertical"
					data-slider-max="100"
					data-slider-value="0"
					data-slider-natural_arrow_keys="true"
				/>
		</div>
  <table>
    <thead>
      <tr>
        <th>Column Title</th>
      </tr>
    </thead>
    <tbody>
      <!-- ko foreach: getCurrentPage -->
        <tr>
          <td>
            <span data-bind="text: propertyName"></span>
          </td>
        </tr>
      <!-- /ko -->
    </tbody>
  <table>
</div>
</body>
</html>

Javasript:

View Model

myViewModel_vm = function() {
  var self = this;
  self.propertyName = ko.observable('');
}

Application

$(document).ready( function() {
  demo1 = new knockout_table_vm( { 
    'id':'simpleDemo',
    'model':myViewModel_vm 
  });
  
  //Apply only to the table.
  ko.applyBindings( demo1, document.getElementById('simpleDemo') );
  //Or apply to the whole page.
  //ko.applyBindings( demo1 );
}