Skip to content

Commit 93457f5

Browse files
nboisteaultnboisteault
committed
Attribute table: update code for Datatables v2.2.2
Legacy datatables is kept for admin part of Lizmap
1 parent 39b6edd commit 93457f5

File tree

2 files changed

+31
-195
lines changed

2 files changed

+31
-195
lines changed

‎assets/src/legacy/attributeTable.js‎

Lines changed: 31 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -258,13 +258,6 @@ var lizAttributeTable = function() {
258258
dTable.draw();
259259
});
260260
});
261-
262-
// Bind click on tabs to resize datatable tables
263-
$('#attributeLayers-tabs li').click(function(){
264-
var mycontainerId = $('#bottom-dock div.bottom-content.active div.attribute-layer-main').attr('id');
265-
refreshDatatableSize('#'+mycontainerId);
266-
});
267-
268261
} else {
269262
// Hide navbar menu
270263
$('#mapmenu li.attributeLayers').hide();
@@ -501,12 +494,6 @@ var lizAttributeTable = function() {
501494
// Action bar specific to the tab
502495
html+= '<div class="attribute-layer-action-bar">';
503496

504-
// Search input
505-
html+= '<div class="btn-group">';
506-
html+= ' <input id="attribute-layer-search-' + cleanName + '" type="search" class="form-control" placeholder="'+lizDict['attributeLayers.toolbar.input.search.title']+'">';
507-
html+= ' <i class="clear-layer-search icon-remove" style="position:absolute;right:4px;top:4px;cursor:pointer;"></i>';
508-
html+= '</div>';
509-
510497
// Selected searched lines button
511498
html+= '<button class="btn-select-searched btn btn-sm" value="'+cleanName+'" title="'+lizDict['attributeLayers.toolbar.btn.select.searched.title']+'"><i class="icon-star"></i></button>';
512499

@@ -652,22 +639,12 @@ var lizAttributeTable = function() {
652639
$(tabContentId).remove(); //remove respective tab content
653640
});
654641

655-
if( childHtml ){
656-
657-
// Bind adjust child columns when children tab visibility change
658-
$('#attribute-layer-' + cleanName + ' div.attribute-layer-child-content ul li a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
659-
var target = $(e.target).attr("href") // activated tab
660-
var dtable = $(target).find('table.dataTable');
661-
dtable.DataTable().tables().columns.adjust();
662-
});
663-
}
664-
665642
if( childHtml ){
666643
$('#attribute-layer-'+ cleanName + ' button.btn-toggle-children')
667644
.click(function(){
668645
var parentDir = $(this).parents('div.attribute-layer-main');
669646
parentDir.find('div.attribute-layer-content').toggleClass('showChildren');
670-
parentDir.find('div.tabbable.attribute-layer-child-content').toggle();
647+
parentDir.find('div.attribute-layer-child-content').toggle();
671648
// Refresh parent table size
672649
refreshDatatableSize('#attribute-layer-main-'+ cleanName);
673650
return false;
@@ -683,8 +660,6 @@ var lizAttributeTable = function() {
683660
$('#attribute-layer-main-' + cleanName).toggleClass('reduced', !$(this).hasClass('btn-primary'));
684661
$('#attribute-table-panel-' + cleanName).toggleClass('visible', !$(this).hasClass('btn-primary'));
685662
$(this).toggleClass('btn-primary');
686-
687-
refreshDatatableSize('#attribute-layer-main-'+ cleanName);
688663
return false;
689664
});
690665
}
@@ -1387,28 +1362,12 @@ var lizAttributeTable = function() {
13871362

13881363
lConfig['alias'] = cAliases;
13891364
// Datatable configuration
1390-
if ( !$.fn.dataTable.isDataTable( aTable ) ) {
1391-
// Search while typing in text input
1392-
// Deactivate if too many items
1393-
var searchWhileTyping = true;
1394-
1395-
var myDom = '<<t>ipl>';
1396-
if( searchWhileTyping ) {
1397-
$('#attribute-layer-search-' + cleanName).on( 'keyup', function (e){
1398-
var searchVal = this.value;
1399-
lizdelay(function(){
1400-
oTable.fnFilter( searchVal );
1401-
}, 500 );
1402-
});
1403-
}else{
1404-
myDom = '<<t>ipl>';
1405-
}
1406-
1365+
if ( !DataTable.isDataTable( aTable ) ) {
14071366
const datatablesUrl = globalThis['lizUrls'].wms.replace('service', 'datatables');
14081367
const params = globalThis['lizUrls'].params;
14091368
params['layerId'] = lConfig.id;
14101369

1411-
$( aTable ).dataTable({
1370+
const oTable = new DataTable(aTable, {
14121371
serverSide: true
14131372
,ajax: {
14141373
url: datatablesUrl + '?' + new URLSearchParams(params).toString(),
@@ -1468,17 +1427,17 @@ var lizAttributeTable = function() {
14681427
}
14691428
}
14701429
,columns: columns
1471-
,initComplete: function(settings, json) {
1472-
const api = new $.fn.dataTable.Api(settings);
1473-
const tableId = api.table().node().id;
1474-
const featureType = tableId.split('attribute-layer-table-')[1];
1430+
,initComplete: function(settings) {
1431+
// Refresh size of datatable after data has been loaded
1432+
refreshDatatableSize('#'+$('#bottom-dock div.bottom-content.active div.attribute-layer-main').attr('id'));
14751433

14761434
// Trigger event telling attribute table is ready
1477-
lizMap.events.triggerEvent("attributeLayerContentReady",
1478-
{
1479-
'featureType': featureType
1480-
}
1481-
);
1435+
const tableId = settings.api.table().node().id;
1436+
const featureType = tableId.split('attribute-layer-table-')[1];
1437+
1438+
lizMap.events.triggerEvent("attributeLayerContentReady",{
1439+
'featureType': featureType,
1440+
});
14821441
}
14831442
,order: [[ firstDisplayedColIndex, "asc" ]]
14841443
,language: { url:globalThis['lizUrls']["dataTableLanguage"] }
@@ -1496,43 +1455,35 @@ var lizAttributeTable = function() {
14961455
thumbnail.setAttribute('src', lizUrls.media+'?repository='+lizUrls.params.repository+'&project='+lizUrls.params.project+'&path='+thumbnail.dataset.src);
14971456
}
14981457
}
1499-
,dom: myDom
15001458
,pageLength: 50
1501-
,scrollY: '95%'
1502-
,scrollX: '100%'
1503-
} );
1504-
1505-
var oTable = $( aTable ).dataTable();
1506-
1507-
if( !searchWhileTyping )
1508-
$('#attribute-layer-search-' + cleanName).hide();
1509-
1510-
// Bind button which clears top-left search input content
1511-
$('#attribute-layer-search-' + cleanName).next('.clear-layer-search').click(function(){
1512-
$('#attribute-layer-search-' + cleanName).val('').focus().keyup();
1459+
,scrollY: '95%' // Used to init but refreshDatatableSize() does the job of setting the height
1460+
,layout: {
1461+
topStart: null,
1462+
topEnd: null,
1463+
bottomStart: ['info', 'pageLength'],
1464+
bottomEnd: {
1465+
paging: {
1466+
firstLast: false
1467+
}
1468+
},
1469+
}
15131470
});
15141471

15151472
// Unbind previous events on page
1516-
$( aTable ).on( 'page.dt', function() {
1473+
oTable.on( 'page', function() {
15171474
// unbind previous events
15181475
$(aTable +' tr').unbind('click');
15191476
$(aTable +' tr td button').unbind('click');
15201477
});
15211478

15221479
// Bind events when drawing table
1523-
$( aTable ).on( 'draw.dt', function() {
1480+
oTable.on( 'draw', function() {
15241481

15251482
$(aTable +' tr').unbind('click');
15261483
$(aTable +' tr td button').unbind('click');
15271484

15281485
// Bind event when users click anywhere on the table line to highlight
15291486
bindTableLineClick(aName, aTable);
1530-
1531-
// Refresh size
1532-
var mycontainerId = $('#bottom-dock div.bottom-content.active div.attribute-layer-main').attr('id');
1533-
1534-
refreshDatatableSize('#' + mycontainerId);
1535-
15361487
return false;
15371488

15381489
});
@@ -1547,8 +1498,6 @@ var lizAttributeTable = function() {
15471498
lizMap.mainLizmap.edition.fetchEditableFeatures([lConfig.id]);
15481499
}
15491500

1550-
refreshDatatableSize('#'+$('#bottom-dock div.bottom-content.active div.attribute-layer-main').attr('id'))
1551-
15521501
if (aCallback)
15531502
aCallback(aName,aTable);
15541503

@@ -2069,7 +2018,7 @@ var lizAttributeTable = function() {
20692018
var tableLayerName = $(this).parents('div.dataTables_wrapper:first').prev('input.attribute-table-hidden-layer').val()
20702019
// Get parent table for the feature type
20712020
if ( tableLayerName
2072-
&& $.fn.dataTable.isDataTable( $(this) )
2021+
&& DataTable.isDataTable( $(this) )
20732022
&& lizMap.cleanName( featureType ) == tableLayerName
20742023
){
20752024

@@ -2932,7 +2881,7 @@ var lizAttributeTable = function() {
29322881
var tableLayerName = $(this).parents('div.dataTables_wrapper:first').prev('input.attribute-table-hidden-layer').val()
29332882

29342883
if ( tableLayerName
2935-
&& $.fn.dataTable.isDataTable( $(this) )
2884+
&& DataTable.isDataTable( $(this) )
29362885
&& lizMap.cleanName( featureType ) == tableLayerName
29372886
){
29382887
var zTable = '#' + tableId;
@@ -3039,14 +2988,10 @@ var lizAttributeTable = function() {
30392988
var h = $(container + ' div.attribute-layer-content').height() ? $(container + ' div.attribute-layer-content').height() : 0;
30402989

30412990
h -= $(container + ' thead').height() ? $(container + ' thead').height() : 0;
3042-
h -= $(container + ' div.dataTables_paginate').height() ? $(container + ' div.dataTables_paginate').height() : 0;
3043-
h -= $(container + ' div.dataTables_filter').height() ? $(container + ' div.dataTables_filter').height() : 0;
3044-
h -= 20;
3045-
3046-
dtable.parent('div.dataTables_scrollBody').height(h);
2991+
h -= $(container + ' div.dt-paging').height() ? $(container + ' div.dt-paging').height() : 0;
2992+
h -= 25;
30472993

3048-
// Width : adapt columns size
3049-
dtable.DataTable().tables().columns.adjust();
2994+
dtable.parent('div.dt-scroll-body').height(h);
30502995
}
30512996

30522997
/**
@@ -3525,41 +3470,15 @@ var lizAttributeTable = function() {
35253470
}
35263471
},
35273472

3528-
bottomdocksizechanged: function(evt) {
3473+
bottomdocksizechanged: function() {
35293474
var mycontainerId = $('#bottom-dock div.bottom-content.active div.attribute-layer-main').attr('id');
35303475
refreshDatatableSize('#'+mycontainerId);
3531-
},
3532-
dockopened: function(evt) {
3533-
if($('#mapmenu li.attributeLayers').hasClass('active')){
3534-
var mycontainerId = $('#bottom-dock div.bottom-content.active div.attribute-layer-main').attr('id');
3535-
refreshDatatableSize('#'+mycontainerId);
3536-
}
3537-
},
3538-
dockclosed: function(evt) {
3539-
if($('#mapmenu li.attributeLayers').hasClass('active')){
3540-
var mycontainerId = $('#bottom-dock div.bottom-content.active div.attribute-layer-main').attr('id');
3541-
refreshDatatableSize('#'+mycontainerId);
3542-
}
3543-
},
3544-
rightdockopened: function(evt) {
3545-
if($('#mapmenu li.attributeLayers').hasClass('active')){
3546-
var mycontainerId = $('#bottom-dock div.bottom-content.active div.attribute-layer-main').attr('id');
3547-
refreshDatatableSize('#'+mycontainerId);
3548-
}
3549-
},
3550-
rightdockclosed: function(evt) {
3551-
if($('#mapmenu li.attributeLayers').hasClass('active')){
3552-
var mycontainerId = $('#bottom-dock div.bottom-content.active div.attribute-layer-main').attr('id');
3553-
refreshDatatableSize('#'+mycontainerId);
3554-
}
35553476
}
3556-
35573477
}); // lizMap.events.on end
35583478

35593479
// Extend lizMap API
35603480
lizMap.getAttributeFeatureData = getAttributeFeatureData;
35613481

35623482
} // uicreated
35633483
});
3564-
35653484
}();

‎lizmap/www/assets/css/map.css‎

Lines changed: 0 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1289,88 +1289,6 @@ SubDock
12891289
font-size: 1em;
12901290
}
12911291

1292-
#attributeLayers .tab-content .attribute-content div.dataTables_wrapper div.dataTables_paginate ul.pagination {
1293-
margin: 2px 0;
1294-
white-space: nowrap;
1295-
}
1296-
1297-
#attributeLayers .tab-content .attribute-content .pagination {
1298-
display: inline-block;
1299-
padding-left: 0;
1300-
margin: 20px 0;
1301-
border-radius: 4px;
1302-
}
1303-
1304-
#attributeLayers .tab-content .attribute-content .pagination > li {
1305-
display: inline;
1306-
box-sizing: border-box;
1307-
padding:0;
1308-
margin:0;
1309-
border:0;
1310-
border-radius:0;
1311-
}
1312-
1313-
#attributeLayers .tab-content .attribute-content .pagination > li > a,
1314-
#attributeLayers .tab-content .attribute-content .pagination > li > span {
1315-
position: relative;
1316-
float: left;
1317-
padding: 6px 12px;
1318-
margin-left: -1px;
1319-
line-height: 1.4286;
1320-
color: #337ab7;
1321-
text-decoration: none;
1322-
background-color: #fff;
1323-
border: 1px solid #ddd;
1324-
}
1325-
1326-
#attributeLayers .tab-content .attribute-content .pagination > li > a:focus,
1327-
#attributeLayers .tab-content .attribute-content .pagination > li > a:hover,
1328-
#attributeLayers .tab-content .attribute-content .pagination > li > span:focus,
1329-
#attributeLayers .tab-content .attribute-content .pagination > li > span:hover {
1330-
z-index: 3;
1331-
color: #23527c;
1332-
background-color: #eee;
1333-
border-color: #ddd;
1334-
}
1335-
1336-
#attributeLayers .tab-content .attribute-content .pagination > .active > a,
1337-
#attributeLayers .tab-content .attribute-content .pagination > .active > a:focus,
1338-
#attributeLayers .tab-content .attribute-content .pagination > .active > a:hover,
1339-
#attributeLayers .tab-content .attribute-content .pagination > .active > span,
1340-
#attributeLayers .tab-content .attribute-content .pagination > .active > span:focus,
1341-
#attributeLayers .tab-content .attribute-content .pagination > .active > span:hover {
1342-
z-index: 2;
1343-
color: #fff;
1344-
cursor: default;
1345-
background-color: #337ab7;
1346-
border-color: #337ab7;
1347-
}
1348-
1349-
#attributeLayers .tab-content .attribute-content .pagination > .disabled > a,
1350-
#attributeLayers .tab-content .attribute-content .pagination > .disabled > a:focus,
1351-
#attributeLayers .tab-content .attribute-content .pagination > .disabled > a:hover,
1352-
#attributeLayers .tab-content .attribute-content .pagination > .disabled > span,
1353-
#attributeLayers .tab-content .attribute-content .pagination > .disabled > span:focus,
1354-
#attributeLayers .tab-content .attribute-content .pagination > .disabled > span:hover {
1355-
color: #777;
1356-
cursor: not-allowed;
1357-
background-color: #fff;
1358-
border-color: #ddd;
1359-
}
1360-
1361-
#attributeLayers .tab-content .attribute-content .pagination > li:first-child > a,
1362-
#attributeLayers .tab-content .attribute-content .pagination > li:first-child > span {
1363-
margin-left: 0;
1364-
border-top-left-radius: 4px;
1365-
border-bottom-left-radius: 4px;
1366-
}
1367-
1368-
#attributeLayers .tab-content .attribute-content .pagination > li:last-child > a,
1369-
#attributeLayers .tab-content .attribute-content .pagination > li:last-child > span {
1370-
border-top-right-radius: 4px;
1371-
border-bottom-right-radius: 4px;
1372-
}
1373-
13741292
#attribute-summary.attribute-content.bottom-content{
13751293
overflow:auto;
13761294
}
@@ -1401,7 +1319,6 @@ SubDock
14011319
}
14021320

14031321
.attribute-layer-content {
1404-
overflow:auto;
14051322
height: 90%;
14061323
clear:right;
14071324
}

0 commit comments

Comments
 (0)