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 ?

purwapurwa Posts: 1Questions: 1Answers: 0
edited November 2015 in Free community support

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..

This discussion has been closed.