-
Notifications
You must be signed in to change notification settings - Fork 4
Expand file tree
/
Copy pathtutorial.html
More file actions
156 lines (145 loc) · 7.69 KB
/
tutorial.html
File metadata and controls
156 lines (145 loc) · 7.69 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<html>
<head>
<title>Tilava Table Tutorial</title>
<style type="text/css">
.code {
border: 1px solid #eeeeee;
background-color: #dddddd;
}
body {
font-family: sans-serif;
}
table, th, td { border: 1px solid black; }
.template { display: none; }
</style>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="tilava-table.js"></script>
<script type="text/javascript" src="jquery.mousewheel.js"></script>
</head>
<body>
<h1>Tilava Table Tutorial</h1>
<p>Tilava Table is a simple library for displaying large amounts of data without slowing the browser down.</p>
<h3>1. Include tilava-table.js</h3>
<p>Copy <a href="tilava-table.js">tilava-table.js</a> to your project and include it:</p>
<pre class="code"><script type="text/javascript" src="<a href="tilava-table.js">tilava-table.js</a>"></script></pre>
<p>Tilava Table also requires <a href="http://docs.jquery.com/Downloading_jQuery">jQuery</a> so include that as well:</p>
<pre class="code"><script type="text/javascript" src="<a href="jquery-1.7.1.min.js">jquery-1.7.1.min.js</a>"></script></pre>
<p>Optional: If you want the table to scroll when the mouse wheel is moved while hovering over the table, you must include <a href="https://github.com/brandonaaron/jquery-mousewheel">jquery-mousewheel</a>:</p>
<pre class="code"><script type="text/javascript" src="<a href="jquery.mousewheel.js">jquery.mousewheel.js</a>"></script></pre>
<h3>2. Create an html table</h3>
<pre class="code">
<table id="transactionTable" >
<thead>
<tr>
<th>Time</th>
<th>Transaction Id</th>
<th>Category</th>
<th>Price</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr class="template">
<td><span class="time"></span></td>
<td><span class="transactionId"></span></td>
<td><span class="category"></span></td>
<td><span class="price"></span></td>
<td><span class="quantity"></span></td>
</tr>
</tbody>
</table>
</pre>
<p>Notice the row with the class "template". This row is going to be cloned to create additional rows. Be sure that in the css, the class template is set to "display: none;"</p>
<h3>3. Create the tilava table</h3>
<pre class="code">
t = new TilavaTable({
parent: $('#transactionTable tbody'),
template: $('#transactionTable tbody .template'),
render: function(row, record, index) {
row.find(".time").text(record.time);
row.find(".transactionId").text(record.transactionId);
row.find(".category").text(record.category);
row.find(".price").text("$" + record.price);
row.find(".quantity").text(record.quantity);
},
visibleRows: 10
});</pre>
<p>There are some important parameters to TilavaTable.</p>
<p><strong>parent</strong> is a jQuery object for the tbody of the table. Additional rows will be children of this element.</p>
<p><strong>template </strong> is a jQuery object for the row that will be cloned for additional rows.</p>
<p><strong>render</strong> is a callback that gets called whenever the tilava table wishes to display a row. It takes three parameters: row is the empty cloned template row, record is the javascript object that represents the data, and index is the index of the row into the table. The function should put the data into the empty row.</p>
<p><strong>visibleRows</strong> is the maximum number of rows to be displayed at one time. When more than this many are present, a scroll bar will appear. Set to Infinity to show as many rows as possible before forcing the whole page to have a scrollbar.</p>
<p><strong>displayReversed</strong>. When true, elements are displayed in reverse order. When a record is appended, it shows up at the top of the table.</p>
<h3>4. Add some data</h3>
<p>To add data, call the appendRecord function on the tilava table:</p>
<pre class="code">
for (var i = 0; i < 100; i++) {
t.appendRecord({
time: "2012-01-04 11:07:27",
transactionId: i,
category: "Hardlines",
price: 1.23,
quantity: 10
});
}</pre>
<div>
<table id="transactionTable" >
<thead>
<tr>
<th>Time</th>
<th>Transaction Id</th>
<th>Category</th>
<th>Price</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr class="template">
<td><span class="time"></span></td>
<td><span class="transactionId"></span></td>
<td><span class="category"></span></td>
<td><span class="price"></span></td>
<td><span class="quantity"></span></td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
t = new TilavaTable({
parent: $('#transactionTable tbody'),
template: $('#transactionTable tbody .template'),
render: function(row, record, index) {
row.find(".time").text(record.time);
row.find(".transactionId").text(record.transactionId);
row.find(".category").text(record.category);
row.find(".price").text("$" + record.price);
row.find(".quantity").text(record.quantity);
},
visibleRows: 10,
});
for (var i = 0; i < 100; i++) {
t.appendRecord({
time: "2012-01-04 11:07:27",
transactionId: i,
category: "Hardlines",
price: 1.23,
quantity: 10
});
}
</script>
<h3>5. Additional functions</h3>
<p>There are a number of functions for modifying the data in the table:</p>
<p><strong>clear()</strong> removes all data from the table.</p>
<p><strong>appendRecord(record)</strong> add a single record to the end of the table. Prefer to use appendRecords when adding many records as it is more efficient.</p>
<p><strong>appendRecords(records)</strong> add an array of records to the end of the table.</p>
<p><strong>prependRecord(record)</strong> add a single record to the beginning of the table. Prefer to use prependRecords when adding many records as it is more efficient.</p>
<p><strong>prependRecords(records)</strong> add an array of records to the beginning of the table.</p>
<p><strong>insertRecord(index, record)</strong> insert a record at the specified index and shift all the remaining records down.</p>
<p><strong>removeRecord(index)</strong> remove the record at the specified index and shift the rest down.</p>
<h3>6. Adding additional features</h3>
<p>The TilavaTable api provides no functions for common table operations such as sorting or filtering.</p>
<p>You can add these yourself by keeping a local copy of all the data. Clearing the table, sorting or filtering and then adding all the data back into the table.</p>
<h3>That's it.</h3>
<p>View the <a href="example.html">finished example</a>.</p>
</body>
</html>