Dynamic table with pre-filtered data.

gbiurr

Hi.
I would appreciate any help, since I'm a newbie on js.
I did a web map which is collecting data from a remote geojson file.
Markers shown on the map can be filtered via Leaflet Tag Filter Buttons, using tags stored in another json file.

Most of the js is stored within the 3mapCP.js, called from the html

I would like to add a dynamic html table at the bottom collecting only those data already filtered.
I guess it can be done, but I have no clue on how to proceed.

Here are some pieces of the code which is correctly running now. Full example can be seen here

This is getting all properties to display the markers and add them to the map

$.getJSON("https://URL_HERE_map-CP.geojson",function(data){
  var IbSpid = L.geoJson(data,{
    pointToLayer: function(feature,latlng){
      var marker = L.marker(latlng, { tags: feature.properties.Gen.concat(feature.properties.Fam, feature.properties.Spec, 
feature.properties.Is_unique, feature.properties.Prov, feature.properties.Cou, feature.properties.Date_Range)});
      return marker;
    }
  });
  IbSpid.addTo(mcg);

These buttons are getting the tags to add to each filter (shown only two filters) and filtering on click.

  $.getJSON('https://URL_HERE_tagsCP.json', function(data) {
var unique = L.control.tagFilterButton({
  data: data.unique,
  filterOnEveryClick: true,
  icon: '<span style="font-size:1.2rem"><b>First records&emsp;</b></span><i class="fas fa-spider" style="font-size:2rem;  
vertical-align: middle;color:black;"></i>',
}).addTo(map);
unique.enableMCG(mcg);
var fam = L.control.tagFilterButton({
  data: data.fam,
  filterOnEveryClick: true,
  icon: '<i class="fas fa-spider" style="font-size:2rem;vertical-align: middle;color:red;"> Family</i>',
}).addTo(map);
fam.enableMCG(mcg);
jQuery('.easy-button-button').click(function() {
target = jQuery('.easy-button-button').not(this);
target.parent().find('.tag-filter-tags-container').css({
    'display' : 'none',
});
});
});

And here the table added at the bottom, which is collecting all data from the geojson file.
I guess there's something to modify here in order to get only those filtered data instead of all of them.

function getData(cb_func) {
$.ajax({
  url: "https://URL_HERE_map-CP.geojson",
  success: cb_func
});
}
$(document).ready(function() {
  getData(function( data ) {
  var columns = [];
  data = JSON.parse(data);
  var prop = data.features[0].properties;
  for (var i in prop) {
     columns.push({data: 'properties.' + i, title: i});
  }
    $('#NewARAIB').DataTable( {
    columnDefs: [{targets: [ 0 ], visible: false, searchable: false},
                {targets: [ 4 ], visible: false, searchable: false},
                {targets: [ 5 ], visible: false, searchable: false},
                {targets: [ 6 ], visible: false, searchable: false},
                {targets: [ 7 ], visible: false, searchable: false},
                {targets: [ 9 ], visible: false, searchable: false},
                {targets: [ 12 ], visible: false, searchable: false},
                {targets: [ 13 ], visible: false, searchable: false},
                {targets: [ 15 ], visible: false, searchable: false},
                {targets: [ 16 ], visible: false, searchable: false}
    ],
    responsive: true,
    data: data.features,   //get the data under features
    columns: columns,
    dom: 'Bfrtip', 
    buttons: [
        'pageLength', 'copy', 'csv', 'excel', 'print', {
        extend: 'pdfHtml5',
        orientation: 'landscape',
        pageSize: 'A4' }
    ]
    } );

  });

} );

Thank you very much in advance.
Best.
G.