JSFiddle - React, Tailwind, and code Playground

by 20yco

HTML

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="UTF-8">
        <title>Таблица товаров</title>
        <link rel="stylesheet" type="text/css" href="DataTables/datatables.min.css"/>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div class="price-filter wrapper">
            <label>Цена от:</label>
            <input class="price-from" type="text" placeholder="0">
            <label>до:</label>
            <input class="price-to" type="text" placeholder="10000">
            <input class="refresh" type="submit" value="Обновить">
        </div>
        <table class="products_table wrapper">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Название</th>
                    <th>Количество</th>
                    <th>Цена за единицу</th>
                    <th>Сумма</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script type="text/javascript" src="DataTables/datatables.min.js"></script>
        <script type="text/javascript" src="script.js"></script>
    </body>
</html>

CSS

* {
    font-family: Roboto, sans-serif;
    font-size: 1em;
}

:focus::-webkit-input-placeholder {
    color: transparent;
}

:focus:-moz-placeholder {
    color: transparent;
}

:focus:-ms-input-placeholder {
    color: transparent;
}

.wrapper {
    width: 50%;
    margin: 0 auto;
}

.price-filter {
    text-align: center;
    margin-bottom: 15px;
}

    .price-filter input {
        padding: 4px 7px;
        border: 1px solid #000000;
        outline: none;
    }

    .price-to {
        margin-right: 10px;
    }

.products_table {
    border: 1px solid black;
    border-bottom: none;
    border-collapse: collapse;
    counter-reset: rowNumber - 1;
}

    .products_table tr {
        counter-increment: rowNumber;
    }

    .products_table tr td:first-child::before {
        content: counter(rowNumber);
    }

th, tr {
    border-bottom: 1px solid black;
    text-align: left;
}

th, td {
    padding: 5px 10px;
}

th {
    background-color: #dedede;
}

.dataTables_wrapper {
    margin: 0 auto;
    width: 70%;
}

#DataTables_Table_0_filter {
    display: none;
}

JavaScript

$(document).ready(function() {

    fetch("http://exercise.develop.maximaster.ru/service/products/")
        .then(function (resp) {
            return resp.json();
        })
        .then(function (data) {
            drawTable(data);
            function drawTable(data) {
                for (let i = 0; i < data.length; i++) {
                    drawRow(i, data[i]);
                }
            }

            function drawRow(index, rowData) {
                let row = $("<tr class='table-data' />"),
                    productSum = rowData.quantity * rowData.price;
                $(".products_table tbody").append(row);
                row.append($("<td>" + index + "</td>"));
                row.append($("<td>" + rowData.name + "</td>"));
                row.append($("<td>" + rowData.quantity + "</td>"));
                row.append($("<td>" + rowData.price + "</td>"));
                row.append($("<td>" + productSum + "</td>"));
            }

            let table = $('.products_table').DataTable({
                paging: false,
                lengthChange: false,
                ordering: false,
                bInfo: false,
                language: {
                    zeroRecords: "Нет данных, попадающих под условие фильтра"
                }
            });

            $.fn.dataTable.ext.search.push(
                function( settings, data, dataIndex ) {
                    let min = parseInt( $('.price-from').val(), 10 ),
                        max = parseInt( $('.price-to').val(), 10 ),
                        priceForItem = parseFloat( data[3] ) || 0;

                    return (isNaN(min) && isNaN(max)) ||
                        (isNaN(min) && priceForItem <= max) ||
                        (min <= priceForItem && isNaN(max)) ||
                        (min <= priceForItem && priceForItem <= max) ||
                        (!min && !max);
                }
            );

            $('.refresh').click(function() {
               ...