1
0
Fork 0
mirror of https://github.com/koalyptus/TableFilter.git synced 2024-06-08 00:42:28 +02:00

Updated code to use code block.

James 2021-09-18 13:52:55 +12:00
parent f1a11d0e21
commit 9831a982b0

@ -1,93 +1,94 @@
In this section you will find all the configuration options (`var tfConfig = { property: 'value' }`).
In this section you will find all the configuration options (`const tfConfig = { property: 'value' }`).
Here is a more extensive example showing many of the features and options including texts in German:
`const tf = new TableFilter(my_table, {`
    `base_path: 'tablefilter/',`
```javascript
const tf = new TableFilter(my_table, {
base_path: 'tablefilter/', // Needed to resolve additional resources (css, etc.) at runtime
    `auto_filter: { delay: 500 }, // Delay for automatic filtering (milliseconds)`
auto_filter: { delay: 500 }, // Delay for automatic filtering (milliseconds)
    `state: { // Enable state persistence `
        `types: ['local_storage'], // Possible values: 'local_storage' 'hash' or 'cookie'`
        `filters: true,`
        `filters: true, // Persist filters values, enabled by default`
        `columns_visibility: true, // Persist columns visibility`
        `filters_visibility: true, // Persist filters row visibility`
    `},`
state: { // Enable state persistence
types: ['local_storage'], // Possible values: 'local_storage' 'hash' or 'cookie'
filters: true, // Persist filters values, enabled by default
columns_visibility: true, // Persist columns visibility
filters_visibility: true, // Persist filters row visibility
},
    `sticky_headers: true, // Sticky headers with overrides`
    `alternate_rows: true, // Enable alternating rows`
    `mark_active_columns: { // Mark active columns`
        `highlight_column: false, // .. but only the column header`
    `},`
sticky_headers: true, // Sticky headers with overrides
alternate_rows: true, // Enable alternating rows
mark_active_columns: { // Mark active columns
highlight_column: false, // .. but only the column header
},
    `grid_layout: false, // Grit layout (but no simple copy&paste to Excel anymore)`
grid_layout: false, // Grit layout (but no simple copy&paste to Excel anymore)
    `filters_row_index: 0, // Row index to show the filter bar (default 0).`
         `// Show filter bar above header allows easy copy&paste of the table content.`
filters_row_index: 0, // Row index to show the filter bar (default 0).
// Show filter bar above header allows easy copy&paste of the table content.
    `toolbar: true, // Enable toolbar component`
    `rows_counter: { text: tab.caption + ': ' }, // Enable rows counter UI component`
    `status_bar: { // Enable status bar UI component`
        `msg_filter: 'Filter aktiv...', // Message during filtering`
        `toolbar_position: 'center',`
    `},`
    `btn_reset: { // Enable clear button`
        `tooltip: 'Filter löschen',`
        `toolbar_position: 'right',`
    `},`
toolbar: true, // Enable toolbar component
rows_counter: { text: tab.caption + ': ' }, // Enable rows counter UI component
status_bar: { // Enable status bar UI component
msg_filter: 'Filter aktiv...', // Message during filtering
toolbar_position: 'center',
},
btn_reset: { // Enable clear button
tooltip: 'Filter löschen',
toolbar_position: 'right',
},
    `locale: 'de', // Define default locale, default to 'en'`
    `thousands_separator: '.', // Define thousands separator ',' or '.', defaults to ','`
    `decimal_separator: ',', // Define decimal separator ',' or '.', defaults to '.'`
    `empty_operator: '[empty]',`
    `nonempty_operator: '[nonempty]',`
    `help_instructions: { // Instructions text (accepts HTML)`
        `text :`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`'Filter-Operatoren:<br /> ' +`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`'<b>&lt;</b>, <b>&lt;=</b>, <b>=</b>, <b>&gt;=</b>, <b>&gt;</b>, <br />' +`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`'<b>*</b>, <b>!</b> (nicht), <b>{</b> (beginnt mit), <b>}</b> (endet mit), <br />' +`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`'<b>||</b> (oder),<b> &amp;&amp;</b> (und),<br />' +`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`'<b>[empty]</b>, <b>[nonempty]</b>, <b>rgx:</b><br />' +`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`'<a href="' +`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`'https://github.com/koalyptus/TableFilter/wiki/4.-Filter-operators' +`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`'" target="_blank">' +`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`'Weitere Informationen</a><hr/>'`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`,`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`btn_text : '?', // btn_text oder btn_html`
&nbsp;&nbsp;&nbsp;&nbsp;`},`
locale: 'de', // Define default locale, default to 'en'
thousands_separator: '.', // Define thousands separator ',' or '.', defaults to ','
decimal_separator: ',', // Define decimal separator ',' or '.', defaults to '.'
empty_operator: '[empty]',
nonempty_operator: '[nonempty]',
help_instructions: { // Instructions text (accepts HTML)
text :
'Filter-Operatoren:<br /> ' +
'<b>&lt;</b>, <b>&lt;=</b>, <b>=</b>, <b>&gt;=</b>, <b>&gt;</b>, <br />' +
'<b>*</b>, <b>!</b> (nicht), <b>{</b> (beginnt mit), <b>}</b> (endet mit), <br />' +
'<b>||</b> (oder),<b> &amp;&amp;</b> (und),<br />' +
'<b>[empty]</b>, <b>[nonempty]</b>, <b>rgx:</b><br />' +
'<a href="' +
'https://github.com/koalyptus/TableFilter/wiki/4.-Filter-operators' +
'" target="_blank">' +
'Weitere Informationen</a><hr/>'
,
btn_text : '?', // btn_text oder btn_html
},
&nbsp;&nbsp;&nbsp;&nbsp;`no_results_message: { // "No results" message`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`content: 'Keine zum Filter passende Einträge vorhanden',`
&nbsp;&nbsp;&nbsp;&nbsp;`},`
no_results_message: { // "No results" message
content: 'Keine zum Filter passende Einträge vorhanden',
},
&nbsp;&nbsp;&nbsp;&nbsp;`loader: false, // Loading indicator, { html : '...' }`
loader: false, // Loading indicator, { html : '...' }
&nbsp;&nbsp;&nbsp;&nbsp;`watermark: [ 'Filter...', ], // Repeated watermark text for input fields or watermark for each filter if an array is supplied`
watermark: [ 'Filter...', ], // Repeated watermark text for input fields or watermark for each filter if an array is supplied
&nbsp;&nbsp;&nbsp;&nbsp;`extensions:[ // Extensions load addititional script files`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`{ `
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`name: 'colsVisibility',`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`description: 'Sichbarkeit der Spalten verwalten', // Module description`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`enable_hover: true, // Enable hover behaviour on columns manager button/link`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`btn_text: 'Spalten verstecken&#9660;', // Button's text, defaults to Columns&#9660;`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`//at_start: [3, 4], // List of columns indexes to be hidden at initialization`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`tickToHide: true, // Enable tick to hide a column, defaults to true`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`text: 'Versteckte Spalten: ', // Text preceding the columns list, defaults to 'Hide' or 'Show'`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`btn_close_text: 'Schließen', // Columns manager UI close link text, defaults to 'Close'`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`enable_tick_all: false, // Enable select all option, disabled by default`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`tick_all_text: 'Alle auswählen:', // Text for select all option, defaults to 'Select all:'`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`toolbar_position: 'right', // Default position in toolbar ('left'|'center'|'right')`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`},`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`{`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`name: 'filtersVisibility',`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`description: 'Sichtbarkeit der Filter', // Module description`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`visible_at_start: true, // Make filters visible at initialization, defaults to true`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`enable_icon: true, // Enable expand/collapse icon, defaults to true`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`btn_text: 'Filter', // Custom text for button`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`toolbar_position: 'right', // Default position in toolbar ('left'|'center'|'right')`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`},`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`//{ name: 'sort' } // Sort requires to classify numeric columns using "col_types : [ 'numeric', String', ...],"`
&nbsp;&nbsp;&nbsp;&nbsp;`],`
`});`
`tf.init();`
extensions:[ // Extensions load addititional script files
{
name: 'colsVisibility',
description: 'Sichbarkeit der Spalten verwalten', // Module description
enable_hover: true, // Enable hover behaviour on columns manager button/link
btn_text: 'Spalten verstecken&#9660;', // Button's text, defaults to Columns&#9660;
//at_start: [3, 4], // List of columns indexes to be hidden at initialization
tickToHide: true, // Enable tick to hide a column, defaults to true
text: 'Versteckte Spalten: ', // Text preceding the columns list, defaults to 'Hide' or 'Show'
btn_close_text: 'Schließen', // Columns manager UI close link text, defaults to 'Close'
enable_tick_all: false, // Enable select all option, disabled by default
tick_all_text: 'Alle auswählen:', // Text for select all option, defaults to 'Select all:'
toolbar_position: 'right', // Default position in toolbar ('left'|'center'|'right')
},
{
name: 'filtersVisibility',
description: 'Sichtbarkeit der Filter', // Module description
visible_at_start: true, // Make filters visible at initialization, defaults to true
enable_icon: true, // Enable expand/collapse icon, defaults to true
btn_text: 'Filter', // Custom text for button
toolbar_position: 'right', // Default position in toolbar ('left'|'center'|'right')
},
//{ name: 'sort' } // Sort requires to classify numeric columns using "col_types : [ 'numeric', String', ...],"
],
});
tf.init();
```