S'pose we wanted to display a table of cities. Just create a view model for the data:
188 | 189 |190 | class City 191 | 192 | constructor: (@view, row) -> 193 | @population = ko.observable row.population 194 | @countryName = row.country_name 195 | @cityName = row.city_name 196 | 197 | class @CitiesModel 198 | 199 | constructor: -> 200 | 201 | tableOptions = 202 | recordWord: 'city' 203 | recordWordPlural: 'cities' 204 | sortDir: 'desc' 205 | sortField: 'population' 206 | perPage: 15 207 | unsortedClass: 'glyphicon glyphicon-sort' 208 | ascSortClass: 'glyphicon glyphicon-sort-by-attributes' 209 | descSortClass: 'glyphicon glyphicon-sort-by-attributes-alt' 210 | 211 | @table = new DataTable [], tableOptions 212 | @table.loading true 213 | 214 | req = new XMLHttpRequest() 215 | req.open 'GET', '/api/cities', true 216 | 217 | req.onload = => 218 | if req.status >= 200 and req.status < 400 219 | response = JSON.parse req.responseText 220 | rows = response.results.map (row) => new City @, row 221 | @table.rows rows 222 | @table.loading false 223 | else 224 | alert "Error communicating with server" 225 | @table.loading false 226 | 227 | req.onerror = => 228 | alert "Error communicating with server" 229 | @table.loading false 230 | 231 | req.send() 232 | 233 | ko.applyBindings @234 | 235 |
And a table, like so:
236 | 237 |
238 | <div data-bind="with: table">
239 | <div class="pull-right">
240 | <strong>Results per page</strong>
241 | <select data-bind="options: [10,25,50], value: perPage"></select>
242 | </div>
243 | <input type="text" data-bind="textInput: filter" placeholder="Search"/>
244 | <table class="table table-striped table-bordered">
245 | <thead>
246 | <tr>
247 | <th style="width: 34%;" data-bind="click: toggleSort('cityName')" class="sortable">
248 | City
249 | <i data-bind="css: sortClass('cityName')"></i>
250 | </th>
251 | <th style="width: 33%;" data-bind="click: toggleSort('countryName')" class="sortable">
252 | Country
253 | <i data-bind="css: sortClass('countryName')"></i>
254 | </th>
255 | <th style="width: 33%;" data-bind="click: toggleSort('population')" class="sortable">
256 | Population
257 | <i data-bind="css: sortClass('population')"></i>
258 | </th>
259 | </tr>
260 | </thead>
261 | <tbody>
262 | <tr data-bind="visible: showNoData">
263 | <td colspan="3" class="aligncenter">
264 | This table has no data.
265 | </td>
266 | </tr>
267 | <tr data-bind="visible: showLoading">
268 | <td colspan="3" class="aligncenter">
269 | <i data-bind="css: {'icon-spin': showLoading}" class="icon-spinner"></i>
270 | Loading data...
271 | </td>
272 | </tr>
273 | <!-- ko foreach: {data: pagedRows, as: '$row'} -->
274 | <tr>
275 | <td data-bind="text: $row.cityName"></td>
276 | <td data-bind="text: $row.countryName"></td>
277 | <td data-bind="text: $row.population"></td>
278 | </tr>
279 | <!-- /ko -->
280 | </tbody>
281 | </table>
282 | <span data-bind="text: recordsText" class="label label-info pull-right"></span>
283 | <div data-bind="visible: pages() > 1">
284 | <ul class="pagination">
285 | <li data-bind="css: leftPagerClass, click: prevPage">
286 | <a href="#">«</a>
287 | </li>
288 | <!-- ko foreach: {data: (new Array(pages()))} -->
289 | <li data-bind="css: $parent.pageClass($index() + 1)">
290 | <a href="#" data-bind="text: $index() + 1, click: $parent.gotoPage($index() + 1)"></a>
291 | </li>
292 | <!-- /ko -->
293 | <li data-bind="css: rightPagerClass, click: nextPage">
294 | <a href="#">»</a>
295 | </li>
296 | </ul>
297 | </div>
298 | </div>
299 | <script type="text/javascript">
300 | document.addEventListener('DOMContentLoaded', function(){
301 | new CitiesModel();
302 | });
303 | </script>
304 |
305 | | 316 | City 317 | 318 | | 319 |320 | Country 321 | 322 | | 323 |324 | Population 325 | 326 | | 327 |
|---|---|---|
| 332 | This table has no data. 333 | | 334 |||
| 337 | 338 | Loading data... 339 | | 340 |||
| 344 | | 345 | | 346 | |
| 385 | City 386 | | 387 |388 | Country 389 | | 390 |391 | Population 392 | | 393 |
|---|---|---|
| 398 | This table has no data. 399 | | 400 |||
| 403 | 404 | Loading data... 405 | | 406 |||
| 410 | | 411 | | 412 | |
When instanciating with new DataTable you have can pass in the following options as the second parameter:
recordWordcity. Default: recordrecordWordPluralcity as our recordWord, we used cities for recordWordPlural. Default: recordWord + 's'sortDir'asc'sortFieldtable.rows will be maintained and sorting will be disabled.perPage15unsortedClassdescSortClassascSortClassth elements indicating the direction of sorting. Set to '' if you would rather have no icons. Default: '' for eachAdditionally, you can define the match function on the row class, and the datatable will use it for filtering. If left undefined (as in the example above), the DataTable will automatically search all columns defined on the row. E.g:
row.match:465 | (filter) -> 466 | @population().toLowerCase().indexOf(filter) >= 0 or 467 | @countryName .toLowerCase().indexOf(filter) >= 0 or 468 | @cityName .toLowerCase().indexOf(filter) >= 0
Knockout DataTable comes packaged with some advanced filtering. Below is a list of example search terms and the results returned.
473 |cityName:atlantacItYnAmE:aTlAnTacountryName:United cityName:LNote: as of right now, there is no built-in support for multi-word searching with ':'-delimeted searching
countryname:japan 6