У меня есть три таблицы, и я показываю каждый из них, используя элемент списка выбора, и чтобы ajax и jquery возвращали таблицы. Я хочу, чтобы всякий раз, когда я выбираю новую таблицу из списка, ajax должен приносить мне данные только из этой таблицы.
Вот моя форма:
<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> Проблема не в том, что я не получаю желаемого результата. Я получаю результат, который я хочу, поэтому я чувствую, что мне не нужно добавлять коды из findGrades.php.
вот мой сценарий:
$(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(''); } }); });
Проблема, с которой я столкнулась, – это когда я выбираю таблицу, она приносит результат в порядке, но когда я выбираю новую таблицу, она добавляет новый результат к старому результату.
Пример: таблица 1:
таблица 2 1. кошка 2. крыса 3. собака 3. коза
В то время как результат 2 должен показывать только «собака» и «коза». Я понимаю, что это связано с тем, как я добавляю данные $ ("# periodTable"). Append (htmlData); , Я попытался изменить его на этот $ ("# periodTable"). Html (htmlData); который возвращает только один элемент из таблицы типа «кот» из таблицы 1 и «крыса» из таблицы 2
Как я могу эффективно заставить это работать. Дайте мне знать, нужна ли дополнительная информация.
Обновление: просто добавил мой html по запросу. Также я включил существенный аспект, о котором я забыл упомянуть «Datables», который я также добавил.
Не видя HTML для вашей страницы, я могу только предположить, что вы начинаете с пустой таблицы. Ваш первый вызов AJAX добавляет первый набор данных. Ваш второй вызов добавляет свои данные, потому что вы просили его сделать это.
Чтобы исправить это, вы должны заменить пустую таблицу в начале вашей функции success() . Затем вы можете безопасно добавлять новые данные, будь то в первый раз, когда вы вызываете это или n-й раз.
htmlData переменную htmlData перед циклом и напишите $("#periodTable").html(htmlData); после цикла.
$(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){ var htmlData=""; for (var count = 0; count < data.length; count++) { 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>'; } } $("#periodTable").html(htmlData); } }); } else { $("#periodTable").html(''); } }); });
Я думаю, вам нужно просто очистить html $("#periodTable") до его заполнения:
$(document).ready(function() { $('#term').on('change', function() { /* Act on the event */ var term = $('#term').val(); //---> HERE BLANK THE periodTable <--- $("#periodTable").html(""); if (term != '') { $.ajax({ url:"findGrades.php", type:"post", data:{"term":term}, dataType:"json", success:function(data){ 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); } } }); } /* ELSE COULD BE REMOVED else { $("#periodTable").html(''); }*/ }); });