Why after destroy datatable and empty the reload data but without column name.
Why after destroy datatable and empty the reload data but without column name.
marco.rudello@gmail.com
Posts: 12Questions: 4Answers: 0
Hi,
I need to reload table with new e different column:
I create first datatable:
var tb = $("#grdScarti").DataTable({
"ajax": "DATA/employesOBJ.txt",
"columns": [
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "extn" },
{ "data": "start_date" },
{ "data": "salary" }]
});
after I destroy e reload with new data and column:
$('#Button1').on('click', function () {
$.getJSON('DATA/customersOBJ.txt', null,function (json) {
tb.destroy();
$('#grdScarti').empty(); // empty in case the columns change
tb = $('#grdScarti').DataTable({
columns: json.columns,
data: json.data
I look any data but without colomn name. What wrong?
Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
This discussion has been closed.
Answers
That looks like it should work to me. Could you link to a test case showing the issue please?
Allan
Sorry but this project is'nt on internet. I send you html page and json file. With this you can try it. regards
{
"columns": [
],
"data":[
{
"name":"Marco Rudello",
"position":"System Architect",
"salary":"$320,800",
"office":"Edinburgh",
"extn":"5421"
},
{
"name":"Giovanni Chirico",
"position":"Accountant",
"salary":"$170,750",
"office":"Tokyo",
"extn":"8422"
},
{
"name":"Antonella Preziosi",
"position":"Junior Technical Author",
"salary":"$86,000",
"office":"San Francisco",
"extn":"1562"
},
{
"name":"Pippo Nucera",
"position":"System Architect",
"salary":"$320,800",
"office":"Edinburgh",
"extn":"5421"
},
{
"name":"Anselmo Dominic",
"position":"Accountant",
"salary":"$170,750",
"office":"Tokyo",
"extn":"8422"
},
{
"name":"laura Capua",
"position":"Junior Technical Author",
"salary":"$86,000",
"office":"San Francisco",
"extn":"1562"
},
{
"name":"Alessandro Barilla",
"position":"Customer Support",
"salary":"$112,000",
"office":"New York",
"extn":"4226"
}
]
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>SCTR - Estrazione Scarti </title>
<!-- script jquery-->
<script src="js/jquery-2.2.3.min.js"></script>
<script src="scripts/bootstrap.min.js"></script>
<script src="media/js/jquery.dataTables.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="media/css/jquery.dataTables.min.css" rel="stylesheet">
<!-- Bootstrap -->
<!-- Fav and touch icons -->
<!-- <link rel="apple-touch-icon-precomposed" href="images/fav-57.png">-->
<!--<link rel="shortcut icon" href="images/fav.png">-->
</head>
<body ><input id="Button1" type="button" value="button" />
<table width="100%" class="display" id="grdScarti">
<thead>
<tr>
<!--<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>-->
</tr>
</thead>
<tfoot>
<tr>
<!--<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>-->
</tr>
</tfoot>
</table>
<!-- Footer Ends -->
<!-- Template JS Files -->
<script>
$('#Button1').on('click', function () {
$.getJSON('DATA/customersOBJ.txt', null,function (json) {
tb.destroy();
$('#grdScarti').empty(); // empty in case the columns change
tb = $('#grdScarti').DataTable({
columns: json.columns,
data: json.data
});
});
});
var tb = $("#grdScarti").DataTable({
"ajax": "DATA/employesOBJ.txt",
"columns": [
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "extn" },
{ "data": "start_date" },
{ "data": "salary" }]
});
function test(){
tb.ajax.url("DATA/employes.txt");
tb.ajax.reload();
}
</script>
</body>
</html>
If possible to answer a this problem?
thanks
I would need a link to a page showing the issue.
Information on how to create a test page, if you can't provide a link to your own page can be found here.
Thanks,
Allan