Hello, I have dynamically loaded the DOM many tables started in this way (all empty to be filled in later):
<div class="panel-body tabla1 "> <!-- INICIO -->
<a href="#item-0" class="list-group-item" data-toggle="collapse">
<i class="glyphicon glyphicon-chevron-right"></i> #1
</a>
<div class="list-group collapse" id="item-0" data-id="0">
<table id="exampleTablaDinamica0" class="table table-striped table-bordered dt-responsive" style="width:100%"></table>
</div>
<!-- INICIO -->
<a href="#item-1" class="list-group-item" data-toggle="collapse">
<i class="glyphicon glyphicon-chevron-right"></i> #2
</a>
<div class="list-group collapse" id="item-1" data-id="1">
<table id="exampleTablaDinamica1" class="table table-striped table-bordered dt-responsive" style="width:100%"></table>
</div>
<!-- INICIO -->
<a href="#item-2" class="list-group-item" data-toggle="collapse">
<i class="glyphicon glyphicon-chevron-right"></i> #3
</a>
<div class="list-group collapse" id="item-2" data-id="2">
<table id="exampleTablaDinamica2" class="table table-striped table-bordered dt-responsive" style="width:100%"></table>
</div>
<!-- INICIO -->
<a href="#item-3" class="list-group-item" data-toggle="collapse">
<i class="glyphicon glyphicon-chevron-right"></i> #4
</a>
<div class="list-group collapse" id="item-3" data-id="3">
<table id="exampleTablaDinamica3" class="table table-striped table-bordered dt-responsive" style="width:100%"></table>
</div>
<!-- INICIO -->
<a href="#item-4" class="list-group-item" data-toggle="collapse">
<i class="glyphicon glyphicon-chevron-right"></i> #5
</a>
<div class="list-group collapse" id="item-4" data-id="4">
<table id="exampleTablaDinamica4" class="table table-striped table-bordered dt-responsive" style="width:100%"></table>
</div>
<!-- INICIO -->
<a href="#item-5" class="list-group-item" data-toggle="collapse">
<i class="glyphicon glyphicon-chevron-right"></i> #6
</a>
<div class="list-group collapse" id="item-5" data-id="5">
<table id="exampleTablaDinamica5" class="table table-striped table-bordered dt-responsive" style="width:100%"></table>
</div>
<!-- INICIO -->
<a href="#item-6" class="list-group-item" data-toggle="collapse">
<i class="glyphicon glyphicon-chevron-right"></i> #7
</a>
<div class="list-group collapse" id="item-6" data-id="6">
<table id="exampleTablaDinamica6" class="table table-striped table-bordered dt-responsive" style="width:100%"></table>
</div>
<!-- INICIO -->
<a href="#item-7" class="list-group-item" data-toggle="collapse">
<i class="glyphicon glyphicon-chevron-right"></i> #8
</a>
<div class="list-group collapse" id="item-7" data-id="7">
<table id="exampleTablaDinamica7" class="table table-striped table-bordered dt-responsive" style="width:100%"></table>
</div>
<!-- INICIO -->
<a href="#item-8" class="list-group-item" data-toggle="collapse">
<i class="glyphicon glyphicon-chevron-right"></i> #9
</a>
<div class="list-group collapse" id="item-8" data-id="8">
<table id="exampleTablaDinamica8" class="table table-striped table-bordered dt-responsive" style="width:100%"></table>
</div>
</div>
as the query delivers all numbered and unique.
The question I want to ask is how can I build x tables each with columns and variable records using DataTables (www.datatables.org). I have followed these examples and I have approached this result.
What I can not do is that the tables appear when I open their parent that corresponds to a collapsible element.
I hope you help me here I leave the code:
I update the latest
<div class="panel-body tabla1 "> <!-- INICIO -->
<a href="#item-0" class="list-group-item" data-toggle="collapse">
<i class="glyphicon glyphicon-chevron-right"></i> #1
</a>
<div class="list-group collapse" id="item-0" data-id="0">
<table id="exampleTablaDinamica0" class="table table-striped table-bordered dt-responsive" style="width:100%"></table>
</div>
<!-- INICIO -->
<a href="#item-1" class="list-group-item" data-toggle="collapse">
<i class="glyphicon glyphicon-chevron-right"></i> #2
</a>
<div class="list-group collapse" id="item-1" data-id="1">
<table id="exampleTablaDinamica1" class="table table-striped table-bordered dt-responsive" style="width:100%"></table>
</div>
<!-- INICIO -->
<a href="#item-2" class="list-group-item" data-toggle="collapse">
<i class="glyphicon glyphicon-chevron-right"></i> #3
</a>
<div class="list-group collapse" id="item-2" data-id="2">
<table id="exampleTablaDinamica2" class="table table-striped table-bordered dt-responsive" style="width:100%"></table>
</div>
<!-- INICIO -->
<a href="#item-3" class="list-group-item" data-toggle="collapse">
<i class="glyphicon glyphicon-chevron-right"></i> #4
</a>
<div class="list-group collapse" id="item-3" data-id="3">
<table id="exampleTablaDinamica3" class="table table-striped table-bordered dt-responsive" style="width:100%"></table>
</div>
<!-- INICIO -->
<a href="#item-4" class="list-group-item" data-toggle="collapse">
<i class="glyphicon glyphicon-chevron-right"></i> #5
</a>
<div class="list-group collapse" id="item-4" data-id="4">
<table id="exampleTablaDinamica4" class="table table-striped table-bordered dt-responsive" style="width:100%"></table>
</div>
<!-- INICIO -->
<a href="#item-5" class="list-group-item" data-toggle="collapse">
<i class="glyphicon glyphicon-chevron-right"></i> #6
</a>
<div class="list-group collapse" id="item-5" data-id="5">
<table id="exampleTablaDinamica5" class="table table-striped table-bordered dt-responsive" style="width:100%"></table>
</div>
<!-- INICIO -->
<a href="#item-6" class="list-group-item" data-toggle="collapse">
<i class="glyphicon glyphicon-chevron-right"></i> #7
</a>
<div class="list-group collapse" id="item-6" data-id="6">
<table id="exampleTablaDinamica6" class="table table-striped table-bordered dt-responsive" style="width:100%"></table>
</div>
<!-- INICIO -->
<a href="#item-7" class="list-group-item" data-toggle="collapse">
<i class="glyphicon glyphicon-chevron-right"></i> #8
</a>
<div class="list-group collapse" id="item-7" data-id="7">
<table id="exampleTablaDinamica7" class="table table-striped table-bordered dt-responsive" style="width:100%"></table>
</div>
<!-- INICIO -->
<a href="#item-8" class="list-group-item" data-toggle="collapse">
<i class="glyphicon glyphicon-chevron-right"></i> #9
</a>
<div class="list-group collapse" id="item-8" data-id="8">
<table id="exampleTablaDinamica8" class="table table-striped table-bordered dt-responsive" style="width:100%"></table>
</div>
</div>
When I use the call of each Datatable it does not fill the content with the given json.
This is the event associated with the collaps in exampleTablaDinamica0
exampleTablaDinamica0 goes from zero to exampleTablaDinamicaN 0..n
show.bs.collapse
Just like the months tables, all the JSON file is represented. It is very good to apreatr the f12 key and see the transmission in network or "network"
I would appreciate any help
I can just for a moment keep this link to see the problem --- > link
(if any make a short update to reply the issue within an spiipet will be appreciated)