dev.html

<!DOCTYPE html>
<html>
<head>
	<title>tTable.js</title>
	<link href="css/style.css" type="text/css" rel="stylesheet"/>
	<link href="css/tTable.css" type="text/css" rel="stylesheet"/>
</head>

<body>


<h1>tTable.js - work with tables like a boss.</h1>
<hr/>
<h2>Demo table config and result: [<button class="table_id--update">Update</button>] [<button id="table_id_object">console.log()</button>]</h2>
<!--
<pre><code id="table_id_config">ttt.project = new tTable( {
	"titles"     : [...],
	"start_page" : <span contenteditable="true" data-start_page>2</span>,
	"row_numbers": <span contenteditable="true" data-row_numbers>true</span>,
	"sort_by"    : <span contenteditable="true" data-sort_by>1</span>,
	"sorting"    : <span contenteditable="true" data-sorting>true</span>,
	"page_size"  : <span contenteditable="true" data-page_size>2</span>,
	"page_sizes" : [<span contenteditable="true" data-page_sizes>2,5,10</span>],
	"nav_arrows" : <span contenteditable="true" data-nav_arrows>true</span>,
	"goto"       : <span contenteditable="true" data-goto>true</span>,
	"show_pages" : <span contenteditable="true" data-show_pages>true</span>,
	"data"       : [...],
	"container"  : "#table_id",
	"pager"      : "#table_id_pager"
} );
</code></pre>
-->


<div id="table_id"></div>
<div id="table_id_pager"></div>
<div id="table_id_search"></div>
<div id="table_id_filters"></div>

<br/>
<hr/>
<h2>AJAX demo table:</h2>

<div id="ajax_table_id"></div>
<div id="ajax_table_id_pager"></div>
<div id="ajax_table_id_search"></div>

<br/>
<hr/>
<h2>Demo table with long random-generated data:</h2>
<div id="long_table_id"></div>
<br/>
<div id="long_table_id_pager"></div>
<div id="long_table_id_search"></div>


<script src="js/libs/jquery.min.js"></script>
<script src="js/libs/lodash.min.js"></script>
<script src="tTable.js"></script>
<script src="js/dev.js"></script>
</body>
</html>