How to reload new data by ajax when click a button and clear the old data in table ?
How to reload new data by ajax when click a button and clear the old data in table ?
i have a simple script like this.
<body>
<form>
input :
<select name="input">
<option value="ajax.json">First Data</option>
<option value="ajax2.json">Second Data</option>
</select>
<input type="button" id="go" value="ok">
</form>
<script>
$("#go").on("click", function()
{
var result = $("select[name='input']").val();
//window.alert(result);
tbl = $('#example').DataTable( {
"ajax": hasil3,
"columns": [
{ "data": "name[, ]" },
{ "data": "hr.0" },
{ "data": "office" },
{ "data": "extn" },
{ "data": "hr.2" },
{ "data": "hr.1" }
]
} );
` });
</script>
<table id="example" class="display" cellspacing="0" width="100%">
<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>
</body>
when i click the button, the data displayed on the table but when i click the button again, there is an error abaout reinitialise..