datatable-sort.mustache revision cf6c1ae1ed15095f8dc269bb9d7a373a1b87990e
5f216c753dbd2f2b25a011c5f705ee4f8ad924e6Simo Sorce<style scoped>
5f216c753dbd2f2b25a011c5f705ee4f8ad924e6Simo Sorce/* custom styles for this example */
5f216c753dbd2f2b25a011c5f705ee4f8ad924e6Simo Sorce.dt-example {margin:1em;}
5f216c753dbd2f2b25a011c5f705ee4f8ad924e6Simo Sorce/* css to counter global site css */
5f216c753dbd2f2b25a011c5f705ee4f8ad924e6Simo Sorce.dt-example th {text-transform:none;}
5f216c753dbd2f2b25a011c5f705ee4f8ad924e6Simo Sorce.dt-example table {width:auto;}
5f216c753dbd2f2b25a011c5f705ee4f8ad924e6Simo Sorce.dt-example caption {display:table-caption;}
5f216c753dbd2f2b25a011c5f705ee4f8ad924e6Simo Sorce<div class="intro">
5f216c753dbd2f2b25a011c5f705ee4f8ad924e6Simo Sorce <p>The `Y.Plugin.DataTableSort` plugin adds column sorting functionality to a basic DataTable.</p>
5f216c753dbd2f2b25a011c5f705ee4f8ad924e6Simo Sorce<div class="example">
287e76479d68db4134274d4a4fca5fe0fbc9a605Jan Cholasta {{>datatable-sort-source}}
5f216c753dbd2f2b25a011c5f705ee4f8ad924e6Simo Sorce<h2>Implementing Sortable Columns</h2>
5f216c753dbd2f2b25a011c5f705ee4f8ad924e6Simo Sorce<p>To add column sorting functionality to any DataTable, simply call `.plug(Y.Plugin.DataTableSort)`. The `DataTableSort` plugin is available in the`datatable-sort` submodule. To enable sorting, you must define `sortable:true` in each column definition.</p>
5f216c753dbd2f2b25a011c5f705ee4f8ad924e6Simo SorceYUI().use("datatable-sort", function(Y) {
5f216c753dbd2f2b25a011c5f705ee4f8ad924e6Simo Sorce var cols = [
5f216c753dbd2f2b25a011c5f705ee4f8ad924e6Simo Sorce {key:"Company", label:"Click to Sort Column A", sortable:true},
5f216c753dbd2f2b25a011c5f705ee4f8ad924e6Simo Sorce {key:"Phone", label:"Not Sortable Column B"},
5f216c753dbd2f2b25a011c5f705ee4f8ad924e6Simo Sorce {key:"Contact", label:"Click to Sort Column C", sortable:true}
5f216c753dbd2f2b25a011c5f705ee4f8ad924e6Simo Sorce {Company:"Company Bee", Phone:"415-555-1234", Contact:"Sally Spencer"},
5f216c753dbd2f2b25a011c5f705ee4f8ad924e6Simo Sorce {Company:"Acme Company", Phone:"650-555-4444", Contact:"John Jones"},
5f216c753dbd2f2b25a011c5f705ee4f8ad924e6Simo Sorce {Company:"Industrial Industries", Phone:"408-555-5678", Contact:"Robin Smith"}
5f216c753dbd2f2b25a011c5f705ee4f8ad924e6Simo Sorce columnset: cols,
5f216c753dbd2f2b25a011c5f705ee4f8ad924e6Simo Sorce recordset: data,
5f216c753dbd2f2b25a011c5f705ee4f8ad924e6Simo Sorce summary: "Contacts list",
5f216c753dbd2f2b25a011c5f705ee4f8ad924e6Simo Sorce caption: "Table with simple column sorting"
5f216c753dbd2f2b25a011c5f705ee4f8ad924e6Simo Sorce .render("#sort");
a5ccff776edfa776b8846f62a161aaf358e17b66Simo Sorce<h6>Pre-sorted Data</h6>
a5ccff776edfa776b8846f62a161aaf358e17b66Simo Sorce<p>Often data is already sorted when it loads, and we want the data to reverse-sort the first time the user clicks on the column. In that case, define the `lastSortedBy` value in the DataTableSort plugin to indicate the field that is already sorted and whether it is sorted in "asc" or "desc" order.</p>
a5ccff776edfa776b8846f62a161aaf358e17b66Simo SorceYUI().use("datatable-sort", function(Y) {
a5ccff776edfa776b8846f62a161aaf358e17b66Simo Sorce var cols = [
a5ccff776edfa776b8846f62a161aaf358e17b66Simo Sorce {key:"Company", label:"Click to Sort Column A", sortable:true},
a5ccff776edfa776b8846f62a161aaf358e17b66Simo Sorce {key:"Phone", label:"Not Sortable Column B"},
a5ccff776edfa776b8846f62a161aaf358e17b66Simo Sorce {key:"Contact", label:"Click to Sort Column C", sortable:true}
a5ccff776edfa776b8846f62a161aaf358e17b66Simo Sorce presortedData = [
a5ccff776edfa776b8846f62a161aaf358e17b66Simo Sorce {Company:"Acme Company", Phone:"415-555-1234", Contact:"John Jones"},
5f216c753dbd2f2b25a011c5f705ee4f8ad924e6Simo Sorce {Company:"Company Bee", Phone:"650-555-4444", Contact:"Sally Spencer"},
5f216c753dbd2f2b25a011c5f705ee4f8ad924e6Simo Sorce {Company:"Industrial Industries", Phone:"408-555-5678", Contact:"Robin Smith"}
5f216c753dbd2f2b25a011c5f705ee4f8ad924e6Simo Sorce columnset: cols,
5f216c753dbd2f2b25a011c5f705ee4f8ad924e6Simo Sorce recordset: presortedData,
5f216c753dbd2f2b25a011c5f705ee4f8ad924e6Simo Sorce summary: "Contacts list",
5f216c753dbd2f2b25a011c5f705ee4f8ad924e6Simo Sorce caption: "This table loads with presorted data"
a5ccff776edfa776b8846f62a161aaf358e17b66Simo Sorce lastSortedBy: {
a5ccff776edfa776b8846f62a161aaf358e17b66Simo Sorce field: "Company",
5f216c753dbd2f2b25a011c5f705ee4f8ad924e6Simo Sorce .render("#presorted");
5f216c753dbd2f2b25a011c5f705ee4f8ad924e6Simo Sorce<h6>Configurable Trigger</h6>
5f216c753dbd2f2b25a011c5f705ee4f8ad924e6Simo Sorce<p>By default, sorts will be triggered when the user clicks on the TH element of a sortable column, which fires a `theadCellClick` DataTable event. You can set this to be any other DataTable custom event by setting the `trigger` attribute in the DataTableSort plugin constructor. Note: Since the `trigger` attribute is `initOnly`, this value can only be set in the plugin constructor and not after the plugin has been instantiated.</p>
5f216c753dbd2f2b25a011c5f705ee4f8ad924e6Simo Sorce<p>A related change worth making is to remove the link from the TH content, since the user will not be clicking to sort in this implementation. Simply set the `template` attribute to be the unadorned `"{value}"` string.
5f216c753dbd2f2b25a011c5f705ee4f8ad924e6Simo SorceYUI().use("datatable-sort", function(Y) {
5f216c753dbd2f2b25a011c5f705ee4f8ad924e6Simo Sorce var cols = [
5f216c753dbd2f2b25a011c5f705ee4f8ad924e6Simo Sorce {key:"Company", label:"Dblclick to Sort A", sortable:true},
5f216c753dbd2f2b25a011c5f705ee4f8ad924e6Simo Sorce {key:"Phone", label:"Not Sortable Column B"},
5f216c753dbd2f2b25a011c5f705ee4f8ad924e6Simo Sorce {key:"Contact", label:"Dblclick to Sort C", sortable:true}
5f216c753dbd2f2b25a011c5f705ee4f8ad924e6Simo Sorce {Company:"Company Bee", Phone:"415-555-1234", Contact:"Sally Spencer"},
5f216c753dbd2f2b25a011c5f705ee4f8ad924e6Simo Sorce {Company:"Acme Company", Phone:"650-555-4444", Contact:"John Jones"},
5f216c753dbd2f2b25a011c5f705ee4f8ad924e6Simo Sorce {Company:"Industrial Industries", Phone:"408-555-5678", Contact:"Robin Smith"}
5f216c753dbd2f2b25a011c5f705ee4f8ad924e6Simo Sorce columnset: cols,
5f216c753dbd2f2b25a011c5f705ee4f8ad924e6Simo Sorce recordset: data,
5f216c753dbd2f2b25a011c5f705ee4f8ad924e6Simo Sorce summary: "Contacts list",
5f216c753dbd2f2b25a011c5f705ee4f8ad924e6Simo Sorce caption: "This table sorts on doubleclick"
5f216c753dbd2f2b25a011c5f705ee4f8ad924e6Simo Sorce trigger: "theadCellDblclick",
5f216c753dbd2f2b25a011c5f705ee4f8ad924e6Simo Sorce template: "{value}"
5f216c753dbd2f2b25a011c5f705ee4f8ad924e6Simo Sorce .render("#dblclick");