Модуль DataTable:

DataTable позволяет преобразовать стандартные таблицы в DataTable.

Для начала, необходимо HTML шаблон, в раздел "head" (верхнюю часть сайта, шапку) установить следующий код:

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">

Затем, в нужное место вставить такую таблицу:

<table id="myTable" class="table">
    <thead>
        <tr>
            <th>Код товара:</th>
            <th>Название:</th>
            <th>Цена:</th>
        </tr>
    </thead>
    <tbody>
        {% for product in all_products %}
            <tr>
                <td>
                    {{ product.product_code }}
                </td>
                <td>
                    {{ product.brand_name.brand }}
                </td>
                <td>
                    {{ product.price }}
                </td>
            </tr>
        {% endfor %}
    </tbody>
    <tfoot>
        <tr>
            <th>Код товара:</th>
            <th>Название:</th>
            <th>Цена:</th>
        </tr>
    </tfoot>
</table>

Затем, в самую нижнюю часть сайта, после объявления всех скриптов, нужно вставить следующий код:

<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

<script>
    $(document).ready(function(){

        var table = $('#myTable').DataTable({
            "order": [[ 3, "asc" ]]
        });

    });
</script>

Сортировка значений по столбцу "Price" посредством (asc / desc)

Отображение или Скрытие колонок таблицы через Checbox

Для этого, в шаблон страницы всавьте CheckBox - следующим кодом:

<input type="checkbox" id="checbox_hiding_column" style="margin-bottom: 30px;" checked> Показать/скрыть колонку "Прайс"

А затем, в скрипт добавьте следующий код:

$("#checbox_hiding_column_04").on("change", function(){
    var is_checked = $(this).prop("checked");
    table.column( 4 ).visible( is_checked );
});

И поле этого, у вас получится вот такой полный скрипт:

<script>
    $(document).ready(function(){

        var table = $('#myTable').DataTable({
            "order": [[ 3, "asc" ]]
        });

        $("#checbox_hiding_column_04").on("change", function(){
            var is_checked = $(this).prop("checked");
            table.column( 4 ).visible( is_checked );
        });
    });
</script>

Перевод DataTable на любой язык:

Для этого, в скрипт добавьте следующий код:

var table = $('#myTable').DataTable({
    "order": [[ 3, "asc" ]],
    "language": {
        "url": "//cdn.datatables.net/plug-ins/1.10.19/i18n/Russian.json"
    }
});

И поле этого, у вас получится вот такой полный скрипт:

<script>
    $(document).ready(function(){

        var table = $('#myTable').DataTable({
            "order": [[ 3, "asc" ]],
            "language": {
                "url": "//cdn.datatables.net/plug-ins/1.10.19/i18n/Russian.json"
            }
        });
    });
</script>

Перечень всех возможных к установке языков можно посмотреть здесь.