DataTables: сохранять строки / данные даже после обновления страницы - PullRequest
Новая
       6

DataTables: сохранять строки / данные даже после обновления страницы

0 голосов
/ 06 мая 2020

Я использую DataTables версии 1.10.20 в своем проекте Django.

У меня есть две таблицы DataTables на странице, одна для Products , а другая для Cart .

Данные в таблице «Товары» получены по запросу AJAX. Пользователь добавит продукты из таблицы продуктов в таблицу корзины, нажав кнопку добавления. Пользователь должен иметь возможность изменить количество в таблице корзины и, когда он будет удовлетворен, наконец, нажать кнопку оформления заказа. Кнопка оформления заказа вызовет некоторое представление для следующих шагов по сохранению транзакции.

Проблема в том, что до нажатия кнопки оформления заказа, если пользователь обновляет страницу после добавления пары продуктов или перехода на другую страницу, Cart DataTable теряет все данные, и пользователю придется добавлять их заново.

Данные в тележке DataTable следует очищать только при нажатии кнопки «Оформить заказ». Возможно ли это?

Я пробовал использовать StateSave: true, как описано здесь , но это не помогло.

Вот мой код ..

Таблица данных для «Продукты» 

<script defer type="text/javascript" language="javascript" class="init">
    // This function  will initialilize the 'Products' datatable.
    $(document).ready(function () {
        $('#productstable').dataTable({
            "ajax": {
                "url": "{% url 'getproductsdata' %}",
                "dataSrc": ''
            },
            // Datatable customization options
            // Hide default datatable out of the box search feild 
            "dom": 'lrtip',
            // Disable paging i.e nubering , next page etc ...
            //"paging": false,
            "pageLength": 2,
            // Disable total results found info 
            //"info": false,
            "rowId": 'pk',

            "columns": [
                // Hiding the Primary Key in Datatable View
                { "data": "pk", "visible": false },
                { "data": "fields.product_id" },
                { "data": "fields.product_name" },
                { "data": "fields.size" },
                { "data": "fields.units_per_case", "visible": false },
                {
                    mRender: function (data, type, row) {
                        return '<button type="button" id="addtowscart" class="bg-gradient-success">Add</button>'
                    }
                }
            ]
        });
        // IMPORTANT :- Hide the table data initially 
        $('#productstable').hide();
    });
</script>

Таблица данных для функций «Корзина» и «Добавить в корзину» 

<script>
        // Cart Table 
    $(document).ready(function () {
        // Get Products and Cart datatable's instances..
        var products_table = $('#productstable').DataTable();
        var wscart_table = $('#wscarttable').DataTable({
            // Datatable customization options
            // Hide default datatable out of the box search feild
            "dom": 'lrtip',
            // Disable paging i.e nubering , next page etc ...
            "paging": false,
            // Disable total results found info 
            "info": false,
            StateSave: true,

            columns: [{data: 'idnum'}, {data: 'productid'},
            {
            mRender: function (data, type, row) {
                  return '<input type="number" value="1" id="qty-btn" min="0" max="100" step="1"/>'
                }}
            ],
        });

        // Add to Cart
        $('#productstable tbody').on('click', '#addtowscart', function (e) {
            e.preventDefault();
            var table = $('#productstable').DataTable();
            var idx = table.row($(this).parents('tr')).data();

            wscart_table.row.add( {
                "idnum": idx.pk,
                "productid": idx.fields.product_id,
            } ).draw();
        });
    });
</script>
...