JSFiddle - React, Tailwind, and code Playground

by Nofiden Noble

HTML

<script src="http://hnakamur.github.io/backgrid-example/js/backbone-1.1.2.js"></script>
<script src="http://hnakamur.github.io/backgrid-example/js/backbone-japanese-input-handler-mixin.js"></script>
<script src="http://hnakamur.github.io/backgrid-example/js/backbone-pageable.js"></script>
<script src="http://hnakamur.github.io/backgrid-example/js/backgrid-0.3.5.js"></script>
<script src="http://hnakamur.github.io/backgrid-example/js/backgrid-filter.js"></script>
<script src="http://hnakamur.github.io/backgrid-example/js/backgrid-paginator.js"></script>
<script src="http://hnakamur.github.io/backgrid-example/js/backgrid-select-all.js"></script>
<script src="http://hnakamur.github.io/backgrid-example/js/jquery-1.11.0.js"></script>
<script src="http://hnakamur.github.io/backgrid-example/js/underscore-1.6.0.js"></script>
<h1>BackGrid complete example with filters and paginator</h1>
<div id="example-2-result" class="backgrid-container"></div>

JavaScript

$(function() {

var Territory = Backbone.Model.extend({});

var columns = [{
    name: "id", // The key of the model attribute
    label: "ID", // The name to display in the header
    editable: false, // By default every cell in a column is editable, but *ID* shouldn't be
    // Defines a cell type, and ID is displayed as an integer without the ',' separating 1000s.
    cell: Backgrid.IntegerCell.extend({
      orderSeparator: ''
    })
  }, {
    name: "name",
    label: "Name",
    // The cell type can be a reference of a Backgrid.Cell subclass, any Backgrid.Cell subclass instances like *id* above, or a string
    cell: "string" // This is converted to "StringCell" and a corresponding class in the Backgrid package namespace is looked up
  }, {
    name: "pop",
    label: "Population",
    cell: "integer" // An integer cell is a number cell that displays humanized integers
  }, {
    name: "percentage",
    label: "% of World Population",
    cell: "number" // A cell type for floating point value, defaults to have a precision 2 decimal numbers
  }, {
    name: "date",
    label: "Date",
    cell: "date"
  }, {
    name: "url",
    label: "URL",
    cell: "uri" // Renders the value in an HTML anchor element
}];

var PageableTerritories = Backbone.PageableCollection.extend({
  model: Territory,
  url: "examples/pageable-territories-ja.json",
  state: {
    pageSize: 15
  },
  mode: "client" // page entirely on the client side
});

var pageableTerritories = new PageableTerritories();

// Set up a grid to use the pageable collection
var pageableGrid = new Backgrid.Grid({
  columns: [{
    // enable the select-all extension
    name: "",
    cell: "select-row",
    headerCell: "select-all"
  }].concat(columns),
  collection: pageableTerritories
});

// Render the grid
var $example2 = $("#example-2-result");
$example2.append(pageableGrid.render().el)

// Initialize the paginator
var paginator = new Backgrid.Extension.Paginator({
  collection:...