JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<select id="biblioteki" onchange="WyswietlTabele()">
<!-- <option value=' '></option> -->
</select>
<br />
<br />
<div class="container">
<h1 align="center">Show JSON Data in Jquery Datatables</h1><br />
<h3 align="center">Employee Database</h3><br />
<table id="data-table" class="table table-bordered">
<thead>
<tr>
<th>Id</th>
<th>Isbn</th>
<th>Tytul</th>
</tr>
</thead>
</table>
</div>
<script>
function WyswietlTabele() {
$('#data-table').DataTable( {
'ajax': {
'url': 'listaKsiazek2.json',
'dataSrc' : 'details.lista.$( "#biblioteki option:selected" ).val().ksiazki'
},
columns : [
{ data : 'id', title : 'id' },
{ data : 'name', title : 'name' }
]
});
}
</script>
</body>
JavaScript
$.getJSON('listaKsiazek.json', function(data)
{
for (var i = 0; i < data['details']['lista'].length ; i++)
{
$('#biblioteki').append($('<option>', {
value: data['details'][i],
text: data['details']['lista'][i]['baza']
}));
}
});