Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Knockout paging</title>
​
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"></link>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-debug.js"></script>
  <script src="https://rawgit.com/ErikSchierboom/knockout-paging/master/dist/knockout-paging.js" type="text/javascript"></script>
</head>
<body>
    
    <ul class="pagination">
​
      <li data-bind="css: { disabled: chars.isFirstPage() }" class="previous disabled">
        <a href="#" aria-label="First" data-bind="click: chars.toFirstPage">
          First
        </a>
      </li>
​
      <li data-bind="css: { disabled: !chars.hasPreviousPage() }" class="previous disabled">
        <a href="#" aria-label="Previous" data-bind="click: chars.toPreviousPage">
          Previous
        </a>
      </li>
​
      <!-- ko foreach: chars.pages -->
      <li data-bind="css: { active: $data == $parent.chars.pageNumber() }">
        <a href="#" data-bind="text: $data, click: $parent.chars.pageNumber.bind($data)"></a>
      </li>
      <!-- /ko -->
​
      <li data-bind="css: { disabled: !chars.hasNextPage() }" class="next disabled">
        <a href="#" aria-label="Next" data-bind="click: chars.toNextPage">
          Next
        </a>
      </li>
​
      <li data-bind="css: { disabled: chars.isLastPage() }" class="next disabled">
        <a href="#" aria-label="Last" data-bind="click: chars.toLastPage">
          Last
        </a>
      </li>
  </ul>
  </nav>
  
  <ul>
    <li>
      <label>Page number:</label>
      <span data-bind="text: chars.pageNumber"></span>
    </li>
    
    <li>
      <label>Page size:</label>
      <span data-bind="text: chars.pageSize"></span>
    </li>
    
    <li>
      <label>Page count:</label>
      <span data-bind="text: chars.pageCount"></span>
    </li>
    
    <li>
      <label>Item count:</label>
      <span data-bind="text: chars.pageCount"></span>
    </li>
    
    <li>
      <label>First item on page:</label>
      <span data-bind="text: chars.firstItemOnPage"></span>
    </li>
    
    <li>
      <label>Last item on page:</label>
      <span data-bind="text: chars.lastItemOnPage"></span>
    </li>
    
    <li>
      <label>Has previous page:</label>
      <span data-bind="text: chars.hasPreviousPage "></span>
    </li>
    
    <li>
      <label>Has next page:</label>
      <span data-bind="text: chars.hasNextPage "></span>
    </li>
    
    <li>
      <label>Has first page:</label>
      <span data-bind="text: chars.isFirstPage"></span>
    </li>
    
    <li>
      <label>Has last page:</label>
      <span data-bind="text: chars.isLastPage"></span>
    </li>
    
    <li>
      <label>Items on current page:</label>
​
      <ul data-bind="foreach: chars.pageItems">
        <li data-bind="text: $data"></li> 
      </ul>
    </li>
    
    <li>
      <label>View model:</label>
      <pre data-bind="text: ko.toJSON(viewModel)"></pre>
  </ul>
  
</script>
</body>
</html>
 
function ViewModel() {
  var self = this;
  
  self.chars = ko.observableArray(['a', 'b', 'c', 'd', 'e']).extend({ paged: { pageSize: 2 } });
  
  self.setPage = function(newPage) {
    self.chars.pageNumber(newPage);
  };
}
​
var viewModel = new ViewModel();
ko.applyBindings(viewModel);
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
ErikSchierboompro
0viewers