Вопрос или проблема
Сценарий:
В таблице данных есть колонка с флажком id="sel_customer", относящаяся к идентификаторам клиентов, с несколькими строками.
Ajax-запрос (данные) возвращает строку со списком идентификаторов клиентов, которые я хочу выбрать при загрузке таблицы данных.
Как я могу выбрать флажок sel_customer таблицы данных в соответствии со списком идентификаторов, возвращаемых через Ajax?
ПРИМЕЧАНИЕ: иногда заходит в $(".sel_customer").each(function (i, el) {, но в большинстве случаев, похоже, игнорирует функцию.
Как я могу отметить только флажки с идентификаторами в таблице данных согласно строке идентификаторов через Ajax-запрос?
Таблица данных – При загрузке таблицы данных отметьте флажки идентификаторов в соответствии с идентификаторами данных Ajax.
Customers.php
<!-- Datatable1 -->
<table id="table1" class="display" style="width:100%">
<thead>
<tr>
<th width="5%">SEL</th>
<th width="5%">ID</th>
<th width="50%">NAME</th>
</tr>
</thead>
<tfoot>
<tr>
<!-- КОЛИЧЕСТВО СТОЛБЦОВ ВЫШЕ -->
<th colspan="3" style="text-align:left">
<button type="button" class="btn btn-secondary btn-sm" id="selecionar_tudo">Отметить все</button>
<button type="button" class="btn btn-danger btn-sm" id="insere_selecionados" disabled>Добавить отмеченного клиента</button>
</th>
<th style="text-align:left"></th>
</tr>
</tfoot>
<tbody></tbody>
</table>
Customer.js
customer.datatable = $('#table1').DataTable({
...datatable,
ajax: 'Customer.php',
cache: false,
columns: [{
orderable: false,
data: null,
render: function(data) {
return `<input type="checkbox" id='sel_customer' class="sel_customer" style="display: block; margin: 0 auto">`;
}
},
{
data: 'id',
},
{
data: 'name',
},
]
});
//Клиенты
$.ajax({
method: 'post',
url: '../Rota.php?send=customers
data: '',
dataType: 'html',
success: function(data) {
// возвращает 5,6,7,8 (возвращается список идентификаторов)
data = JSON.parse(data);
//data="5,6,7,8";
if(data.length > 0) {
alert(data); //5,6,7,8
$(".sel_customer").each(function (i, el) { //Кажется, игнорирует и не заходит в функцию
//Я думаю, что эта строка приносит идентификаторы таблицы данных, вот фрагмент кода для исправления
let vtr = $(this).closest("tr");
let vid = [vtr.find('td').eq(1).html()]; //получить идентификатор таблицы данных
if(vtr.find('td').eq(1).html() == 5) {//Если id = 5, отметьте строку в таблице данных
$(this).prop("checked", true);// это не работает
}
}).promise().done(function () {
//Это работает, но приносит только последнюю запись из .each, мне нужны они все
});
}
//return;
},
error: function(data, textStatus, errorThrown) {
console.log('Произошла ошибка');
console.log(textStatus);
console.log(errorThrown);
}
});
/*** ОТ ЗДЕСЬ КОД ХОРОШИЙ ***/
/*** Отметить все флажки таблицы данных ***/
var marcar_tudo = true;
var json = [];
var lista_inserir = [];
var itens="";
$("#selecionar_tudo").click(function () {
let checked = true;
if(!marcar_tudo) {
checked = false;
} else {
checked = true;
}
$(".sel_customer").each(function (i, el) {
$(el).prop("checked", checked);
})
btnInserirTodos()
if(!marcar_tudo) {
marcar_tudo = true;
$(this).html("Отметить все")
} else{
marcar_tudo = false;
$(this).html("Снять все")
}
})
customer.datatable.on('change', '.sel_customer', function () {
btnInserirTodos()
})
function btnInserirTodos() {
//очистить массив
lista_inserir = [];
let total = 0;
$(".sel_customer").each(function (i, el) {
if($(el).is(":checked")) {
let tr = $(el).closest("tr");
let id = [tr.find('td').eq(1).html()];
lista_inserir.push(id);
total++;
}
})
//Преобразовать массив в строку
itens = lista_inserir.toString();
if(total > 0) {
if(total == 1) {
$("#insere_selecionados").prop("disabled", false).html(`Добавить ${total} клиента`);
} else {
$("#insere_selecionados").prop("disabled", false).html(`Добавить ${total} клиентов`);
}
} else {
$("#insere_selecionados").prop("disabled", true).html("Добавить клиента");
}
}
$("#insere_selecionados").click(function () {
let json = {
ids: itens
};
Swal.fire({
icon: "success",
title: "Ваша работа была сохранена",
showConfirmButton: false,
timer: 1500
});
$("#insere_selecionados").prop("disabled", true).html("Вставка...");
return;
$.ajax({
method: 'POST',
url: 'Rota.php?action=insert',
data: json,
dataType: 'html',
success: function(data) {
//data = JSON.parse(data);
//alert(data);
if(data == 'Успешно вставлено') {
$("#table1").DataTable().ajax.reload();
}
$("#insere_selecionados").prop("disabled", true).html("Добавить клиента")
},
error: function(data, textStatus, errorThrown) {
console.log('Произошла ошибка');
console.log(textStatus);
console.log(errorThrown);
}
})//Ajax
})
.
Ответ или решение
Для того чтобы выделить только те чекбоксы с идентификаторами, которые совпадают с возвращаемыми значениями из AJAX-запроса, необходимо корректно обработать полученные данные и выполнить нужные операции с чекбоксами в DataTable. Рассмотрим этот процесс в деталях.
Шаг 1: Подготовка AJAX-запроса
Ваш AJAX-запрос должен извлекать идентификаторы клиентов из базы данных и возвращать их в формате строки, как например: "5,6,7,8". Убедитесь, что ваш PHP-скрипт, на который указывает ajax, правильно формирует и возвращает эти данные в формате JSON.
// Пример PHP кода для возвращения списка ID клиентов.
header('Content-Type: application/json');
$idList = implode(',', [5, 6, 7, 8]); // Пример данных, которые нужно вернуть
echo json_encode($idList);Шаг 2: Обработка данных в JavaScript
После получения строки с ID в JavaScript, необходимо разделить ее на массив и установить соответствующие чекбоксы как отмеченные.
Вот корректированный код для вашего сценария:
$.ajax({
method: 'post',
url: '../Rota.php?send=customers',
data: '',
dataType: 'text', // Убедитесь, что здесь текст, а не html
success: function(data) {
let idArray = data.split(','); // Преобразуем строку в массив
// Устанавливаем контроль чекбоксов
$(".sel_customer").each(function () {
let $checkbox = $(this);
let vtr = $checkbox.closest("tr");
let customerId = vtr.find('td').eq(1).text(); // Получаем ID из ячейки таблицы
// Проверяем, если ID есть в массиве
if (idArray.includes(customerId)) {
$checkbox.prop("checked", true); // Устанавливаем чекбокс как отмеченный
} else {
$checkbox.prop("checked", false); // Убираем галочку, если ID нет в массиве
}
});
},
error: function(data, textStatus, errorThrown) {
console.log('В ходе запроса произошла ошибка');
console.log(textStatus);
console.log(errorThrown);
}
});Шаг 3: Объяснение кода
- AJAX-запрос: Метод
GETотправляется на скрипт PHP, который возвращает строку идентификаторов клиентов. - Разделение строки на массив: Метод
split(',')разбивает строку по запятой и создает массив. - Итерация по чекбоксам: Метод
each()проходит по каждому элементу с классомsel_customer, где мы проверяем его идентификатор. - Проверка наличия ID: Используется метод
includesдля проверки, содержится ли ID в массивеidArray. Если находится, чекбокс отмечается.
Важные замечания
- Оптимизация селекторов: Постарайтесь ограничить использование селекторов jQuery для улучшения производительности. Например, используйте кэширование результатов, как в примере с
$checkbox. - Проблемы синхронизации: Если с показа таблицы и AJAX-запускается другой асинхронный код, убедитесь, что вы ожидаете, пока DataTable полностью загружена перед выполнением изменений.
Заключение
Таким образом, вы сможете легко отмечать необходимые чекбоксы в таблице DataTable на основании списка ID, полученного через AJAX-запрос. Следуя приведенным шагам, вам будет легче осуществлять управление выбором клиентов с использованием чекбоксов в интерфейсе вашего приложения.
Если будут возникать дополнительные вопросы, не стесняйтесь обращаться за помощью!