#jquery #checkbox #datatable
Вопрос:
Я использую таблицы данных в WordPress. Я создал флажок и в раскрывающемся списке выберите фильтр. Вы можете увидеть это ниже. Он хорошо работает в наборе кода и экспортирует HTML из набора кода, но когда я применяю это к странице WordPress, работает только функция выпадающего списка. Я изменил $ jQuery и добавил noConflict() в код JS, но это не сработало.
Может ли кто-нибудь, пожалуйста, помочь мне решить эту проблему.
$(document).ready(function() {
dataTable = $("#example").DataTable({
"columnDefs": [{
"targets": [3],
"visible": false
}]
});
/*
$('.filter-checkbox').on('change', function(e){
var searchTerms = []
$.each($('.filter-checkbox'), function(i,elem){
if($(elem).prop('checked')){
searchTerms.push("^" $(this).val() "$")
}
})
dataTable.column(2).search(searchTerms.join('|'), true, false, true).draw();
});
*/
$('input:checkbox').on('change', function() {
//build a regex filter string with an or(|) condition
var positions = $('input:checkbox[name="pos"]:checked').map(function() {
return '^' this.value '
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
<div class="container">
<div class="content">
<div class="row">
<div class="col-8">
<div class="filter-wrapper">
<input type="checkbox" name="pos" value="Wholesalers">Wholesalers
<input type="checkbox" name="pos" value="GDS">GDS
</div>
</div>
<div class="col-4">
<div class="btn-group submitter-group float-right">
<select class="form-control status-dropdown">
<option value="">Region</option>
<option value="Global">Global</option>
<option value="Australia">Australia</option>
<option value="United Kingdom">United Kingdom</option>
</select>
</div>
</div>
</div>
</div>
<table id="example" class="table">
<thead>
<tr>
<th>Name</th>
<th>Region</th>
<th>Industry</th>
<th>Hidden</th>
</tr>
</thead>
<tbody>
<tr>
<td>HaoQiao<br/>amp;<pamp;>About HaoQiaoamp;</pamp;><br/>amp;<span class=amp;quot;descamp;quot;amp;>amp;</spanamp;></td>
<td>China</td>
<td>Wholesalers</td>
<td>China</td>
</tr>
<tr>
<td>STGlobe<br/>amp;<pamp;>About STGlobeamp;</pamp;><br/>amp;<span class=amp;quot;descamp;quot;amp;>amp;</spanamp;></td>
<td>Global</td>
<td>Wholesalers</td>
<td>Global</td>
</tr>
<tr>
<td>Broadway Travel<br/>amp;<pamp;>About Broadway Travelamp;</pamp;><br/>amp;<span class=amp;quot;descamp;quot;amp;>amp;</spanamp;></td>
<td>United Kingdom</td>
<td>Wholesalers</td>
<td>United Kingdom</td>
</tr>
<tr>
<td>Abreu Online<br/>amp;<pamp;>About Abreu Onlineamp;</pamp;><br/>amp;<span class=amp;quot;descamp;quot;amp;>amp;</spanamp;></td>
<td>Global</td>
<td>Wholesalers</td>
<td>Global</td>
</tr>
<tr>
<td>Across Australia</td>
<td>Australia</td>
<td>Wholesalers</td>
<td>Australia</td>
</tr>
<tr>
<td>Galileo</td>
<td>Global</td>
<td>GDS</td>
<td>Global</td>
</tr>
<tr>
<td>WorldSpan</td>
<td>Global</td>
<td>GDS</td>
<td>Global</td>
</tr>
<tr>
<td>Apollo</td>
<td>Global</td>
<td>GDS</td>
<td>Global</td>
</tr>
</tbody>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
Комментарии:
1. Ваш код также работает во фрагменте кода, поэтому проблема, следовательно, должна заключаться в странице WordPress, на которой вы его запускаете. Нажмите F12, чтобы открыть devtools и проверить консоль на наличие ошибок
2. Спасибо, Рори, я пробовал то же самое. Я получил эту единственную ошибку, так как это ошибка по умолчанию, которая обычно отображается на моем сайте WordPress. Необнаруженная ошибка: JavaScript начальной загрузки требует jQuery версии 1.9.1 или выше, но ниже версии 3
;
}).get().join('|');
//filter in column 1, with an regex, no smart filtering, not case sensitive
dataTable.column(2).search(positions, true, false, false).draw(false);
});
$('.status-dropdown').on('change', function(e) {
var status = $(this).val();
$('.status-dropdown').val(status)
console.log(status)
//dataTable.column(6).search('\s' status '\s', true, false, true).draw();
dataTable.column(3).search(status).draw();
})
});
Комментарии:
1. Ваш код также работает во фрагменте кода, поэтому проблема, следовательно, должна заключаться в странице WordPress, на которой вы его запускаете. Нажмите F12, чтобы открыть devtools и проверить консоль на наличие ошибок
2. Спасибо, Рори, я пробовал то же самое. Я получил эту единственную ошибку, так как это ошибка по умолчанию, которая обычно отображается на моем сайте WordPress. Необнаруженная ошибка: JavaScript начальной загрузки требует jQuery версии 1.9.1 или выше, но ниже версии 3