dev: Add more individual information to internal examples

Jira Issue DD-2071
pull/527/head
SandyDatatables 3 years ago
parent 1c0f914800
commit b733446ed9

@ -77,7 +77,7 @@ $(document).ready(function() {
<li><code>fuzzySearch.toggleSmart</code> allows the searching to be changed from exact matching to fuzzy searching.</li> <li><code>fuzzySearch.toggleSmart</code> allows the searching to be changed from exact matching to fuzzy searching.</li>
<li><code>fuzzySearch.rankColumn</code> allows the % match to be set in a column within the datatable. Some examples of use cases could be to display the value <li><code>fuzzySearch.rankColumn</code> allows the % match to be set in a column within the datatable. Some examples of use cases could be to display the value
to the user, or to hide the column and order based on it - as a search engine would.</li> to the user, or to hide the column and order based on it - as a search engine would.</li>
<li><code>fuzzySearch.threshold</code> allows the value of similarity that is required from the damerau-levenshtein function to display the row to be <li><code>fuzzySearch.threshold</code> allows the value of similarity that is required from the Damerau-Levenshtein function to display the row to be
changed.</li> changed.</li>
<li><code>fuzzySearch.returnSearch</code> allows the option for searching to only occur when the enter key is pressed.</li> <li><code>fuzzySearch.returnSearch</code> allows the option for searching to only occur when the enter key is pressed.</li>
</ul> </ul>

@ -72,17 +72,22 @@ $(document).ready(function() {
<p>Fuzzy searching is used in search engines and databases to perform searches that will match results that are not necessarily exactly the same as the search <p>Fuzzy searching is used in search engines and databases to perform searches that will match results that are not necessarily exactly the same as the search
term. This allows spelling mistakes and typos to be accounted for. It also allows small changes in dialect not to affect search results. A commonly used example is term. This allows spelling mistakes and typos to be accounted for. It also allows small changes in dialect not to affect search results. A commonly used example is
for surname searching. "Smith" and "Smythe" are pronounced the same way, but using conventional searching typing "Smith" would not return "Smythe".</p> for surname searching. "Smith" and "Smythe" are pronounced the same way, but using conventional searching typing "Smith" would not return "Smythe".</p>
<p>This plug-in adds fuzzy search functionality to datatables. It does this through a combination of exact matching and the <a href= <p>This plug-in adds fuzzy search functionality to Datatables. It does this through a combination of exact matching and the <a href=
"https://github.com/tad-lispy/node-damerau-levenshtein">damerau-levenshtein algorithm</a>. There are four initialisation options that are associated with this "https://github.com/tad-lispy/node-damerau-levenshtein">Damerau-Levenshtein algorithm</a>. There are four initialisation options that are associated with this
plugin.</p> plugin.</p>
<ul class="markdown"> <ul class="markdown">
<li><code>fuzzySearch.toggleSmart</code> allows the searching to be changed from exact matching to fuzzy searching.</li> <li><code>fuzzySearch.toggleSmart</code> allows the searching to be changed from exact matching to fuzzy searching.</li>
<li><code>fuzzySearch.rankColumn</code> allows the % match to be set in a column within the datatable. Some examples of use cases could be to display the value <li><code>fuzzySearch.rankColumn</code> allows the % match to be set in a column within the Datatable. Some examples of use cases could be to display the value
to the user. or to hide the column and order based on it - as a search engine would.</li> to the user. or to hide the column and order based on it - as a search engine would.</li>
<li><code>fuzzySearch.threshold</code> allows the value of similarity that is required from the damerau-levenshtein function to display the row to be <li><code>fuzzySearch.threshold</code> allows the value of similarity that is required from the Damerau-Levenshtein function to display the row to be
changed.</li> changed.</li>
<li><code>fuzzySearch.returnSearch</code> allows the option for searching to only occur when the enter key is pressed.</li> <li><code>fuzzySearch.returnSearch</code> allows the option for searching to only occur when the enter key is pressed.</li>
</ul> </ul>
<p>This example demonstrates the use of the <code>fuzzySearch.rankColumn</code> initialisation option. The default value for this option is undefined which will lead to the
similarity not being displayed in any column. In this example <code>fuzzySearch.rankColumn</code> is set to <code>6</code> which is the column on the far right of
the table. When usingfuzzy searching this column will be updated with the similarity value found within the rows data. When normal searching is being used this
column is not updated to include a value. The type that must be used for <code>fuzzySearch.rankColumn</code> is <code>number</code>. The full range of Datatables
column selectors cannot be used here as the value is used to index internal arrays rather than using the Datatables API</p>
</div> </div>
<div class="demo-html"> <div class="demo-html">
<table id="example" class="display" style="width:100%"> <table id="example" class="display" style="width:100%">

@ -72,17 +72,20 @@ $(document).ready(function() {
<p>Fuzzy searching is used in search engines and databases to perform searches that will match results that are not necessarily exactly the same as the search <p>Fuzzy searching is used in search engines and databases to perform searches that will match results that are not necessarily exactly the same as the search
term. This allows spelling mistakes and typos to be accounted for. It also allows small changes in dialect not to affect search results. A commonly used example is term. This allows spelling mistakes and typos to be accounted for. It also allows small changes in dialect not to affect search results. A commonly used example is
for surname searching. "Smith" and "Smythe" are pronounced the same way, but using conventional searching typing "Smith" would not return "Smythe".</p> for surname searching. "Smith" and "Smythe" are pronounced the same way, but using conventional searching typing "Smith" would not return "Smythe".</p>
<p>This plug-in adds fuzzy search functionality to datatables. It does this through a combination of exact matching and the <a href= <p>This plug-in adds fuzzy search functionality to Datatables. It does this through a combination of exact matching and the <a href=
"https://github.com/tad-lispy/node-damerau-levenshtein">damerau-levenshtein algorithm</a>. There are four initialisation options that are associated with this "https://github.com/tad-lispy/node-damerau-levenshtein">Damerau-Levenshtein algorithm</a>. There are four initialisation options that are associated with this
plugin.</p> plugin.</p>
<ul class="markdown"> <ul class="markdown">
<li><code>fuzzySearch.toggleSmart</code> allows the searching to be changed from exact matching to fuzzy searching.</li> <li><code>fuzzySearch.toggleSmart</code> allows the searching to be changed from exact matching to fuzzy searching.</li>
<li><code>fuzzySearch.rankColumn</code> allows the % match to be set in a column within the datatable. Some examples of use cases could be to display the value <li><code>fuzzySearch.rankColumn</code> allows the % match to be set in a column within the Datatable. Some examples of use cases could be to display the value
to the user. or to hide the column and order based on it - as a search engine would.</li> to the user. or to hide the column and order based on it - as a search engine would.</li>
<li><code>fuzzySearch.threshold</code> allows the value of similarity that is required from the damerau-levenshtein function to display the row to be <li><code>fuzzySearch.threshold</code> allows the value of similarity that is required from the Damerau-Levenshtein function to display the row to be
changed.</li> changed.</li>
<li><code>fuzzySearch.returnSearch</code> allows the option for searching to only occur when the enter key is pressed.</li> <li><code>fuzzySearch.returnSearch</code> allows the option for searching to only occur when the enter key is pressed.</li>
</ul> </ul>
<p>This example demonstrates the use of the <code>fuzzySearch.returnSearch</code> initialisation option. The default value for this option is undefined which lead to the search
results being updated on every keypress. In this example <code>fuzzySearch.returnSearch</code> is set to <code>true</code>, meaning that the search results displayed within the table will
only be updated when the enter key is pressed.</p>
</div> </div>
<div class="demo-html"> <div class="demo-html">
<table id="example" class="display" style="width:100%"> <table id="example" class="display" style="width:100%">

@ -74,17 +74,20 @@ $(document).ready(function() {
<p>Fuzzy searching is used in search engines and databases to perform searches that will match results that are not necessarily exactly the same as the search <p>Fuzzy searching is used in search engines and databases to perform searches that will match results that are not necessarily exactly the same as the search
term. This allows spelling mistakes and typos to be accounted for. It also allows small changes in dialect not to affect search results. A commonly used example is term. This allows spelling mistakes and typos to be accounted for. It also allows small changes in dialect not to affect search results. A commonly used example is
for surname searching. "Smith" and "Smythe" are pronounced the same way, but using conventional searching typing "Smith" would not return "Smythe".</p> for surname searching. "Smith" and "Smythe" are pronounced the same way, but using conventional searching typing "Smith" would not return "Smythe".</p>
<p>This plug-in adds fuzzy search functionality to datatables. It does this through a combination of exact matching and the <a href= <p>This plug-in adds fuzzy search functionality to Datatables. It does this through a combination of exact matching and the <a href=
"https://github.com/tad-lispy/node-damerau-levenshtein">damerau-levenshtein algorithm</a>. There are four initialisation options that are associated with this "https://github.com/tad-lispy/node-damerau-levenshtein">Damerau-Levenshtein algorithm</a>. There are four initialisation options that are associated with this
plugin.</p> plugin.</p>
<ul class="markdown"> <ul class="markdown">
<li><code>fuzzySearch.toggleSmart</code> allows the searching to be changed from exact matching to fuzzy searching.</li> <li><code>fuzzySearch.toggleSmart</code> allows the searching to be changed from exact matching to fuzzy searching.</li>
<li><code>fuzzySearch.rankColumn</code> allows the % match to be set in a column within the datatable. Some examples of use cases could be to display the value <li><code>fuzzySearch.rankColumn</code> allows the % match to be set in a column within the Datatable. Some examples of use cases could be to display the value
to the user. or to hide the column and order based on it - as a search engine would.</li> to the user. or to hide the column and order based on it - as a search engine would.</li>
<li><code>fuzzySearch.threshold</code> allows the value of similarity that is required from the damerau-levenshtein function to display the row to be <li><code>fuzzySearch.threshold</code> allows the value of similarity that is required from the Damerau-Levenshtein function to display the row to be
changed.</li> changed.</li>
<li><code>fuzzySearch.returnSearch</code> allows the option for searching to only occur when the enter key is pressed.</li> <li><code>fuzzySearch.returnSearch</code> allows the option for searching to only occur when the enter key is pressed.</li>
</ul> </ul>
<p>This example shows how fuzzySearch integrates with <code>stateSave</code>. The search mode, the value within the search box and the search results are restored
as they were on reload. To display all of the <code>stateSave</code> functionality, <code>fuzzySearch.toggleSmart</code> and <code>fuzzySearch.rankColumn</code>
are set to true and 6 respectively.</p>
</div> </div>
<div class="demo-html"> <div class="demo-html">
<table id="example" class="display" style="width:100%"> <table id="example" class="display" style="width:100%">

@ -73,17 +73,22 @@ $(document).ready(function() {
<p>Fuzzy searching is used in search engines and databases to perform searches that will match results that are not necessarily exactly the same as the search <p>Fuzzy searching is used in search engines and databases to perform searches that will match results that are not necessarily exactly the same as the search
term. This allows spelling mistakes and typos to be accounted for. It also allows small changes in dialect not to affect search results. A commonly used example is term. This allows spelling mistakes and typos to be accounted for. It also allows small changes in dialect not to affect search results. A commonly used example is
for surname searching. "Smith" and "Smythe" are pronounced the same way, but using conventional searching typing "Smith" would not return "Smythe".</p> for surname searching. "Smith" and "Smythe" are pronounced the same way, but using conventional searching typing "Smith" would not return "Smythe".</p>
<p>This plug-in adds fuzzy search functionality to datatables. It does this through a combination of exact matching and the <a href= <p>This plug-in adds fuzzy search functionality to Datatables. It does this through a combination of exact matching and the <a href=
"https://github.com/tad-lispy/node-damerau-levenshtein">damerau-levenshtein algorithm</a>. There are four initialisation options that are associated with this "https://github.com/tad-lispy/node-damerau-levenshtein">Damerau-Levenshtein algorithm</a>. There are four initialisation options that are associated with this
plugin.</p> plugin.</p>
<ul class="markdown"> <ul class="markdown">
<li><code>fuzzySearch.toggleSmart</code> allows the searching to be changed from exact matching to fuzzy searching.</li> <li><code>fuzzySearch.toggleSmart</code> allows the searching to be changed from exact matching to fuzzy searching.</li>
<li><code>fuzzySearch.rankColumn</code> allows the % match to be set in a column within the datatable. Some examples of use cases could be to display the value <li><code>fuzzySearch.rankColumn</code> allows the % match to be set in a column within the Datatable. Some examples of use cases could be to display the value
to the user. or to hide the column and order based on it - as a search engine would.</li> to the user. or to hide the column and order based on it - as a search engine would.</li>
<li><code>fuzzySearch.threshold</code> allows the value of similarity that is required from the damerau-levenshtein function to display the row to be <li><code>fuzzySearch.threshold</code> allows the value of similarity that is required from the Damerau-Levenshtein function to display the row to be
changed.</li> changed.</li>
<li><code>fuzzySearch.returnSearch</code> allows the option for searching to only occur when the enter key is pressed.</li> <li><code>fuzzySearch.returnSearch</code> allows the option for searching to only occur when the enter key is pressed.</li>
</ul> </ul>
<p>This example demonstrates the use of the <code>fuzzySearch.threshold</code> initialisation option. The default value for this option is 0.5. This value is used to
compare against the Damerau-Levenshtein similarity metric which is calculated by dividing the number of changes needed to make the words the same, by the length of
the longest word. This means that rows where each word in the search value matches a word in the row by at least 0.5 will be displayed. In this example
<code>fuzzySearch.threshold</code> is set to <code>0.1</code>. This will mean that significantly more rows are displayed than normal. The value set here has to be
a decimal number between 0 and 1 with no limit on decimal places. Any greater than 1 and no results will be displayed, 0 will always display all results.</p>
</div> </div>
<div class="demo-html"> <div class="demo-html">
<table id="example" class="display" style="width:100%"> <table id="example" class="display" style="width:100%">

@ -73,17 +73,23 @@ $(document).ready(function() {
<p>Fuzzy searching is used in search engines and databases to perform searches that will match results that are not necessarily exactly the same as the search <p>Fuzzy searching is used in search engines and databases to perform searches that will match results that are not necessarily exactly the same as the search
term. This allows spelling mistakes and typos to be accounted for. It also allows small changes in dialect not to affect search results. A commonly used example is term. This allows spelling mistakes and typos to be accounted for. It also allows small changes in dialect not to affect search results. A commonly used example is
for surname searching. "Smith" and "Smythe" are pronounced the same way, but using conventional searching typing "Smith" would not return "Smythe".</p> for surname searching. "Smith" and "Smythe" are pronounced the same way, but using conventional searching typing "Smith" would not return "Smythe".</p>
<p>This plug-in adds fuzzy search functionality to datatables. It does this through a combination of exact matching and the <a href= <p>This plug-in adds fuzzy search functionality to Datatables. It does this through a combination of exact matching and the <a href=
"https://github.com/tad-lispy/node-damerau-levenshtein">damerau-levenshtein algorithm</a>. There are four initialisation options that are associated with this "https://github.com/tad-lispy/node-damerau-levenshtein">Damerau-Levenshtein algorithm</a>. There are four initialisation options that are associated with this
plugin.</p> plugin.</p>
<ul class="markdown"> <ul class="markdown">
<li><code>fuzzySearch.toggleSmart</code> allows the searching to be changed from exact matching to fuzzy searching.</li> <li><code>fuzzySearch.toggleSmart</code> allows the searching to be changed from exact matching to fuzzy searching.</li>
<li><code>fuzzySearch.rankColumn</code> allows the % match to be set in a column within the datatable. Some examples of use cases could be to display the value <li><code>fuzzySearch.rankColumn</code> allows the % match to be set in a column within the Datatable. Some examples of use cases could be to display the value
to the user. or to hide the column and order based on it - as a search engine would.</li> to the user. or to hide the column and order based on it - as a search engine would.</li>
<li><code>fuzzySearch.threshold</code> allows the value of similarity that is required from the damerau-levenshtein function to display the row to be <li><code>fuzzySearch.threshold</code> allows the value of similarity that is required from the Damerau-Levenshtein function to display the row to be
changed.</li> changed.</li>
<li><code>fuzzySearch.returnSearch</code> allows the option for searching to only occur when the enter key is pressed.</li> <li><code>fuzzySearch.returnSearch</code> allows the option for searching to only occur when the enter key is pressed.</li>
</ul> </ul>
<p>This example demonstrates the use of the <code>fuzzySearch.toggleSmart</code> initialisation option. The default value for this option is undefined which leads
to fuzzy searching being used all the time if the <code>fuzzySearch</code> option is declared in the initialisation options. In this example <code>fuzzySearch.toggleSmart</code>
is set to <code>true</code>, meaning that the search mode can be toggled by the end user. This can be done by hovering over the search box. When doing so a tooltip
will appear with two buttons - one for exact searching and one for fuzzy searching. Alternatively the fuzzy searching logo can be pressed. This logo is blurred when
in fuzzy search mode, and clear when in exact search mode. <code>fuzzySearch.rankColumn</code> is also set to <code>6</code> to display how the similarity is shown
when toggling between exact and fuzzy searching modes. When exact searching no value is shown here.</p>
</div> </div>
<div class="demo-html"> <div class="demo-html">
<table id="example" class="display" style="width:100%"> <table id="example" class="display" style="width:100%">

Loading…
Cancel
Save