From 8499508f26a4995deb1d21594de3b286e2f45dd2 Mon Sep 17 00:00:00 2001 From: Qian Xu Date: Thu, 10 Dec 2020 00:37:45 +0800 Subject: [PATCH] update empty table look and feel and more --- examples/index.html | 511 ++++++++++++++++++++++++++++++++++++++ src/dataTables.uikit3.css | 89 ++++--- src/dataTables.uikit3.js | 22 +- 3 files changed, 585 insertions(+), 37 deletions(-) create mode 100644 examples/index.html diff --git a/examples/index.html b/examples/index.html new file mode 100644 index 0000000..696f080 --- /dev/null +++ b/examples/index.html @@ -0,0 +1,511 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
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
NamePositionOfficeAgeStart dateSalary
+ + + + + + + + + \ No newline at end of file diff --git a/src/dataTables.uikit3.css b/src/dataTables.uikit3.css index d753b91..234a7ba 100644 --- a/src/dataTables.uikit3.css +++ b/src/dataTables.uikit3.css @@ -1,3 +1,7 @@ +/* + * Licensed under the Apache License, Version 2.0 + * See accompanying LICENSE file. + */ table.dataTable { clear: both; margin-top: 6px !important; @@ -147,7 +151,8 @@ table.dataTable thead > tr > .sorting.uk-text-right:before { /*top: 2px;*/ /*content: "\f21f";*/ top: 0; - content: "\f286"; + /*content: "\f286";*/ + content: "\f3d8"; color: rgba(167, 167, 167, .3); } @@ -162,19 +167,15 @@ table.dataTable thead > tr > .sorting.uk-text-right:before { table.dataTable thead > tr > .sorting_asc:not(.uk-text-right):after, table.dataTable thead > tr > .sorting_asc.uk-text-right:before { top: 0; - /*content: "\f0de";*/ - /*content: "\f28b";*/ - /*content: "\f11a";*/ - content: "\f286" + /*content: "\f286"*/ + content: "\f3d8" } table.dataTable thead > tr > .sorting_desc:not(.uk-text-right):after, table.dataTable thead > tr > .sorting_desc.uk-text-right:before { top: 0; - /*content: "\f0dd";*/ - /*content: "\f289";*/ - /*content: "\f118";*/ - content: "\f280" + /*content: "\f280"*/ + content: "\f3d0" } table.dataTable.uk-table-small thead > tr > .sorting:not(.uk-text-right):after, @@ -234,17 +235,17 @@ table.dataTable.uk-table-small thead > tr > .sorting_desc.uk-text-right:before { } /* General Datatables padding fix */ -table.dataTable.uk-table th, -table.dataTable.uk-table td { - padding-left: 14px; - padding-right: 14px; -} +/*table.dataTable.uk-table th,*/ +/*table.dataTable.uk-table td {*/ + /*padding-left: 14px;*/ + /*padding-right: 14px;*/ +/*}*/ -table.dataTable.uk-table-small th, -table.dataTable.uk-table-small td { - padding-left: 6px; - padding-right: 6px; -} +/*table.dataTable.uk-table-small th,*/ +/*table.dataTable.uk-table-small td {*/ + /*padding-left: 6px;*/ + /*padding-right: 6px;*/ +/*}*/ div.dataTables_scrollBody > table.uk-table.uk-table-divider thead tr, div.dataTables_scrollBody > table.uk-table.uk-table-divider tfoot tr { @@ -252,33 +253,61 @@ div.dataTables_scrollBody > table.uk-table.uk-table-divider tfoot tr { } /** Customizable */ -table.dataTable th.sorting_asc, -table.dataTable th.sorting_desc { + +/** Sorted column (2 rules) */ +.uk-light table.dataTable th.sorting_asc, +.uk-light table.dataTable th.sorting_desc, +.uk-light table.dataTable .sorting:hover, +.uk-light table.dataTable .sorting:not(.uk-text-right):hover:after, +.uk-light table.dataTable .sorting.uk-text-right:hover:before, +.uk-light div.dataTables_paginate li.paginate_button.uk-active > * { /*border-bottom: 1px solid rgb(252, 104, 0) !important;*/ - color: white; + background-color: #1e87f0 !important; + color: white !important; + /* nvidia green + background-color: green; + color: rgb(250, 233, 66); + */ } +table.dataTable th.sorting_asc, +table.dataTable th.sorting_desc, table.dataTable .sorting:hover, table.dataTable .sorting:not(.uk-text-right):hover:after, table.dataTable .sorting.uk-text-right:hover:before, div.dataTables_paginate li.paginate_button.uk-active > * { - background-color: #1e87f0; + /*border-bottom: 1px solid rgb(252, 104, 0) !important;*/ + color: #1e87f0 !important; +} + +/** Font size (5 rules) */ +.uk-light table.dataTable.uk-table th { + background-color: rgba(255, 255, 255, 0.1); color: white; - /* nvidia green - background-color: green; - color: rgb(250, 233, 66); - */ } -table.dataTable.uk-table td, table.dataTable.uk-table th { + vertical-align: top; + font-weight: 500; + text-transform: unset; + color: black; +} + +table.dataTable.uk-table th { + font-size: 13px; /*.9rem*/ +} + +table.dataTable.uk-table td { font-size: 1rem; } +table.dataTable.uk-table-small th { + font-size: 12px; /*.85rem*/ +} + table.dataTable.uk-table-small td, -table.dataTable.uk-table-small th, div.dataTables_paginate li.paginate_button > * { - font-size: .95rem; + font-size: 13px; /*.95rem*/ } /*table.dataTable td,*/ diff --git a/src/dataTables.uikit3.js b/src/dataTables.uikit3.js index 1e15aa5..356d6d1 100644 --- a/src/dataTables.uikit3.js +++ b/src/dataTables.uikit3.js @@ -1,8 +1,9 @@ -/*! DataTables UIkit 3 integration +/* + * Licensed under the Apache License, Version 2.0 + * See accompanying LICENSE file. */ - /** - * This is a tech preview of UIKit integration with DataTables. + * This is a UIKit 3.0 integration with DataTables. */ (function(factory) { if (typeof define === 'function' && define.amd) { @@ -43,7 +44,14 @@ "<'row uk-grid'<'uk-width-1-2'l><'uk-width-1-2'f>>" + "<'row uk-grid dt-merge-grid'<'uk-width-1-1'tr>>" + "<'row uk-grid dt-merge-grid'<'uk-width-2-5'i><'uk-width-3-5'p>>", - renderer: 'uikit' + renderer: 'uikit', + // todo: these are unrelated look and feel tweaks + language: { + sZeroRecords: + '

We didn\'t find anything

Try a different keyword
', + sEmptyTable: + '

No data available

Looks empty over here
', + }, }); /* Default class modification */ @@ -84,7 +92,7 @@ switch (button) { case 'ellipsis': - btnDisplay = '...'; + btnDisplay = ''; btnClass = 'uk-disabled disabled'; break; @@ -95,13 +103,13 @@ break; case 'previous': - btnDisplay = ' ' + lang.sPrevious; + btnDisplay = '' + lang.sPrevious; btnClass = (page > 0 ? '' : 'uk-disabled disabled'); break; case 'next': - btnDisplay = lang.sNext + ''; + btnDisplay = lang.sNext + ''; btnClass = (page < pages - 1 ? '' : 'uk-disabled disabled'); break;