Line 121: | Line 121: | ||
<script>/* Documentation for this tablesorter FORK can be found at | <script>/* Documentation for this tablesorter FORK can be found at | ||
− | + | * http://mottie.github.io/tablesorter/docs/ | |
− | + | */ | |
− | $(function() { | + | $(function () { |
− | + | $('table').tablesorter({ | |
− | + | // *** APPEARANCE *** | |
− | + | // Add a theme - 'blackice', 'blue', 'dark', 'default', 'dropbox', | |
− | + | // 'green', 'grey' or 'ice' stylesheets have all been loaded | |
− | + | // to use 'bootstrap' or 'jui', you'll need to include 'uitheme' | |
− | + | // in the widgets option - To modify the class names, extend from | |
− | + | // themes variable. Look for '$.extend($.tablesorter.themes.jui' | |
− | + | // at the bottom of this window | |
− | + | // this option only adds a table class name 'tablesorter-{theme}' | |
− | + | theme: 'bootstrap', | |
− | + | // fix the column widths | |
− | + | widthFixed: false, | |
− | + | // Show an indeterminate timer icon in the header when the table | |
− | + | // is sorted or filtered | |
− | + | showProcessing: false, | |
− | + | // header layout template (HTML ok); {content} = innerHTML, | |
− | + | // {icon} = <i/> (class from cssIcon) | |
− | + | headerTemplate: '{content}{icon}', | |
− | + | // return the modified template string | |
− | + | onRenderTemplate: null, // function(index, template){ return template; }, | |
− | + | // called after each header cell is rendered, use index to target the column | |
− | + | // customize header HTML | |
− | + | onRenderHeader: function (index) { | |
− | + | // the span wrapper is added by default | |
− | + | $(this).find('div.tablesorter-header-inner').addClass('roundedCorners'); | |
− | + | }, | |
− | + | ||
− | + | ||
− | + | // *** FUNCTIONALITY *** | |
− | + | // prevent text selection in header | |
− | + | cancelSelection: true, | |
− | + | // add tabindex to header for keyboard accessibility | |
− | + | tabIndex: true, | |
− | + | // other options: 'ddmmyyyy' & 'yyyymmdd' | |
− | + | dateFormat: 'mmddyyyy', | |
− | + | // The key used to select more than one column for multi-column | |
− | + | // sorting. | |
− | + | sortMultiSortKey: 'shiftKey', | |
− | + | // key used to remove sorting on a column | |
− | + | sortResetKey: 'ctrlKey', | |
− | + | // false for German '1.234.567,89' or French '1 234 567,89' | |
− | + | usNumberFormat: true, | |
− | + | // If true, parsing of all table cell data will be delayed | |
− | + | // until the user initializes a sort | |
− | + | delayInit: false, | |
− | + | // if true, server-side sorting should be performed because | |
− | + | // client-side sorting will be disabled, but the ui and events | |
− | + | // will still be used. | |
− | + | serverSideSorting: false, | |
− | + | // default setting to trigger a resort after an 'update', | |
− | + | // 'addRows', 'updateCell', etc has completed | |
− | + | resort: true, | |
− | + | // *** SORT OPTIONS *** | |
− | + | // These are detected by default, | |
− | + | // but you can change or disable them | |
− | + | // these can also be set using data-attributes or class names | |
− | + | headers: { | |
− | + | // set 'sorter : false' (no quotes) to disable the column | |
− | + | 0: { sorter: 'text' }, | |
− | + | 1: { sorter: 'digit' }, | |
− | + | 2: { sorter: 'text' }, | |
− | + | 3: { sorter: 'url' } | |
− | + | }, | |
− | + | ||
− | + | ||
− | + | // ignore case while sorting | |
− | + | ignoreCase: true, | |
− | + | // forces the user to have this/these column(s) sorted first | |
− | + | sortForce: null, | |
− | + | // initial sort order of the columns, example sortList: [[0,0],[1,0]], | |
− | + | // [[columnIndex, sortDirection], ... ] | |
− | + | sortList: [ [0,0],[1,0],[2,0] ], | |
− | + | // default sort that is added to the end of the users sort | |
− | + | // selection. | |
− | + | sortAppend: null, | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | // when sorting two rows with exactly the same content, | |
− | + | // the original sort order is maintained | |
− | + | sortStable: false, | |
− | + | // starting sort direction 'asc' or 'desc' | |
− | + | sortInitialOrder: 'asc', | |
− | + | // Replace equivalent character (accented characters) to allow | |
− | + | // for alphanumeric sorting | |
− | + | sortLocaleCompare: false, | |
− | + | // third click on the header will reset column to default - unsorted | |
− | + | sortReset: false, | |
− | + | // restart sort to 'sortInitialOrder' when clicking on previously | |
− | + | // unsorted columns | |
− | + | sortRestart: false, | |
− | + | // sort empty cell to bottom, top, none, zero, emptyMax, emptyMin | |
− | + | emptyTo: 'bottom', | |
− | + | // sort strings in numerical column as max, min, top, bottom, zero | |
− | + | stringTo: 'max', | |
− | + | // extract text from the table | |
− | + | textExtraction: { | |
− | + | 0: function (node, table) { | |
+ | // this is how it is done by default | ||
+ | return $(node).attr(table.config.textAttribute) || | ||
+ | node.textContent || | ||
+ | node.innerText || | ||
+ | $(node).text() || | ||
+ | ''; | ||
+ | }, | ||
+ | 1: function (node) { | ||
+ | return $(node).text(); | ||
+ | } | ||
+ | }, | ||
− | + | // data-attribute that contains alternate cell text | |
− | + | // (used in default textExtraction function) | |
− | + | textAttribute: 'data-text', | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | // use custom text sorter | |
− | + | // function(a,b){ return a.sort(b); } // basic sort | |
− | + | textSorter: null, | |
− | + | // choose overall numeric sorter | |
− | + | // function(a, b, direction, maxColumnValue) | |
− | + | numberSorter: null, | |
− | + | // *** WIDGETS *** | |
− | + | // apply widgets on tablesorter initialization | |
− | + | initWidgets: true, | |
− | + | // table class name template to match to include a widget | |
− | + | widgetClass: 'widget-{name}', | |
− | + | ||
− | + | // include zebra and any other widgets, options: | |
− | + | // 'columns', 'filter', 'stickyHeaders' & 'resizable' | |
+ | // 'uitheme' is another widget, but requires loading | ||
+ | // a different skin and a jQuery UI theme. | ||
+ | widgets: ['zebra', 'columns', 'uitheme'], | ||
− | + | widgetOptions: { | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | // zebra widget: adding zebra striping, using content and | |
+ | // default styles - the ui css removes the background | ||
+ | // from default even and odd class names included for this | ||
+ | // demo to allow switching themes | ||
+ | // [ 'even', 'odd' ] | ||
+ | zebra: [ | ||
+ | 'ui-widget-content even', | ||
+ | 'ui-state-default odd' | ||
+ | ], | ||
− | + | // columns widget: change the default column class names | |
− | + | // primary is the 1st column sorted, secondary is the 2nd, etc | |
− | + | columns: [ | |
− | + | 'primary', | |
− | + | 'secondary', | |
− | + | 'tertiary' | |
− | + | ], | |
− | + | ||
− | + | // columns widget: If true, the class names from the columns | |
− | + | // option will also be added to the table tfoot. | |
− | + | columns_tfoot: true, | |
− | + | // columns widget: If true, the class names from the columns | |
− | + | // option will also be added to the table thead. | |
− | + | columns_thead: true, | |
− | + | // filter widget: If there are child rows in the table (rows with | |
− | + | // class name from 'cssChildRow' option) and this option is true | |
− | + | // and a match is found anywhere in the child row, then it will make | |
+ | // that row visible; default is false | ||
+ | filter_childRows: false, | ||
− | + | // filter widget: If true, a filter will be added to the top of | |
− | + | // each table column. | |
− | + | filter_columnFilters: true, | |
− | + | ||
− | + | ||
− | + | // filter widget: css class name added to the filter cell | |
− | + | // (string or array) | |
− | + | filter_cellFilter: '', | |
− | + | // filter widget: css class name added to the filter row & each | |
− | + | // input in the row (tablesorter-filter is ALWAYS added) | |
+ | filter_cssFilter: '', | ||
− | + | // filter widget: add a default column filter type | |
− | + | // '~{query}' to make fuzzy searches default; | |
− | + | // '{q1} AND {q2}' to make all searches use a logical AND. | |
+ | filter_defaultFilter: {}, | ||
− | + | // filter widget: filters to exclude, per column | |
− | + | filter_excludeFilter: {}, | |
− | + | // filter widget: jQuery selector string (or jQuery object) | |
− | + | // of external filters | |
− | + | filter_external: '', | |
− | + | // filter widget: class added to filtered rows; | |
− | + | // needed by pager plugin | |
− | + | filter_filteredRow: 'filtered', | |
− | + | // filter widget: add custom filter elements to the filter row | |
− | + | filter_formatter: null, | |
− | + | ||
− | + | // filter widget: Customize the filter widget by adding a select | |
− | + | // dropdown with content, custom options or custom filter functions | |
+ | // see http://goo.gl/HQQLW for more details | ||
+ | filter_functions: null, | ||
− | + | // filter widget: hide filter row when table is empty | |
− | + | filter_hideEmpty: true, | |
− | + | ||
− | + | // filter widget: Set this option to true to hide the filter row | |
− | + | // initially. The rows is revealed by hovering over the filter | |
+ | // row or giving any filter input/select focus. | ||
+ | filter_hideFilters: false, | ||
− | + | // filter widget: Set this option to false to keep the searches | |
− | + | // case sensitive | |
+ | filter_ignoreCase: true, | ||
− | + | // filter widget: if true, search column content while the user | |
− | + | // types (with a delay) | |
− | + | filter_liveSearch: true, | |
− | + | ||
− | + | // filter widget: a header with a select dropdown & this class name | |
− | + | // will only show available (visible) options within the drop down | |
+ | filter_onlyAvail: 'filter-onlyAvail', | ||
− | + | // filter widget: default placeholder text | |
− | + | // (overridden by any header 'data-placeholder' setting) | |
− | + | filter_placeholder: { search : '', select : '' }, | |
− | + | ||
− | + | // filter widget: jQuery selector string of an element used to | |
− | + | // reset the filters. | |
+ | filter_reset: null, | ||
− | + | // filter widget: Use the $.tablesorter.storage utility to save | |
− | + | // the most recent filters | |
− | + | filter_saveFilters: false, | |
− | + | ||
− | + | // filter widget: Delay in milliseconds before the filter widget | |
− | + | // starts searching; This option prevents searching for every character | |
− | + | // while typing and should make searching large tables faster. | |
− | + | filter_searchDelay: 300, | |
− | + | ||
− | + | ||
− | + | // filter widget: allow searching through already filtered rows in | |
− | + | // special circumstances; will speed up searching in large tables if true | |
− | + | filter_searchFiltered: true, | |
− | + | // filter widget: include a function to return an array of values to be | |
− | + | // added to the column filter select | |
− | + | filter_selectSource: null, | |
− | + | ||
− | + | ||
− | + | ||
− | + | // filter widget: Set this option to true if filtering is performed on | |
− | + | // the server-side. | |
+ | filter_serversideFiltering: false, | ||
− | + | // filter widget: Set this option to true to use the filter to find | |
− | + | // text from the start of the column. So typing in 'a' will find | |
− | + | // 'albert' but not 'frank', both have a's; default is false | |
+ | filter_startsWith: false, | ||
− | + | // filter widget: If true, ALL filter searches will only use parsed | |
− | + | // data. To only use parsed data in specific columns, set this option | |
+ | // to false and add class name 'filter-parsed' to the header | ||
+ | filter_useParsedData: false, | ||
− | + | // filter widget: data attribute in the header cell that contains | |
− | + | // the default filter value | |
− | + | filter_defaultAttrib: 'data-value', | |
− | + | ||
− | + | // filter widget: filter_selectSource array text left of the separator | |
− | + | // is added to the option value, right into the option text | |
− | + | filter_selectSourceSeparator: '|', | |
− | + | // Resizable widget: If this option is set to false, resized column | |
− | + | // widths will not be saved. Previous saved values will be restored | |
− | + | // on page reload | |
+ | resizable: true, | ||
− | + | // Resizable widget: If this option is set to true, a resizing anchor | |
− | + | // will be included in the last column of the table | |
− | + | resizable_addLastColumn: false, | |
− | + | // Resizable widget: Set this option to the starting & reset header widths | |
− | + | resizable_widths: [], | |
− | + | ||
− | + | // Resizable widget: Set this option to throttle the resizable events | |
− | + | // set to true (5ms) or any number 0-10 range | |
− | + | resizable_throttle: false, | |
− | + | ||
− | + | // saveSort widget: If this option is set to false, new sorts will | |
− | + | // not be saved. Any previous saved sort will be restored on page | |
− | + | // reload. | |
− | + | saveSort: true, | |
− | + | // stickyHeaders widget: extra class name added to the sticky header row | |
− | + | stickyHeaders: '', | |
− | + | ||
− | + | ||
− | + | // jQuery selector or object to attach sticky header to | |
− | + | stickyHeaders_attachTo: null, | |
− | + | ||
− | + | // jQuery selector or object to monitor horizontal scroll position | |
− | + | // (defaults: xScroll > attachTo > window) | |
+ | stickyHeaders_xScroll: null, | ||
− | + | // jQuery selector or object to monitor vertical scroll position | |
− | + | // (defaults: yScroll > attachTo > window) | |
− | + | stickyHeaders_yScroll: null, | |
− | + | // number or jquery selector targeting the position:fixed element | |
− | + | stickyHeaders_offset: 0, | |
− | + | ||
− | + | // scroll table top into view after filtering | |
− | + | stickyHeaders_filteredToTop: true, | |
− | + | ||
− | + | ||
− | + | // added to table ID, if it exists | |
− | + | stickyHeaders_cloneId: '-sticky', | |
− | + | ||
− | + | ||
− | + | // trigger 'resize' event on headers | |
− | + | stickyHeaders_addResizeEvent: true, | |
− | + | // if false and a caption exist, it won't be included in the | |
− | + | // sticky header | |
− | + | stickyHeaders_includeCaption: true, | |
− | + | // The zIndex of the stickyHeaders, allows the user to adjust this | |
− | + | // to their needs | |
− | + | stickyHeaders_zIndex : 2 | |
− | + | }, | |
− | + | ||
− | + | // *** CALLBACKS *** | |
− | + | // function called after tablesorter has completed initialization | |
+ | initialized: null, // function (table) {} | ||
− | + | // *** extra css class names | |
− | + | tableClass: '', | |
+ | cssAsc: '', | ||
+ | cssDesc: '', | ||
+ | cssNone: '', | ||
+ | cssHeader: '', | ||
+ | cssHeaderRow: '', | ||
+ | // processing icon applied to header during sort/filter | ||
+ | cssProcessing: '', | ||
− | + | // class name indiciating that a row is to be attached to the its parent | |
− | + | cssChildRow: 'tablesorter-childRow', | |
+ | // if this class does not exist, the {icon} will not be added from | ||
+ | // the headerTemplate | ||
+ | cssIcon: 'tablesorter-icon', | ||
+ | // class name added to the icon when there is no column sort | ||
+ | cssIconNone: '', | ||
+ | // class name added to the icon when the column has an ascending sort | ||
+ | cssIconAsc: '', | ||
+ | // class name added to the icon when the column has a descending sort | ||
+ | cssIconDesc: '', | ||
+ | // don't sort tbody with this class name | ||
+ | // (only one class name allowed here!) | ||
+ | cssInfoBlock: 'tablesorter-infoOnly', | ||
+ | // class name added to table header which allows clicks to bubble up | ||
+ | cssAllowClicks: 'tablesorter-allowClicks', | ||
+ | // header row to ignore; cells within this row will not be added | ||
+ | // to table.config.$headers | ||
+ | cssIgnoreRow: 'tablesorter-ignoreRow', | ||
− | + | // *** SELECTORS *** | |
− | + | // jQuery selectors used to find the header cells. | |
− | + | selectorHeaders: '> thead th, > thead td', | |
− | + | // jQuery selector of content within selectorHeaders | |
− | + | // that is clickable to trigger a sort. | |
− | + | selectorSort: 'th, td', | |
− | + | // rows with this class name will be removed automatically | |
− | + | // before updating the table cache - used by 'update', | |
− | + | // 'addRows' and 'appendCache' | |
− | + | selectorRemove: '.remove-me', | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | // *** DEBUGING *** | |
− | + | // send messages to console | |
− | + | debug: false | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | }).tablesorterPager({ | |
− | + | // target the pager markup - see the HTML block below | |
− | + | container: $('.ts-pager'), | |
− | + | ||
− | + | // use this url format 'http:/mydatabase.com?page={page}&size={size}' | |
− | + | ajaxUrl: null, | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | // modify the url after all processing has been applied | |
− | + | customAjaxUrl: function (table, url) { | |
− | + | return url; | |
− | + | }, | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | // modify the $.ajax object to allow complete control over your | |
− | + | // ajax requests | |
− | + | ajaxObject: { | |
− | + | dataType: 'json' | |
− | + | }, | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | // set this to false if you want to block ajax loading on init | |
− | + | processAjaxOnInit: true, | |
− | + | ||
− | + | ||
− | + | // process ajax so that the data object is returned along with the | |
− | + | // total number of rows; example: | |
− | + | // { | |
+ | // 'data' : [{ 'ID': 1, 'Name': 'Foo', 'Last': 'Bar' }], | ||
+ | // 'total_rows' : 100 | ||
+ | // } | ||
+ | ajaxProcessing: function (ajax) { | ||
+ | if (ajax && ajax.hasOwnProperty('data')) { | ||
+ | // return [ 'data', 'total_rows' ]; | ||
+ | return [ajax.data, ajax.total_rows]; | ||
+ | } | ||
+ | }, | ||
− | + | // output string - default is '{page}/{totalPages}'; | |
− | + | // possible variables: | |
− | + | // {page}, {totalPages}, {startRow}, {endRow} and {totalRows} | |
+ | output: '{startRow} to {endRow} ({totalRows})', | ||
− | + | // apply disabled classname to the pager arrows when the rows at | |
− | + | // either extreme is visible - default is true | |
− | + | updateArrows: true, | |
− | + | ||
− | + | // starting page of the pager (zero based index) | |
− | + | page: 0, | |
− | + | ||
+ | // reset pager after filtering; set to desired page # | ||
+ | // set to false to not change page at filter start | ||
+ | pageReset: 0, | ||
+ | |||
+ | // Number of visible rows - default is 10 | ||
+ | size: 10, | ||
+ | |||
+ | // Number of options to include in the pager number selector | ||
+ | maxOptionSize: 20, | ||
+ | |||
+ | // Save pager page & size if the storage script is loaded | ||
+ | // (requires $.tablesorter.storage in jquery.tablesorter.widgets.js) | ||
+ | savePages: true, | ||
+ | |||
+ | // defines custom storage key | ||
+ | storageKey: 'tablesorter-pager', | ||
+ | |||
+ | // if true, the table will remain the same height no matter how many | ||
+ | // records are displayed. The space is made up by an empty | ||
+ | // table row set to a height to compensate; default is false | ||
+ | fixedHeight: true, | ||
+ | |||
+ | // count child rows towards the set page size? | ||
+ | // (set true if it is a visible table row within the pager) | ||
+ | // if true, child row(s) may not appear to be attached to its | ||
+ | // parent row, may be split across pages or | ||
+ | // may distort the table if rowspan or cellspans are included. | ||
+ | countChildRows: false, | ||
+ | |||
+ | // remove rows from the table to speed up the sort of large tables. | ||
+ | // setting this to false, only hides the non-visible rows; needed | ||
+ | // if you plan to add/remove rows with the pager enabled. | ||
+ | removeRows: false, | ||
+ | |||
+ | // css class names of pager arrows | ||
+ | // next page arrow | ||
+ | cssNext: '.next', | ||
+ | // previous page arrow | ||
+ | cssPrev: '.prev', | ||
+ | // go to first page arrow | ||
+ | cssFirst: '.first', | ||
+ | // go to last page arrow | ||
+ | cssLast: '.last', | ||
+ | // select dropdown to allow choosing a page | ||
+ | cssGoto: '.pagenum', | ||
+ | // location of where the 'output' is displayed | ||
+ | cssPageDisplay: '.pagedisplay', | ||
+ | // dropdown that sets the 'size' option | ||
+ | cssPageSize: '.pagesize', | ||
+ | // error information row | ||
+ | cssErrorRow: 'tablesorter-errorRow', | ||
+ | // class added to arrows when at the extremes | ||
+ | // (i.e. prev/first arrows are 'disabled' when on the first page) | ||
+ | // Note there is no period '.' in front of this class name | ||
+ | cssDisabled: 'disabled' | ||
+ | |||
+ | }); | ||
− | |||
}); | }); | ||
// Extend the themes to change any of the default class names | // Extend the themes to change any of the default class names | ||
− | // this example modifies the | + | // this example modifies the Bootstrap theme class names |
− | $.extend($.tablesorter.themes. | + | $.extend($.tablesorter.themes.bootstrap, { |
− | + | // table classes | |
− | + | table: 'table table-bordered table-striped', | |
− | + | caption: 'caption', | |
− | + | // *** header class names *** | |
− | + | // header classes | |
− | + | header: 'bootstrap-header', | |
− | + | sortNone: '', | |
− | + | sortAsc: '', | |
− | + | sortDesc: '', | |
− | + | // applied when column is sorted | |
− | + | active: '', | |
− | + | // hover class | |
− | + | hover: '', | |
− | + | // *** icon class names *** | |
− | + | // icon class added to the <i> in the header | |
− | + | icons: '', | |
− | + | // class name added to icon when column is not sorted | |
− | + | iconSortNone: 'bootstrap-icon-unsorted', | |
− | + | // class name added to icon when column has ascending sort | |
− | + | iconSortAsc: 'icon-chevron-up glyphicon glyphicon-chevron-up', | |
− | + | // class name added to icon when column has descending sort | |
− | + | iconSortDesc: 'icon-chevron-down glyphicon glyphicon-chevron-down', | |
− | + | filterRow: '', | |
− | + | footerRow: '', | |
− | + | footerCells: '', | |
− | + | // even row zebra striping | |
− | + | even: '', | |
− | + | // odd row zebra striping | |
− | + | odd: '' | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
}); | }); | ||
</script> | </script> |
Revision as of 16:05, 15 October 2016
Parts
All Parts
<groupparts class="parts">iGEM2016 TU_Delft</groupparts>
Basic Parts
Composite Parts
Part Collection
Last Name | First Name | Due | Web Site | |
---|---|---|---|---|
Smith | John | jsmith@gmail.com | $50.00 | http://www.jsmith.com |
Bach | Frank | fbach@yahoo.com | $50.00 | http://www.frank.com |
Doe | Jason | jdoe@hotmail.com | $100.00 | http://www.jdoe.com |
Conway | Tim | tconway@earthlink.net | $50.00 | http://www.timconway.com |