Retain rows/data after page refresh

pykiran

I am using DataTables version 1.10.20 in my Django project.

I have two DataTables in a page, one for Products and another for Cart.

The data in Products table is sourced by AJAX call. The user will add the products from products table to cart table by clicking on a add button. User should be able to modify the quantity in the cart table and when satisfied, finally click on a checkout button. The checkout button will call some view for next steps to save the transaction.

The problem is, before clicking on checkout, if the user refreshes the page after adding a couple of products or navigates to a different page, the Cart DataTable is loosing all the data and the user will have to add them all over again.

The data in Cart DataTable should be only cleared when "Checkout" is clicked. Is this possible ?

I have tried using StateSave: true but it did not help.

Here is my code..

DataTable for "Products"

<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>

DataTable for "Cart" and "Add to Cart" function

<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>

colin

The problem is, before clicking on checkout, if the user refreshes the page after adding a couple of products or navigates to a different page, the Cart DataTable is loosing all the data and the user will have to add them all over again.

This doesn't sound like a DataTables issue. DataTables just renders the table with data that's there in the DOM, or that's pulled from an Ajax request.

You need to add that logic to your application to preserve that data - either in localStorage/sessionStorage, or stored on a server with Ajax calls.

Colin