I have three tables and I'm displaying each one of them using a select list element and have ajax and jquery to return the tables. I want whenever I choose a new table from the list ajax should bring me data only from that table.
Here is my form:
<div class="panel">
<div class="panel-heading">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">Term</span>
<!-- I passed the tables name as values for a specific period -->
<select name="term" class="form-control" id="term">
<option value="">Select Period</option>
<option value="period_one">1st Period</option>
<option value="period_two">2nd Period</option>
</select>
</div>
</div>
<div class="panel-body">
<table class="table table-responsive table-bordered table-condensed table-striped table-hover" id="dataTable">
<thead>
<tr>
<th>Student Name</th>
<th>Subject</th>
<th>Class</th>
<th>Score</th>
</tr>
</thead>
<tbody id="periodTable">
</tbody>
</table>
</div>
</div>
The problem is not that I'm not getting the desired result. I'm getting the result that I want that's why I feel that there's no need for me to add codes from findGrades.php.
here is my script:
$(document).ready(function() {
$('#term').on('change', function() {
/* Act on the event */
var term = $('#term').val();
if (term != '') {
$.ajax({
url:"findGrades.php",
type:"post",
data:{"term":term},
dataType:"json",
success:function(data){
// Lfrankie solution
$("#periodTable").replaceWith('<tbody id="periodTable"></tbody>');
for (var count = 0; count < data.length; count++) {
var htmlData = '<tr><td data-type="text" data-name="student_name" data-pk="'+data[count].id+'" class="student_name">'+data[count].first_name+' '+data[count].middle_name+' '+data[count].surname+'</td>';
htmlData += '<td data-type="text" data-name="subject_name" data-pk="'+data[count].id+'" class="subject_name">'+data[count].subject_name+'</td>';
htmlData += '<td data-type="text" data-name="class_name" data-pk="'+data[count].id+'" class="class_name">'+data[count].class_name+'</td>';
if (data[count].score <= 69 ) {
htmlData += '<td style="color:red;" data-type="text" data-name="score" data-pk="'+data[count].id+'" class="score">'+data[count].score+'</td></tr>';
} else {
htmlData += '<td data-type="text" data-name="score" data-pk="'+data[count].id+'" class="score">'+data[count].score+'</td></tr>';
}
//I feel this is where my problem lies
$("#periodTable").append(htmlData);
}
$('#dataTable').DataTable();
}
});
} else {
$("#periodTable").html('');
}
});
});
The problem I'm having is whenever I select a table it brings the result fine, but when I select a new table it adds the new result to the old result.
Ex: table 1:
- cat
- rat
table 2 1. cat 2. rat 3. dog 3. goat
Whereas result 2 should only show 'dog' and 'goat'. I realize it's because of the way I'm adding data $("#periodTable").append(htmlData);. I have tried changing it to this $("#periodTable").html(htmlData); which only returns a single item from a table like 'cat' from table 1 and 'rat' from table 2
How can I effectively get this working. Let me know if more information is needed.
Update: Just added my html as requested by some. Also I included a essential aspect I forget to mention 'Datables', which I added also.
