Вот ради интереса посмотрел, как работать с этим кодом от jQuery DataTable...
Таблица правильно отображается, также сделал фильтр (строки №№187–198), но он не совсем правильно работает (нужно убрать из списка модели после выбора бренда в списке, и наоборот), но я думаю, что такой фильтр не нужен, поскольку поиск работает по умолчанию!
Я скачал все данные из вашей базы и поместил в data.json для этого примера. Вам нужно переделать скрипт на сервере, чтобы он возвращал
все данные и запрашивать эти данные
только один раз. Вот пример...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.jqueryui.min.css">
<style>
body {
overflow-y: scroll;
font: 1em system-ui, Arial, sans-serif;
}
table#goodies {
white-space: nowrap;
letter-spacing: -0.025em;
font-size: 10px;
table-layout: fixed;
display: block;
overflow: auto;
}
#goodies-filter {
margin: 1em 0;
}
select, input {
border: 1px solid #CCC;
border-radius: 4px;
background-color: #FFF;
background-image: none;
color: #000;
font: inherit;
padding: 4px;
margin: 0;
box-sizing: border-box;
}
.counter-button {
all: unset;
font-weight: bold;
font-size: 200%;
color: red;
padding: 0 0.1em;
}
</style>
</head>
<body>
<div id="goodies-filter">
<label>
Бренд:
<select id="goodies-brand-filter">
<option value="">все</option>
</select>
</label>
<label>
Модель:
<select id="goodies-model-filter">
<option value="">все</option>
</select>
</label>
</div>
<table id="goodies" class="display" style="width:100%">
<thead>
<tr>
<th>Код</th>
<th>Бренд</th>
<th>Модель</th>
<th>P, LT</th>
<th>Размер</th>
<th>ЛГ</th>
<th>Индекс</th>
<th>Иное</th>
<th>Цена</th>
<th>Остаток</th>
<th>Заказ</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Код</th>
<th>Бренд</th>
<th>Модель</th>
<th>P, LT</th>
<th>Размер</th>
<th>ЛГ</th>
<th>Индекс</th>
<th>Иное</th>
<th>Цена</th>
<th>Остаток</th>
<th>Заказ</th>
</tr>
</tfoot>
</table>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.jqueryui.min.js"></script>
<script>
var table = $("#goodies").DataTable({
processing: true,
autoWidth: true,
pageLength: 10,
ajax: "https://cdn.glitch.com/348d485e-4ba6-4841-a41e-5865874b2d66/data.json",
columnDefs: [
{ width: "70px", targets: [0] }, //код
{ width: "50px", targets: [1] }, //бренд
{ width: "200px", targets: [2] }, //модель
{ width: "51px", targets: [3] }, //P,L
{ width: "150px", targets: [4] },// размер
{ width: "44px", targets: [5] },// ЛГ
{ width: "50px", targets: [6] }, //индекс
{ width: "136px", targets: [7] }, //иное
{
width: "70px", targets: [8],
render: $.fn.dataTable.render.number(' ', '.', 2, ' ', '')
}, //цена
{ width: "50px", targets: [9] }, //остаток
{
width: "50px", targets: [10], className: "goodies-order",
render: function (data, type, row) {
return [
'<button class="counter-button" data-inc="-1">−</button>',
'<input type="number" style="width: 5em;" min="0" max="' + row[9] + '">',
'<button class="counter-button" data-inc="+1">+</button>'
].join("")
}
} //заказ
],
language: {
processing: "Подождите...",
search: "Поиск:",
lengthMenu: "Показать _MENU_ записей",
info: "Записи с _START_ до _END_ из _TOTAL_ записей",
infoEmpty: "Записи с 0 до 0 из 0 записей",
infoFiltered: "(отфильтровано из _MAX_ записей)",
infoPostFix: "",
loadingRecords: "Загрузка записей...",
zeroRecords: "Записи отсутствуют.",
emptyTable: "В таблице отсутствуют данные",
paginate: {
first: "Первая",
previous: "Предыдущая",
next: "Следующая",
last: "Последняя"
},
aria: {
sortAscending: ": активировать для сортировки столбца по возрастанию",
sortDescending: ": активировать для сортировки столбца по убыванию"
},
select: {
rows: {
_: "Выбрано записей: %d",
"0": "Кликните по записи для выбора",
"1": "Выбрана одна запись"
}
}
}
});
table.on("init", function() {
$("#goodies-brand-filter").append(getUniqueItems(1));
$("#goodies-model-filter").append(getUniqueItems(2));
function getUniqueItems(column) {
return $.map(
Array.from(new Set(Array.from(table.column(column).data()))).sort(),
function (item) { return $("<option />").text(item); }
)
}
});
$("#goodies").on("click", ".counter-button", function(event) {
var button = $(event.target);
var inc = Number(button.attr("data-inc"));
var input = button.closest("td").find("input");
var min = Number(input.attr("min"));
var max = Number(input.attr("max"));
var value = Number(input.val());
input.val(Math.max(min, Math.min(value + inc, max)) || "");
});
$("#goodies-filter [id^='goodies-'][id$='-filter']").on("change", function() {
var brand = $("#goodies-brand-filter").val();
var model = $("#goodies-model-filter").val();
$("#goodies_filter input").val([brand, model].join(" ").trim()).trigger("input");
});
$("#goodies_filter input").on("input", function(event) {
if(event.originalEvent.isTrusted) {
$("#goodies-brand-filter").val("");
$("#goodies-model-filter").val("");
}
});
</script>
</body>
</html>