S'pose we wanted to display a table of cities. Just create a view model for the data:
+S'pose we wanted to display a table of cities. Just create a view model for the data:
class City
-
constructor: (@view, row) ->
@population = ko.observable row.population
@countryName = row.country_name
@cityName = row.city_name
-
class @CitiesModel
-
constructor: ->
-
tableOptions =
recordWord: 'city'
recordWordPlural: 'cities'
sortDir: 'desc'
sortField: 'population'
perPage: 15
+ paginationLimit: 8
unsortedClass: 'glyphicon glyphicon-sort'
ascSortClass: 'glyphicon glyphicon-sort-by-attributes'
descSortClass: 'glyphicon glyphicon-sort-by-attributes-alt'
-
@table = new DataTable [], tableOptions
@table.loading true
-
req = new XMLHttpRequest()
req.open 'GET', '/api/cities', true
-
req.onload = =>
if req.status >= 200 and req.status < 400
response = JSON.parse req.responseText
@@ -223,22 +224,19 @@ Simple example
else
alert "Error communicating with server"
@table.loading false
-
req.onerror = =>
alert "Error communicating with server"
@table.loading false
-
req.send()
-
ko.applyBindings @
- And a table, like so:
+And a table, like so:
<div data-bind="with: table">
<div class="pull-right">
<strong>Results per page</strong>
- <select data-bind="options: [10,25,50], value: perPage"></select>
+ <select data-bind="options: [10,25,50,5,1], value: perPage"></select>
</div>
<input type="text" data-bind="textInput: filter" placeholder="Search"/>
<table class="table table-striped table-bordered">
@@ -277,17 +275,24 @@ Simple example
<td data-bind="text: $row.population"></td>
</tr>
<!-- /ko -->
+ <!-- ko foreach: {data: currentPage().blanks} -->
+ <tr>
+ <td>-</td>
+ <td>-</td>
+ <td>-</td>
+ </tr>
+ <!-- /ko -->
</tbody>
</table>
<span data-bind="text: recordsText" class="label label-info pull-right"></span>
- <div data-bind="visible: pages() > 1">
+ <div data-bind="visible: limitedPages().length > 1">
<ul class="pagination">
<li data-bind="css: leftPagerClass, click: prevPage">
<a href="#">«</a>
</li>
- <!-- ko foreach: {data: (new Array(pages()))} -->
- <li data-bind="css: $parent.pageClass($index() + 1)">
- <a href="#" data-bind="text: $index() + 1, click: $parent.gotoPage($index() + 1)"></a>
+ <!-- ko foreach: {data: limitedPages} -->
+ <li data-bind="css: $parent.pageClass(number)">
+ <a href="#" data-bind="text: number, click: $parent.gotoPage(number)"></a>
</li>
<!-- /ko -->
<li data-bind="css: rightPagerClass, click: nextPage">
@@ -302,186 +307,205 @@ Simple example
});
</script>
- | - City - - | -- Country - - | -- Population - - | -
|---|---|---|
| - This table has no data. - | -||
| - - Loading data... - | -||
| - | - | - |
| - City - | -- Country - | -- Population - | -
|---|---|---|
| - This table has no data. - | -||
| - - Loading data... - | -||
| - | - | - |
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:+Result:
+++ + + ++ Results per page + ++ ++ +
+ + ++ + + ++ City + + ++ Country + + ++ Population + + ++ ++ This table has no data. + ++ + ++ + Loading data... + ++ + + ++ + + + + + +- +- +- +Example without sorting
+++ + + ++ Results per page + ++ ++ +
+ + ++ + + ++ City + ++ Country + ++ Population + ++ ++ This table has no data. + ++ + ++ + Loading data... + ++ + + ++ + + + + + +- +- +- +Options
+When instantiating with
+new DataTableyou 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.perPage15paginationLimittable.limitedPages observable array. Default: 10unsortedClassdescSortClassascSortClassth 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:(filter) -> @population().toLowerCase().indexOf(filter) >= 0 or @countryName .toLowerCase().indexOf(filter) >= 0 or - @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.
-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 6Knockout DataTable comes packaged with some advanced filtering. Below is a list of example search terms and the results returned.
+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