From 9726e803fa2a748da5053e398c1bbbb59fa2907d Mon Sep 17 00:00:00 2001 From: Allan Jardine Date: Thu, 30 Nov 2017 12:15:21 +0000 Subject: [PATCH] Feature - searchPanes: Vertical layout demo and initialisation options --- features/searchPane/dataTables.searchPane.css | 3 +- features/searchPane/dataTables.searchPane.js | 34 +- .../searchPane/dataTables.searchPane.scss | 6 +- features/searchPane/index.html | 3 - features/searchPane/vertical.html | 555 ++++++++++++++++++ 5 files changed, 586 insertions(+), 15 deletions(-) create mode 100644 features/searchPane/vertical.html diff --git a/features/searchPane/dataTables.searchPane.css b/features/searchPane/dataTables.searchPane.css index 097566a..d980ea1 100644 --- a/features/searchPane/dataTables.searchPane.css +++ b/features/searchPane/dataTables.searchPane.css @@ -5,8 +5,7 @@ div.dt-searchPanes { justify-content: space-around; align-content: flex-start; align-items: stretch; - height: 100%; - margin: 1em 0; + height: 200px; } div.dt-searchPanes div.pane { position: relative; diff --git a/features/searchPane/dataTables.searchPane.js b/features/searchPane/dataTables.searchPane.js index 916fc6a..00a5413 100644 --- a/features/searchPane/dataTables.searchPane.js +++ b/features/searchPane/dataTables.searchPane.js @@ -1,6 +1,4 @@ // TODO -// - Option to have vertical layout class -// - Number of horizontal panels class options // - Threshold option - require that there is duplicate information in a column before it is used // - Styling for selected // - Styling for container / header @@ -42,11 +40,11 @@ this.classes = $.extend(true, {}, SearchPanes.classes); this.dom = { - container: $('
') - .addClass(this.classes.container) - .appendTo(opts.container) + container: $('
').addClass(this.classes.container) }; + this.c = $.extend( true, {}, SearchPanes.defaults, opts ); + this.s = { dt: table }; @@ -65,9 +63,27 @@ .on('click', 'button.' + this.classes.clear, function() { that._clear($(this).closest('div.' + that.classes.pane.container)); }); + + this._attach(); } $.extend(SearchPanes.prototype, { + _attach: function () { + var container = this.c.container; + var host = typeof container === 'function' ? + container( this.s.dt ) : + container; + + console.log( host ); + + if ( this.c.insert === 'prepend' ) { + $(this.dom.container).prependTo( host ); + } + else { + $(this.dom.container).appendTo( host ); + } + }, + _binData: function(data) { var out = {}; @@ -215,6 +231,14 @@ } }; + SearchPanes.defaults = { + container: function ( dt ) { + return dt.table().container(); + }, + columns: null, + insert: 'prepend' + }; + $(document).on('init.dt', function(e, settings, json) { if (e.namespace !== 'dt') { return; diff --git a/features/searchPane/dataTables.searchPane.scss b/features/searchPane/dataTables.searchPane.scss index 1776353..60d4ee0 100644 --- a/features/searchPane/dataTables.searchPane.scss +++ b/features/searchPane/dataTables.searchPane.scss @@ -6,8 +6,7 @@ div.dt-searchPanes { justify-content: space-around; align-content: flex-start; align-items: stretch; - height: 100%; - margin: 1em 0; + height: 200px; div.pane { position: relative; @@ -15,9 +14,6 @@ div.dt-searchPanes { margin: 1em 0.5%; border: 1px solid #ccc; - - /*width: 15.5%; - margin: 0 0.583333333%;*/ button[type=button] { display: none; diff --git a/features/searchPane/index.html b/features/searchPane/index.html index b93c426..8655b2c 100644 --- a/features/searchPane/index.html +++ b/features/searchPane/index.html @@ -24,7 +24,6 @@ body { $(document).ready( function () { $('#example').DataTable( { searchPane: { - container: '#grouping', columns: ':not(:last-child)' } } ); @@ -35,8 +34,6 @@ body {

Space for banner etc

-
- diff --git a/features/searchPane/vertical.html b/features/searchPane/vertical.html new file mode 100644 index 0000000..7ad985e --- /dev/null +++ b/features/searchPane/vertical.html @@ -0,0 +1,555 @@ + + + + + + DataTables search pane example + + + + + + + + + + + +
+

Space for banner etc

+ +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NamePositionOfficeAgeStart dateSalary
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 AssistantSidney232010/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 SpecialistSidney372011/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
+
+
+
+
+ + \ No newline at end of file