From 62ad028ca4b62ad8baba005e653fb4bb1b508ba7 Mon Sep 17 00:00:00 2001 From: Allan Jardine Date: Mon, 29 May 2023 10:49:17 +0100 Subject: [PATCH] Features: Fix Alphabet search after refactor --- .../dataTables.alphabetSearch.js | 5 +- .../dataTables.alphabetSearch.min.js | 2 +- .../dataTables.alphabetSearch.min.mjs | 2 +- .../dataTables.alphabetSearch.mjs | 8 +- features/alphabetSearch/index.html | 523 ++++++++++++++++++ .../src/dataTables.alphabetSearch.ts | 4 + 6 files changed, 540 insertions(+), 4 deletions(-) create mode 100644 features/alphabetSearch/index.html diff --git a/features/alphabetSearch/dataTables.alphabetSearch.js b/features/alphabetSearch/dataTables.alphabetSearch.js index 36925ee..8abf838 100644 --- a/features/alphabetSearch/dataTables.alphabetSearch.js +++ b/features/alphabetSearch/dataTables.alphabetSearch.js @@ -16,7 +16,7 @@ } }; - if (typeof window !== 'undefined') { + if (typeof window === 'undefined') { module.exports = function (root, $) { if ( ! root ) { // CommonJS environments without a window global must pass a @@ -205,6 +205,9 @@ DataTable.AlphabetSearch = function (context) { .on('mouseleave', 'span', function () { alphabet.find('div.alphabetInfo').css('opacity', 0); }); + this.node = function () { + return alphabet; + }; }; // Register a search plug-in DataTable.ext.feature.push({ diff --git a/features/alphabetSearch/dataTables.alphabetSearch.min.js b/features/alphabetSearch/dataTables.alphabetSearch.min.js index def160e..039f95c 100644 --- a/features/alphabetSearch/dataTables.alphabetSearch.min.js +++ b/features/alphabetSearch/dataTables.alphabetSearch.min.js @@ -1,2 +1,2 @@ /*! © SpryMedia Ltd - datatables.net/license */ -!function(a){var n,i;"function"==typeof define&&define.amd?define(["jquery","datatables.net"],function(t){return a(t,window,document)}):"object"==typeof exports?(n=require("jquery"),i=function(t,e){e.fn.dataTable||require("datatables.net")(t,e)},"undefined"!=typeof window?module.exports=function(t,e){return t=t||window,e=e||n(t),i(t,e),a(e,0,t.document)}:(i(window,n),module.exports=a(n,window,window.document))):a(jQuery,window,document)}(function(o,t,e,i){"use strict";var r=o.fn.dataTable;function c(t,e,a){e.empty(),e.append("Search: ");var t=t.column(a.column).data(),n=function(t,e){for(var a,n={},i=0,r=t.length;i/g,"").charAt(0):t[i].toString().replace(/<.*?>/g,"").charAt(0).toUpperCase()]?n[a]++:n[a]=1;return n}(t,a);if(o('').data("letter","").data("match-count",t.length).html("None").appendTo(e),a.numbers)for(var i=0;i<10;i++){var r=String.fromCharCode(48+i);o("").data("letter",r).data("match-count",n[r]||0).addClass(n[r]?"":"empty").html(r).appendTo(e)}for(i=0;i<26;i++){r=String.fromCharCode(65+i);o("").data("letter",r).data("match-count",n[r]||0).addClass(n[r]?"":"empty").html(r).appendTo(e)}if(a.caseSensitive)for(i=0;i<26;i++){r=String.fromCharCode(97+i);o("").data("letter",r).data("match-count",n[r]||0).addClass(n[r]?"":"empty").html(r).appendTo(e)}o('
').appendTo(e)}return r.Api.register("alphabetSearch()",function(e){return this.iterator("table",function(t){t.alphabetSearch=e}),this}),r.Api.register("alphabetSearch.recalc()",function(){return this.iterator("table",function(t){c(new r.Api(t),t._alphabet,t._alphabetOptions)}),this}),r.Api.register("alphabetSearch.node()",function(){return this._context.length?this._context._alphabet:null}),r.ext.search.push(function(t,e){if(!t.alphabetSearch)return!0;var a=0,n=!1;if(t.oInit.alphabet!==i&&(a=t.oInit.alphabet.column!==i?t.oInit.alphabet.column:0,n=t.oInit.alphabet.caseSensitive!==i&&t.oInit.alphabet.caseSensitive),n){if(e[a].charAt(0)===t.alphabetSearch)return!0}else if(e[a].charAt(0).toUpperCase()===t.alphabetSearch)return!0;return!1}),r.AlphabetSearch=function(t){var e=new r.Api(t),a=o('
'),n=o.extend({column:0,caseSensitive:!1,numbers:!1},e.init().alphabet);c(e,a,n),t._alphabet=a,t._alphabetOptions=n,a.on("click","span",function(){a.find(".active").removeClass("active"),o(this).addClass("active"),e.alphabetSearch(o(this).data("letter")).draw()}),a.on("mouseenter","span",function(){a.find("div.alphabetInfo").css({opacity:1,left:o(this).position().left,width:o(this).width()}).html(o(this).data("match-count"))}).on("mouseleave","span",function(){a.find("div.alphabetInfo").css("opacity",0)})},r.ext.feature.push({fnInit:function(t){return new r.AlphabetSearch(t).node()},cFeature:"A"}),r}); \ No newline at end of file +!function(a){var n,i;"function"==typeof define&&define.amd?define(["jquery","datatables.net"],function(t){return a(t,window,document)}):"object"==typeof exports?(n=require("jquery"),i=function(t,e){e.fn.dataTable||require("datatables.net")(t,e)},"undefined"==typeof window?module.exports=function(t,e){return t=t||window,e=e||n(t),i(t,e),a(e,0,t.document)}:(i(window,n),module.exports=a(n,window,window.document))):a(jQuery,window,document)}(function(o,t,e,i){"use strict";var r=o.fn.dataTable;function c(t,e,a){e.empty(),e.append("Search: ");var t=t.column(a.column).data(),n=function(t,e){for(var a,n={},i=0,r=t.length;i/g,"").charAt(0):t[i].toString().replace(/<.*?>/g,"").charAt(0).toUpperCase()]?n[a]++:n[a]=1;return n}(t,a);if(o('').data("letter","").data("match-count",t.length).html("None").appendTo(e),a.numbers)for(var i=0;i<10;i++){var r=String.fromCharCode(48+i);o("").data("letter",r).data("match-count",n[r]||0).addClass(n[r]?"":"empty").html(r).appendTo(e)}for(i=0;i<26;i++){r=String.fromCharCode(65+i);o("").data("letter",r).data("match-count",n[r]||0).addClass(n[r]?"":"empty").html(r).appendTo(e)}if(a.caseSensitive)for(i=0;i<26;i++){r=String.fromCharCode(97+i);o("").data("letter",r).data("match-count",n[r]||0).addClass(n[r]?"":"empty").html(r).appendTo(e)}o('
').appendTo(e)}return r.Api.register("alphabetSearch()",function(e){return this.iterator("table",function(t){t.alphabetSearch=e}),this}),r.Api.register("alphabetSearch.recalc()",function(){return this.iterator("table",function(t){c(new r.Api(t),t._alphabet,t._alphabetOptions)}),this}),r.Api.register("alphabetSearch.node()",function(){return this._context.length?this._context._alphabet:null}),r.ext.search.push(function(t,e){if(!t.alphabetSearch)return!0;var a=0,n=!1;if(t.oInit.alphabet!==i&&(a=t.oInit.alphabet.column!==i?t.oInit.alphabet.column:0,n=t.oInit.alphabet.caseSensitive!==i&&t.oInit.alphabet.caseSensitive),n){if(e[a].charAt(0)===t.alphabetSearch)return!0}else if(e[a].charAt(0).toUpperCase()===t.alphabetSearch)return!0;return!1}),r.AlphabetSearch=function(t){var e=new r.Api(t),a=o('
'),n=o.extend({column:0,caseSensitive:!1,numbers:!1},e.init().alphabet);c(e,a,n),t._alphabet=a,t._alphabetOptions=n,a.on("click","span",function(){a.find(".active").removeClass("active"),o(this).addClass("active"),e.alphabetSearch(o(this).data("letter")).draw()}),a.on("mouseenter","span",function(){a.find("div.alphabetInfo").css({opacity:1,left:o(this).position().left,width:o(this).width()}).html(o(this).data("match-count"))}).on("mouseleave","span",function(){a.find("div.alphabetInfo").css("opacity",0)}),this.node=function(){return a}},r.ext.feature.push({fnInit:function(t){return new r.AlphabetSearch(t).node()},cFeature:"A"}),r}); \ No newline at end of file diff --git a/features/alphabetSearch/dataTables.alphabetSearch.min.mjs b/features/alphabetSearch/dataTables.alphabetSearch.min.mjs index a224cec..46743b6 100644 --- a/features/alphabetSearch/dataTables.alphabetSearch.min.mjs +++ b/features/alphabetSearch/dataTables.alphabetSearch.min.mjs @@ -1,2 +1,2 @@ /*! © SpryMedia Ltd - datatables.net/license */ -import $ from"jquery";import DataTable from"datatables.net";function bin(a,t){for(var e,n={},r=0,i=a.length;r/g,"").charAt(0):a[r].toString().replace(/<.*?>/g,"").charAt(0).toUpperCase()]?n[e]++:n[e]=1;return n}function draw(a,t,e){t.empty(),t.append("Search: ");var a=a.column(e.column).data(),n=bin(a,e);if($('').data("letter","").data("match-count",a.length).html("None").appendTo(t),e.numbers)for(var r=0;r<10;r++){var i=String.fromCharCode(48+r);$("").data("letter",i).data("match-count",n[i]||0).addClass(n[i]?"":"empty").html(i).appendTo(t)}for(r=0;r<26;r++){i=String.fromCharCode(65+r);$("").data("letter",i).data("match-count",n[i]||0).addClass(n[i]?"":"empty").html(i).appendTo(t)}if(e.caseSensitive)for(r=0;r<26;r++){i=String.fromCharCode(97+r);$("").data("letter",i).data("match-count",n[i]||0).addClass(n[i]?"":"empty").html(i).appendTo(t)}$('
').appendTo(t)}DataTable.Api.register("alphabetSearch()",function(t){return this.iterator("table",function(a){a.alphabetSearch=t}),this}),DataTable.Api.register("alphabetSearch.recalc()",function(){return this.iterator("table",function(a){draw(new DataTable.Api(a),a._alphabet,a._alphabetOptions)}),this}),DataTable.Api.register("alphabetSearch.node()",function(){return this._context.length?this._context._alphabet:null}),DataTable.ext.search.push(function(a,t){if(!a.alphabetSearch)return!0;var e=0,n=!1;if(void 0!==a.oInit.alphabet&&(e=void 0!==a.oInit.alphabet.column?a.oInit.alphabet.column:0,n=void 0!==a.oInit.alphabet.caseSensitive&&a.oInit.alphabet.caseSensitive),n){if(t[e].charAt(0)===a.alphabetSearch)return!0}else if(t[e].charAt(0).toUpperCase()===a.alphabetSearch)return!0;return!1}),DataTable.AlphabetSearch=function(a){var t=new DataTable.Api(a),e=$('
'),n=$.extend({column:0,caseSensitive:!1,numbers:!1},t.init().alphabet);draw(t,e,n),a._alphabet=e,a._alphabetOptions=n,e.on("click","span",function(){e.find(".active").removeClass("active"),$(this).addClass("active"),t.alphabetSearch($(this).data("letter")).draw()}),e.on("mouseenter","span",function(){e.find("div.alphabetInfo").css({opacity:1,left:$(this).position().left,width:$(this).width()}).html($(this).data("match-count"))}).on("mouseleave","span",function(){e.find("div.alphabetInfo").css("opacity",0)})},DataTable.ext.feature.push({fnInit:function(a){return new DataTable.AlphabetSearch(a).node()},cFeature:"A"});export default DataTable; \ No newline at end of file +import jQuery from"jquery";import DataTable from"datatables.net";let $=jQuery;function bin(a,t){for(var e,n={},r=0,i=a.length;r/g,"").charAt(0):a[r].toString().replace(/<.*?>/g,"").charAt(0).toUpperCase()]?n[e]++:n[e]=1;return n}function draw(a,t,e){t.empty(),t.append("Search: ");var a=a.column(e.column).data(),n=bin(a,e);if($('').data("letter","").data("match-count",a.length).html("None").appendTo(t),e.numbers)for(var r=0;r<10;r++){var i=String.fromCharCode(48+r);$("").data("letter",i).data("match-count",n[i]||0).addClass(n[i]?"":"empty").html(i).appendTo(t)}for(r=0;r<26;r++){i=String.fromCharCode(65+r);$("").data("letter",i).data("match-count",n[i]||0).addClass(n[i]?"":"empty").html(i).appendTo(t)}if(e.caseSensitive)for(r=0;r<26;r++){i=String.fromCharCode(97+r);$("").data("letter",i).data("match-count",n[i]||0).addClass(n[i]?"":"empty").html(i).appendTo(t)}$('
').appendTo(t)}DataTable.Api.register("alphabetSearch()",function(t){return this.iterator("table",function(a){a.alphabetSearch=t}),this}),DataTable.Api.register("alphabetSearch.recalc()",function(){return this.iterator("table",function(a){draw(new DataTable.Api(a),a._alphabet,a._alphabetOptions)}),this}),DataTable.Api.register("alphabetSearch.node()",function(){return this._context.length?this._context._alphabet:null}),DataTable.ext.search.push(function(a,t){if(!a.alphabetSearch)return!0;var e=0,n=!1;if(void 0!==a.oInit.alphabet&&(e=void 0!==a.oInit.alphabet.column?a.oInit.alphabet.column:0,n=void 0!==a.oInit.alphabet.caseSensitive&&a.oInit.alphabet.caseSensitive),n){if(t[e].charAt(0)===a.alphabetSearch)return!0}else if(t[e].charAt(0).toUpperCase()===a.alphabetSearch)return!0;return!1}),DataTable.AlphabetSearch=function(a){var t=new DataTable.Api(a),e=$('
'),n=$.extend({column:0,caseSensitive:!1,numbers:!1},t.init().alphabet);draw(t,e,n),a._alphabet=e,a._alphabetOptions=n,e.on("click","span",function(){e.find(".active").removeClass("active"),$(this).addClass("active"),t.alphabetSearch($(this).data("letter")).draw()}),e.on("mouseenter","span",function(){e.find("div.alphabetInfo").css({opacity:1,left:$(this).position().left,width:$(this).width()}).html($(this).data("match-count"))}).on("mouseleave","span",function(){e.find("div.alphabetInfo").css("opacity",0)}),this.node=function(){return e}},DataTable.ext.feature.push({fnInit:function(a){return new DataTable.AlphabetSearch(a).node()},cFeature:"A"});export default DataTable; \ No newline at end of file diff --git a/features/alphabetSearch/dataTables.alphabetSearch.mjs b/features/alphabetSearch/dataTables.alphabetSearch.mjs index 4f1d12b..5ebfc30 100644 --- a/features/alphabetSearch/dataTables.alphabetSearch.mjs +++ b/features/alphabetSearch/dataTables.alphabetSearch.mjs @@ -1,8 +1,11 @@ /*! © SpryMedia Ltd - datatables.net/license */ -import $ from 'jquery'; +import jQuery from 'jquery'; import DataTable from 'datatables.net'; +// Allow reassignment of the $ variable +let $ = jQuery; + /** * @summary AlphabetSearch * @description Show an set of alphabet buttons alongside a table providing @@ -162,6 +165,9 @@ DataTable.AlphabetSearch = function (context) { .on('mouseleave', 'span', function () { alphabet.find('div.alphabetInfo').css('opacity', 0); }); + this.node = function () { + return alphabet; + }; }; // Register a search plug-in DataTable.ext.feature.push({ diff --git a/features/alphabetSearch/index.html b/features/alphabetSearch/index.html new file mode 100644 index 0000000..1e46606 --- /dev/null +++ b/features/alphabetSearch/index.html @@ -0,0 +1,523 @@ + + + + + + + + DataTables example - Fuzzy Searching + + + + + + + + + +
+
+

DataTables example Alphabet Search

+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
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/alphabetSearch/src/dataTables.alphabetSearch.ts b/features/alphabetSearch/src/dataTables.alphabetSearch.ts index 211c4d6..6b82abb 100644 --- a/features/alphabetSearch/src/dataTables.alphabetSearch.ts +++ b/features/alphabetSearch/src/dataTables.alphabetSearch.ts @@ -226,6 +226,10 @@ DataTable.AlphabetSearch = function (context) { .on('mouseleave', 'span', function () { alphabet.find('div.alphabetInfo').css('opacity', 0); }); + + this.node = function () { + return alphabet; + }; }; // Register a search plug-in