diff --git a/features/fuzzySearch/api.html b/features/fuzzySearch/api.html new file mode 100644 index 0000000..837adb1 --- /dev/null +++ b/features/fuzzySearch/api.html @@ -0,0 +1,626 @@ + + + + + + + + DataTables example - Fuzzy Searching + + + + + + + + +
+
+

DataTables example Fuzzy Searching

+
+

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 + for surname searching. "Smith" and "Smythe" are pronounced the same way, but using conventional searching typing "Smith" would not return "Smythe".

+

This plug-in adds fuzzy search functionality to DataTables. It does this through a combination of exact matching and the Damerau-Levenshtein algorithm. There are three initialisation options that are associated with this + plugin.

+
    +
  • fuzzySearch.toggleSmart allows the searching to be changed from exact matching to fuzzy searching.
    • +
  • fuzzySearch.rankColumn 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.
    • +
  • fuzzySearch.threshold allows the value of similarity that is required from the Damerau-Levenshtein function to display the row to be + changed.
    • +
+

This example shows how the API methods can be used to work with fuzzy searching. There are 4 buttons below which implement the following actions

+
    +
  • .search(value)This button takes the value from the input element to the left of the buttons and passes it into the .search() + api method. Doing this should update the value in the tables input element, but not yet update the tables records. If instead an undefined value were to be + passed in this method would act as a getter and retrieve the most recent search value.
    • +
  • .search("")This button again calls the .search() api method, this time with an empty string to clear that value that it stores. + Doing this should update the value in the tables input element, but not yet update the tables records.
    • +
  • .search.fuzzy(value)This button takes the value from the input element to the left of the buttons and passes it into the .search.fuzzy() + api method. Doing this should update the value in the tables input element, but not yet update the tables records. If instead an undefined value were to be + passed in this method would act as a getter and retrieve the most recent fuzzy search value.
    • +
  • .search.fuzzy("")This button again calls the .search.fuzzy() api method, this time with an empty string to clear that value that + it stores. Doing this should update the value in the tables input element, but not yet update the tables records.
    • +
  • .draw()This button calls the .draw() api method. Doing this will update the table to display the values that have been returned + based on the calls to the above api methods. If a value has been set for both exact and fuzzy searching then both must approve a row for it to be displayed. + Clearing one of these values and drawing again will cause the other to be the sole filter that is applied. If the tables UI is used at any point then the + exact search is discarded and fuzzy search takes command
    • +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSydney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSydney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
NamePositionOfficeAgeStart dateSalary
+
+

The Javascript shown below is used to initialise the table shown in this example:

$(document).ready(function() { + var table = $('#example').DataTable({ + fuzzySearch: true + }); +} ); +
+ + + diff --git a/features/fuzzySearch/dataTables.fuzzySearch.js b/features/fuzzySearch/dataTables.fuzzySearch.js new file mode 100644 index 0000000..7885a94 --- /dev/null +++ b/features/fuzzySearch/dataTables.fuzzySearch.js @@ -0,0 +1,440 @@ +(function() { + /** + * Levenshtein function courtesy of https://github.com/tad-lispy/node-damerau-levenshtein / https://www.npmjs.com/package/damerau-levenshtein + */ + function levenshtein(__this, that, limit) { + + var thisLength = __this.length, + thatLength = that.length, + matrix = []; + + // If the limit is not defined it will be calculate from this and that args. + limit = (limit || ((thatLength > thisLength ? thatLength : thisLength)))+1; + + for (var i = 0; i < limit; i++) { + matrix[i] = [i]; + matrix[i].length = limit; + } + for (i = 0; i < limit; i++) { + matrix[0][i] = i; + } + + if (Math.abs(thisLength - thatLength) > (limit || 100)){ + return prepare (limit || 100); + } + if (thisLength === 0){ + return prepare (thatLength); + } + if (thatLength === 0){ + return prepare (thisLength); + } + + // Calculate matrix. + var j, this_i, that_j, cost, min, t; + for (i = 1; i <= thisLength; ++i) { + this_i = __this[i-1]; + + // Step 4 + for (j = 1; j <= thatLength; ++j) { + // Check the jagged ld total so far + if (i === j && matrix[i][j] > 4) return prepare (thisLength); + + that_j = that[j-1]; + cost = (this_i === that_j) ? 0 : 1; // Step 5 + // Calculate the minimum (much faster than Math.min(...)). + min = matrix[i - 1][j ] + 1; // Devarion. + if ((t = matrix[i ][j - 1] + 1 ) < min) min = t; // Insertion. + if ((t = matrix[i - 1][j - 1] + cost) < min) min = t; // Substitution. + + // Update matrix. + matrix[i][j] = (i > 1 && j > 1 && this_i === that[j-2] && __this[i-2] === that_j && (t = matrix[i-2][j-2]+cost) < min) ? t : min; // Transposition. + } + } + + return prepare (matrix[thisLength][thatLength]); + + /** + * + */ + function prepare(steps) { + var length = Math.max(thisLength, thatLength) + var relative = length === 0 + ? 0 + : (steps / length); + var similarity = 1 - relative + return { + steps: steps, + relative: relative, + similarity: similarity + }; + } + } + + function fuzzySearch(searchVal, data, initial) { + // If no searchVal has been defined then return all rows. + if(searchVal === undefined || searchVal.length === 0) { + return { + pass: true, + score: '' + } + } + + var threshold = initial.threshold !== undefined ? initial.threshold : 0.5; + + // Split the searchVal into individual words. + var splitSearch = searchVal.split(/ /g); + + // Array to keep scores in + var highestCollated = []; + + // Remove any empty words or spaces + for(var x = 0; x < splitSearch.length; x++) { + if (splitSearch[x].length === 0 || splitSearch[x] === ' ') { + splitSearch.splice(x, 1); + x--; + } + // Aside - Add to the score collection if not done so yet for this search word + else if (highestCollated.length < splitSearch.length) { + highestCollated.push({pass: false, score: 0}); + } + } + + // Going to check each cell for potential matches + for(var i = 0; i < data.length; i++) { + // Convert all data points to lower case fo insensitive sorting + data[i] = data[i].toLowerCase(); + + // Split the data into individual words + var splitData = data[i].split(/ /g); + + // Remove any empty words or spaces + for (var y = 0; y < splitData.length; y++){ + if(splitData[y].length === 0 || splitData[y] === ' ') { + splitData.splice(y, 1); + x--; + } + } + + // Check each search term word + for(var x = 0; x < splitSearch.length; x++) { + // Reset highest score + var highest = { + pass: undefined, + score: 0 + }; + + // Against each word in the cell + for (var y = 0; y < splitData.length; y++){ + // If this search Term word is the beginning of the word in the cell we want to pass this word + if(splitData[y].indexOf(splitSearch[x]) === 0){ + var newScore = splitSearch[x].length / splitData[y].length; + highest = { + pass: true, + score: highest.score < newScore ? newScore : highest.score + }; + } + + // Get the levenshtein similarity score for the two words + var steps = levenshtein(splitSearch[x], splitData[y]).similarity; + + // If the levenshtein similarity score is better than a previous one for the search word then var's store it + if(steps > highest.score) { + highest.score = steps; + } + } + + // If this cell has a higher scoring word than previously found to the search term in the row, store it + if(highestCollated[x].score < highest.score || highest.pass) { + highestCollated[x] = { + pass: highest.pass || highestCollated.pass ? true : highest.score > threshold, + score: highest.score + }; + } + } + } + + // Check that all of the search words have passed + for(var i = 0; i < highestCollated.length; i++) { + if(!highestCollated[i].pass) { + return { + pass: false, + score: Math.round(((highestCollated.reduce((a,b) => a+b.score, 0) / highestCollated.length) * 100)) + "%" + }; + } + } + + // If we get to here, all scores greater than 0.5 so display the row + return { + pass: true, + score: Math.round(((highestCollated.reduce((a,b) => a+b.score, 0) / highestCollated.length) * 100)) + "%" + }; + } + + $.fn.dataTable.ext.search.push( + function( settings, data, dataIndex ) { + var initial = settings.oInit.fuzzySearch; + // If fuzzy searching has not been implemented then pass all rows for this function + if (settings.aoData[dataIndex]._fuzzySearch !== undefined) { + // Read score to set the cell content and sort data + var score = settings.aoData[dataIndex]._fuzzySearch.score; + + if (initial.rankColumn !== undefined) { + settings.aoData[dataIndex].anCells[initial.rankColumn].innerHTML = score; + + // Remove '%' from the end of the score so can sort on a number + settings.aoData[dataIndex]._aSortData[initial.rankColumn] = +score.substring(0, score.length - 1); + } + + // Return the value for the pass as decided by the fuzzySearch function + return settings.aoData[dataIndex]._fuzzySearch.pass; + } + else if (initial.rankColumn !== undefined) { + settings.aoData[dataIndex].anCells[initial.rankColumn].innerHTML = ''; + settings.aoData[dataIndex]._aSortData[initial.rankColumn] = ''; + } + + return true; + } + ); + + $(document).on('init.dt', function(e, settings) { + var api = new $.fn.dataTable.Api(settings); + var initial = api.init(); + var initialFuzzy = initial.fuzzySearch; + + // If this is not set then fuzzy searching is not enabled on the table so return. + if(!initialFuzzy) { + return; + } + + var fromPlugin = false; + + // Find the input element + var input = $('div.dataTables_filter input', api.table().container()) + + var fontBold = { + 'font-weight': '600', + 'background-color': 'rgba(255,255,255,0.1)' + }; + var fontNormal = { + 'font-weight': '500', + 'background-color': 'transparent' + }; + var toggleCSS = { + 'border': 'none', + 'background': 'none', + 'font-size': '100%', + 'width': '50%', + 'display': 'inline-block', + 'color': 'white', + 'cursor': 'pointer', + 'padding': '0.5em' + } + + // Only going to set the toggle if it is enabled + var toggle, tooltip, exact, fuzzy, label; + if(initialFuzzy.toggleSmart) { + toggle =$('') + .insertAfter(input) + .css({ + 'border': 'none', + 'background': 'none', + 'position': 'relative', + 'right': '33px', + 'top': '0px', + 'cursor': 'pointer', + 'color': '#3b5e99', + 'margin-top': '1px' + }); + exact =$('') + .insertAfter(input) + .css(toggleCSS) + .css(fontBold) + .attr('highlighted', true); + fuzzy =$('') + .insertAfter(input) + .css(toggleCSS); + input.css({ + 'padding-right': '30px' + }); + label = $('
Search Type
').css({'padding-bottom': '0.5em', 'font-size': '0.8em'}) + tooltip = $('
') + .css({ + 'position': 'absolute', + 'right': '0px', + 'top': '2em', + 'background': 'white', + 'border-radius': '4px', + 'text-align': 'center', + 'padding': '0.5em', + 'background-color': '#16232a', + 'box-shadow': '4px 4px 4px rgba(0, 0, 0, 0.5)', + 'color': 'white', + 'transition': 'opacity 0.25s', + 'z-index': '30001' + }) + .width(input.outerWidth() - 3) + .append(label).append(exact).append(fuzzy); + } + + function toggleFuzzy(event) { + if(toggle.attr('blurred')) { + toggle.css({'filter': 'blur(0px)'}).removeAttr('blurred'); + fuzzy.removeAttr('highlighted').css(fontNormal); + exact.attr('highlighted', true).css(fontBold); + } + else { + toggle.css({'filter': 'blur(1px)'}).attr('blurred', true); + exact.removeAttr('highlighted').css(fontNormal); + fuzzy.attr('highlighted', true).css(fontBold); + } + + // Whenever the search mode is changed we need to re-search + triggerSearchFunction(event); + } + + // Turn off the default datatables searching events + $(settings.nTable).off('search.dt.DT'); + + var fuzzySearchVal = ''; + var searchVal = ''; + // The function that we want to run on search + var triggerSearchFunction = function(event){ + // If the search is only to be triggered on return wait for that + if ((event.type === 'input' && (initial.search === undefined || !initial.search.return)) || event.key === "Enter" || event.type === 'click') { + // If the toggle is set and isn't checkd then perform a normal search + if(toggle && !toggle.attr('blurred')) { + api.rows().iterator('row', function(settings, rowIdx) { + settings.aoData[rowIdx]._fuzzySearch = undefined; + }) + searchVal = input.val(); + fuzzySearchVal = searchVal; + fromPlugin = true; + api.search(searchVal); + fromPlugin = false; + searchVal = ""; + } + // Otherwise perform a fuzzy search + else { + // Get the value from the input element and convert to lower case + fuzzySearchVal = input.val(); + searchVal = ""; + + if (fuzzySearchVal !== undefined && fuzzySearchVal.length !== 0) { + fuzzySearchVal = fuzzySearchVal.toLowerCase(); + } + + // For each row call the fuzzy search function to get result + api.rows().iterator('row', function(settings, rowIdx) { + settings.aoData[rowIdx]._fuzzySearch = fuzzySearch(fuzzySearchVal, settings.aoData[rowIdx]._aFilterData, initialFuzzy) + }); + + fromPlugin = true; + // Empty the datatables search and replace it with our own + api.search(""); + input.val(fuzzySearchVal); + fromPlugin = false; + } + + fromPlugin = true; + api.draw(); + fromPlugin = false; + } + } + + var apiRegister = $.fn.dataTable.Api.register; + apiRegister('search.fuzzy()', function(value) { + if(value === undefined) { + return fuzzySearchVal; + } + else { + fuzzySearchVal = value.toLowerCase(); + searchVal = api.search(); + input.val(fuzzySearchVal); + + // For each row call the fuzzy search function to get result + api.rows().iterator('row', function(settings, rowIdx) { + settings.aoData[rowIdx]._fuzzySearch = fuzzySearch(fuzzySearchVal, settings.aoData[rowIdx]._aFilterData, initialFuzzy) + }); + // triggerSearchFunction({key: 'Enter'}); + return this; + } + }) + + input.off(); + // Set listeners to occur on toggle and typing + if(toggle) { + // Highlights one of the buttons in the tooltip and un-highlights the other + function highlightButton(toHighlight, event) { + if(!toHighlight.attr('highlighted')){ + toggleFuzzy(event) + } + } + + // Removes the tooltip element + function removeToolTip() { + tooltip.remove(); + } + + // Actions for the toggle button + toggle + .on('click', toggleFuzzy) + .on('mouseenter', function() { + tooltip + .insertAfter(toggle) + .on('mouseleave', removeToolTip); + exact.on('click', (event) => highlightButton(exact, event)); + fuzzy.on('click', (event) => highlightButton(fuzzy, event)); + }) + .on('mouseleave', removeToolTip); + + // Actions for the input element + input + .on('mouseenter', function() { + tooltip + .insertAfter(toggle) + .on('mouseleave', removeToolTip); + exact.on('click', (event) => highlightButton(exact, event)) + fuzzy.on('click', (event) => highlightButton(fuzzy, event)) + }) + .on('mouseleave', function() { + var inToolTip = false; + tooltip.on('mouseenter', () => inToolTip = true); + toggle.on('mouseenter', () => inToolTip = true); + setTimeout(function(){ + if(!inToolTip) { + removeToolTip(); + } + }, 250); + }); + + var state = api.state.loaded(); + + api.on('stateSaveParams', function(e, settings, data) { + data._fuzzySearch = { + active: toggle.attr('blurred'), + val: input.val() + } + }) + + if (state !== null && state._fuzzySearch !== undefined) { + input.val(state._fuzzySearch.val); + + if (state._fuzzySearch.active === 'true') { + toggle.click(); + api.page(state.start/state.length).draw('page'); + } + } + } + + api.on('search', function(){ + if(!fromPlugin) { + input.val(api.search() !== searchVal ? api.search() : fuzzySearchVal); + } + }) + + // Always add this event no matter if toggling is enabled + input.on('input keydown', triggerSearchFunction); + }) +}()); + \ No newline at end of file diff --git a/features/fuzzySearch/index.html b/features/fuzzySearch/index.html new file mode 100644 index 0000000..c9b6832 --- /dev/null +++ b/features/fuzzySearch/index.html @@ -0,0 +1,574 @@ + + + + + + + + DataTables example - Fuzzy Searching + + + + + + + + +
+
+

DataTables example Fuzzy Searching

+
+

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 + for surname searching. "Smith" and "Smythe" are pronounced the same way, but using conventional searching typing "Smith" would not return "Smythe".

+

This plug-in adds fuzzy search functionality to DataTables. It does this through a combination of exact matching and the Damerau-Levenshtein algorithm. There are three initialisation options that are associated with this + plugin.

+
    +
  • fuzzySearch.toggleSmart allows the searching to be changed from exact matching to fuzzy searching.
    • +
  • fuzzySearch.rankColumn 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.
    • +
  • fuzzySearch.threshold allows the value of similarity that is required from the Damerau-Levenshtein function to display the row to be + changed.
    • +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSydney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSydney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
NamePositionOfficeAgeStart dateSalary
+
+

The Javascript shown below is used to initialise the table shown in this example:

$(document).ready(function() { + var table = $('#example').DataTable({ + fuzzySearch: true + }); +} ); +
+ + + diff --git a/features/fuzzySearch/rankColumn.html b/features/fuzzySearch/rankColumn.html new file mode 100644 index 0000000..97de0c6 --- /dev/null +++ b/features/fuzzySearch/rankColumn.html @@ -0,0 +1,642 @@ + + + + + + + + DataTables example - Fuzzy Searching + + + + + + + + +
+
+

DataTables example Fuzzy Searching

+
+

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 + for surname searching. "Smith" and "Smythe" are pronounced the same way, but using conventional searching typing "Smith" would not return "Smythe".

+

This plug-in adds fuzzy search functionality to DataTables. It does this through a combination of exact matching and the Damerau-Levenshtein algorithm. There are three initialisation options that are associated with this + plugin.

+
    +
  • fuzzySearch.toggleSmart allows the searching to be changed from exact matching to fuzzy searching.
    • +
  • fuzzySearch.rankColumn 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.
    • +
  • fuzzySearch.threshold allows the value of similarity that is required from the Damerau-Levenshtein function to display the row to be + changed.
    • +
+

This example demonstrates the use of the fuzzySearch.rankColumn 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 fuzzySearch.rankColumn is set to 6 which is the column on the far right of + the table. When using fuzzy 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 fuzzySearch.rankColumn is number. 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

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NamePositionOfficeAgeStart dateSalarySimilarity
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSydney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSydney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
NamePositionOfficeAgeStart dateSalarySimilarity
+
+

The Javascript shown below is used to initialise the table shown in this example:

$(document).ready(function() { + var table = $('#example').DataTable({ + fuzzySearch: { + rankColumn: 6 + } + }); +} ); +
+ + + diff --git a/features/fuzzySearch/returnSearch.html b/features/fuzzySearch/returnSearch.html new file mode 100644 index 0000000..d0c5216 --- /dev/null +++ b/features/fuzzySearch/returnSearch.html @@ -0,0 +1,583 @@ + + + + + + + + DataTables example - Fuzzy Searching + + + + + + + + +
+
+

DataTables example Fuzzy Searching

+
+

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 + for surname searching. "Smith" and "Smythe" are pronounced the same way, but using conventional searching typing "Smith" would not return "Smythe".

+

This plug-in adds fuzzy search functionality to DataTables. It does this through a combination of exact matching and the Damerau-Levenshtein algorithm. There are three initialisation options that are associated with this + plugin.

+
    +
  • fuzzySearch.toggleSmart allows the searching to be changed from exact matching to fuzzy searching.
    • +
  • fuzzySearch.rankColumn 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.
    • +
  • fuzzySearch.threshold allows the value of similarity that is required from the Damerau-Levenshtein function to display the row to be + changed.
    • +
+

This example demonstrates how fuzzy searching can make use of the search.return initialisation option which is new in DataTables version 1.11. The default value for this option is false which lead to the search + results being updated on every keypress. In this example search.return is set to true, meaning that the search results displayed within the table will + only be updated when the enter key is pressed.

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSydney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSydney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
NamePositionOfficeAgeStart dateSalary
+
+

The Javascript shown below is used to initialise the table shown in this example:

$(document).ready(function() { + var table = $('#example').DataTable({ + fuzzySearch: true, + search: { + return: true + } + }); +} ); +
+ + + diff --git a/features/fuzzySearch/stateSaving.html b/features/fuzzySearch/stateSaving.html new file mode 100644 index 0000000..5ccae07 --- /dev/null +++ b/features/fuzzySearch/stateSaving.html @@ -0,0 +1,644 @@ + + + + + + + + DataTables example - Fuzzy Searching + + + + + + + + +
+
+

DataTables example Fuzzy Searching

+
+

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 + for surname searching. "Smith" and "Smythe" are pronounced the same way, but using conventional searching typing "Smith" would not return "Smythe".

+

This plug-in adds fuzzy search functionality to DataTables. It does this through a combination of exact matching and the Damerau-Levenshtein algorithm. There are three initialisation options that are associated with this + plugin.

+
    +
  • fuzzySearch.toggleSmart allows the searching to be changed from exact matching to fuzzy searching.
    • +
  • fuzzySearch.rankColumn 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.
    • +
  • fuzzySearch.threshold allows the value of similarity that is required from the Damerau-Levenshtein function to display the row to be + changed.
    • +
+

This example shows how fuzzySearch integrates with stateSave. 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 stateSave functionality, fuzzySearch.toggleSmart and fuzzySearch.rankColumn + are set to true and 6 respectively.

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NamePositionOfficeAgeStart dateSalarySimilarity
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSydney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSydney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
NamePositionOfficeAgeStart dateSalarySimilarity
+
+

The Javascript shown below is used to initialise the table shown in this example:

$(document).ready(function() { + var table = $('#example').DataTable({ + fuzzySearch: { + rankColumn: 6, + toggleSmart: true + }, + stateSave: true + }); +} ); +
+ + + diff --git a/features/fuzzySearch/threshold.html b/features/fuzzySearch/threshold.html new file mode 100644 index 0000000..18199c0 --- /dev/null +++ b/features/fuzzySearch/threshold.html @@ -0,0 +1,650 @@ + + + + + + + + DataTables example - Fuzzy Searching + + + + + + + + +
+
+

DataTables example Fuzzy Searching

+
+

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 + for surname searching. "Smith" and "Smythe" are pronounced the same way, but using conventional searching typing "Smith" would not return "Smythe".

+

This plug-in adds fuzzy search functionality to DataTables. It does this through a combination of exact matching and the Damerau-Levenshtein algorithm. There are three initialisation options that are associated with this + plugin.

+
    +
  • fuzzySearch.toggleSmart allows the searching to be changed from exact matching to fuzzy searching.
    • +
  • fuzzySearch.rankColumn 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.
    • +
  • fuzzySearch.threshold allows the value of similarity that is required from the Damerau-Levenshtein function to display the row to be + changed.
    • +
+

This example demonstrates the use of the fuzzySearch.threshold 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 and subtracting that value from one. 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 + fuzzySearch.threshold is set to 0.1. 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.

+

Let's consider an example of how these values are calculated. To do this let's walk through the comparison between a cell containing "Jackson" and a search value + of "sockssssssssssssssss". Here the longer of the two values is the search value, which is 20 characters long. There are 3 matching letters mid string - "cks". + The "Ja" preceeding the "cks" requires a substitution of 2 to make the strings match. The "on" following the "cks" also requres a substitution of 2 to make the + strings match. The remaining 13 "s"s are deleted, this gives a total change score of 17. Dividing that by the longest length (20) gives a value of 0.85. Subtracting + that value from one gives a similarity score of 0.15. This would therefore pass in the below example where the threshold is 0.1. For obvious reasons, it is not + recommended that you set the threshold value that low.

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NamePositionOfficeAgeStart dateSalarySimilarity
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSydney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSydney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
NamePositionOfficeAgeStart dateSalarySimilarity
+
+

The Javascript shown below is used to initialise the table shown in this example:

$(document).ready(function() { + var table = $('#example').DataTable({ + fuzzySearch: { + rankColumn: 6, + threshold: 0.1 + } + }); +} ); +
+ + + diff --git a/features/fuzzySearch/toggleSmart.html b/features/fuzzySearch/toggleSmart.html new file mode 100644 index 0000000..4eea35e --- /dev/null +++ b/features/fuzzySearch/toggleSmart.html @@ -0,0 +1,645 @@ + + + + + + + + DataTables example - Fuzzy Searching + + + + + + + + +
+
+

DataTables example Fuzzy Searching

+
+

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 + for surname searching. "Smith" and "Smythe" are pronounced the same way, but using conventional searching typing "Smith" would not return "Smythe".

+

This plug-in adds fuzzy search functionality to DataTables. It does this through a combination of exact matching and the Damerau-Levenshtein algorithm. There are three initialisation options that are associated with this + plugin.

+
    +
  • fuzzySearch.toggleSmart allows the searching to be changed from exact matching to fuzzy searching.
    • +
  • fuzzySearch.rankColumn 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.
    • +
  • fuzzySearch.threshold allows the value of similarity that is required from the Damerau-Levenshtein function to display the row to be + changed.
    • +
+

This example demonstrates the use of the fuzzySearch.toggleSmart initialisation option. The default value for this option is undefined which leads + to fuzzy searching being used all the time if the fuzzySearch option is declared in the initialisation options. In this example fuzzySearch.toggleSmart + is set to true, 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. fuzzySearch.rankColumn is also set to 6 to display how the similarity is shown + when toggling between exact and fuzzy searching modes. When exact searching no value is shown here.

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NamePositionOfficeAgeStart dateSalarySimilarity
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSydney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSydney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
NamePositionOfficeAgeStart dateSalarySimilarity
+
+

The Javascript shown below is used to initialise the table shown in this example:

$(document).ready(function() { + var table = $('#example').DataTable({ + fuzzySearch: { + rankColumn: 6, + toggleSmart: true + } + }); +} ); +
+ + + diff --git a/features/pageResize/index.html b/features/pageResize/index.html index 83ab2ff..344d70f 100644 --- a/features/pageResize/index.html +++ b/features/pageResize/index.html @@ -5,7 +5,7 @@ DataTables page resize example - + - + - + - +