JSFiddle - React, Tailwind, and code Playground

by mwagner72

HTML

<script src="https://raw.github.com/documentcloud/underscore/1.1.7/underscore.js"></script>
<script src="http://datatables.net/download/build/jquery.dataTables.js"></script>
<script src="https://raw.github.com/mwagner72/JSON-js/master/json2.js"></script>
<script src="https://raw.github.com/documentcloud/backbone/0.5.3/backbone.js"></script>
<script src="https://raw.github.com/derickbailey/backbone.modelbinding/v0.2.1/backbone.modelbinding.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<table id="table_id_1">
    <thead>
        <tr>
            <th>title</th>
            <th>page #</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1 Data 1</td>
            <td>Row 1 Data 2</td>
        </tr>
        <tr>
            <td>Row 2 Data 1</td>
            <td>Row 2 Data 2</td>
        </tr>
    </tbody>
</table>

<table id="table_id_2">
    <thead>
        <tr>
            <th>title</th>
            <th>page #</th>
            <th>etc</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1 Data 1</td>
            <td>Row 1 Data 2</td>
            <td>etc</td>
        </tr>
        <tr>
            <td>Row 2 Data 1</td>
            <td>Row 2 Data 2</td>
            <td>etc</td>
        </tr>
    </tbody>
</table>
<table id="table_id_3">
    <thead>
        <tr>
            <th>title</th>
            <th>page #</th>
            <th>etc</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1 Data 1</td>
            <td>Row 1 Data 2</td>
            <td>etc</td>
        </tr>
        <tr>
            <td>Row 2 Data 1</td>
            <td>Row 2 Data 2</td>
            <td>etc</td>
        </tr>
    </tbody>
</table>
<table id="table_id_4">
    <thead>
        <tr>
            <th>title</th>
            <th>page #</th>
            <th>etc</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1 Data 1</td>
           ...

CSS

.clearfix {
  zoom: 1; }
  .clearfix:before, .clearfix:after {
    display: table;
    content: "";
    zoom: 1; }
  .clearfix:after {
    clear: both; }

.fixed-container {
  width: 940px;
  margin-left: auto;
  margin-right: auto;
  zoom: 1; }
  .fixed-container:before, .fixed-container:after {
    display: table;
    content: "";
    zoom: 1; }
  .fixed-container:after {
    clear: both; }

html, body {
  margin: 0;
  padding: 0; }

h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, del, dfn, em, img, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  line-height: 1;
  font-family: inherit; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

ol, ul {
  list-style: none; }

q:before, q:after {
  content: ""; }

blockquote:before, blockquote:after {
  content: ""; }

html {
  overflow-y: scroll;
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%; }

a:focus {
  outline: 0; }
a:hover, a:active {
  outline: 0; }

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
  display: block; }

audio, canvas, video {
  display: inline-block;
  *display: inline;
  *zoom: 1; }

audio:not([controls]) {
  display: none; }

sub {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
  top: -0.5em; }

sub {
  bottom: -0.25em; }

img {
  border: 0;
  -ms-interpolation-mode: bicubic; }

button, input, select, textarea {
  font-size: 100%;
  margin: 0;
  vertical-align: baseline;
  *vertical-align: middle; }

button, input {
  line-height: normal;
  *overflow: visible; }

button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0; }

button {
  cursor:...

JavaScript

var Chapter  = Backbone.Model;
var chapters = new Backbone.Collection();

chapters.add(new Chapter({page: 9, title: "The End"}));
chapters.add(new Chapter({page: 5, title: "The Middle"}));
chapters.add(new Chapter({page: 1, title: "The Beginning"}));

var ChapterEntryView = Backbone.View.extend({
    tagName: "tr",
    render: function(){
    $(this.el).append($("#chapter-item-template").tmpl(this.model.toJSON()));
    return this;        
    }
});

var ChapterListView = Backbone.View.extend({

    render: function () {
        var table = $("#table_id_2 tbody");
        table.empty();
        this.collection.each(function (chapter) {
            var chapterEntry = new ChapterEntryView({ model: chapter });
            table.append(chapterEntry.render().el);
        });
        return this;
    }
});

$(function() {

   var table2 = new ChapterListView({ collection: chapters, el:$("#table_id_2") });
    
   table2.render();
    $('#table_id_2').dataTable();
    
    $('#table_id_1').dataTable({
        "aaData": chapters.toJSON(),
        "aoColumns": [
            { "sTitle": "Title",   "mDataProp": "title" },
            { "sTitle": "Page #",  "mDataProp": "page" }]
    });
    
    $('#table_id_3').dataTable({
        "aoColumns": [
            { "sTitle": "Title",   "mDataProp": "title" },
            { "sTitle": "Page #",  "mDataProp": "page" }],
        sAjaxSource: "",
        sAjaxDataProp: "",
        fnServerData: function( sSource, aoData, fnCallback ){
            console.log('here we go');
            fnCallback(chapters.toJSON());
        }
    });

    $('#table_id_4').dataTable({
        dataSource: chapters,
        rowTemplate: 'chapter-item-template', 
        "aoColumns": [
            { "sTitle": "Title",   "mDataProp": "title" },
            { "sTitle": "Page #",  "mDataProp": "page" }]
    });
    
    chapters.add(new Chapter({page: 4, title: "The next bunny"}));

});