JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<body>
<select id="biblioteki">
<!-- <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>
</script>
</body>
JavaScript
// dane na pozniej
var jsondata = {};
// inne źródło danych
$.getJSON('https://api.myjson.com/bins/7asp1', function(data)
{
jsondata = data;
for (var i = 0; i < data['details']['lista'].length ; i++)
{
$('#biblioteki').append($('<option>', {
value: i, // numer kolejnego elementu tablicy
text: data['details']['lista'][i]['biblioteka']
}));
}
// dodany onchange
$('#biblioteki').on('change', WyswietlTabele);
console.dir(jsondata);
// pokaz pierwszy element
WyswietlTabele();
});
// init datatables
var dt = $('#data-table').DataTable( {
data: {},
columns : [
{ data : 'id', title : 'id' },
{ data : 'name', title : 'name' }
]
});
function WyswietlTabele() {
console.log('dane: ' + jsondata);
console.dir(jsondata);
var idBiblioteki = $('#biblioteki').val(),
dane = idBiblioteki ? jsondata.details.lista[idBiblioteki].ksiazka : null;
console.dir(jsondata);
dt.clear();
if (dane){
dt.rows.add(dane).draw();
}
};