Using HTML5 LocalStorage to load data to table.

davykiash

Hello,

I have two tables where one loads row data to another via local storage. So far have used the example in here

The problem is that once the code

$('#sales_table').DataTable().ajax.reload();

runs I see a GET request being made to the URL instead of the LocalStorage.

What am I missing?

var sales_local_data = {};
var editor;

var inventory_table = $('#inventory_table').DataTable( 

    {

        "dom": "Bfrtip",                                
        "order": [[ 1, "desc" ]],
        "ajax": {
            "url": "../get_data.php",
            "type": "POST",
            "data": function ( d ) {
                 return $.extend( {}, d, {
                 } );
              },
          },
        "columnDefs": [
            {
                "targets": [ 0 ],
                "visible": false,
                "searchable": false
            }                       
        ],  
        "columns": [                                        
            { "data": "uuid"},
            { "data": "inventory_location_list_code"},                      
            { "data": "inventory_location_list_desc"},
            { "data": "inventory_location_list_selling_price"},                     
            {
                "data": null,
                "sorting": false,
                "sWidth": "15%",
                "mRender": function (data, type, full) 
                    {                                                                   
                        return '<button class="btn btn-success btn-xs">Choose<span class="glyphicon glyphicon-chevron-plus"></span></button>';
                    }
            },
            
        ],
        "select": {
            style:    'os',
            selector: 'td:first-child'
        },
        "buttons": [

        ]
       
    } 
    
);                      

// Create or update the sales_data localStorage entry
if ( localStorage.getItem('sales_data') ) {
    sales_local_data = JSON.parse( localStorage.getItem('sales_data') );
}

editor = new $.fn.dataTable.Editor( {
    table: "#sales_table",
    fields: 
        [                           
            {
                label: "Quantity:",
                name: "so_quantity"
            }                                                       
        ],
    ajax: function ( method, url, d, successCallback, errorCallback ) 
        {
 
            if ( d.action === 'create' ) {
                
                // Create new row(s), using the current time and loop index as
                // the row id
                
            }
            else if ( d.action === 'edit' ) {
                
                 // Update each edited item with the data submitted
                
                
            }
            else if ( d.action === 'remove' ) {
                
                // Remove items from the object
    
            }
            
            
            // Store the latest `todo` object for next reload
            //localStorage.setItem( 'sales_local_data', JSON.stringify(sales_local_data) );
 
            // Show Editor what has changed
            //successCallback( output );

        }                                       
    });
            

// Activate an inline edit on click of a table cell
$('#sales_table').on( 'click', 'tbody td:not(:first-child)', function (e) {
    editor.inline( this );
} );

var sales_table = $('#sales_table').DataTable( 

    {
        dom: "Bfrtip",
        data: $.map( sales_local_data, function (value, key) {
            return value;
        } ),
        "columnDefs": [
            {
                "targets": [ 0 ],
                "visible": false,
                "searchable": false
            }                       
        ],
        "columns": [
            { data: "so_uuid" },
            { data: "so_description" },
            { 
                data: "so_quantity",
                align: "center"
            },
            { data: "so_unitcost" },
            { data: "so_total" },
            {
                "data": null,
                "sorting": false,
                "sWidth": "15%",
                "mRender": function (data, type, full) 
                    {                                                                   
                        return '<button class="btn btn-success btn-xs ibtnDel">Delete<span class="glyphicon glyphicon-chevron-plus"></span></button>';
                    }
            },
            {
                "data": null,
                "sorting": false,
                "sWidth": "15%",
                "mRender": function (data, type, full) 
                    {                                                                   
                        return '<button class="btn btn-warning btn-xs">More<span class="glyphicon glyphicon-chevron-plus"></span></button>';
                    }
            },
        ],
        select: true,
        buttons: [
            
        ]
    } 

);

$('#inventory_table tbody').on( 'click', 'button', function () 
{
        
    var inventory_data = inventory_table.row( $(this).closest('tr') ).data();               


    console.log(inventory_data);
    
    var sales_local_data_output = {};
    var dateKey = +new Date();
    
    var id = dateKey+''+'1';
    
    sales_local_data.DT_RowId = id;
    sales_local_data.so_uuid = inventory_data['uuid'];
    sales_local_data.so_description = inventory_data['inventory_location_list_desc'];
    sales_local_data.so_quantity = '1';
    sales_local_data.so_unitcost = inventory_data['inventory_location_list_selling_price'];
    sales_local_data.so_total = inventory_data['inventory_location_list_selling_price'];
    
    sales_local_data_output[ id ] = sales_local_data;
    
    console.log(sales_local_data_output);
    
    // Store the latest `todo` object for next reload
    localStorage.setItem( 'sales_local_data', JSON.stringify(sales_local_data_output) );
    
    $('#sales_table').DataTable().ajax.reload();
                
});

HPB

This question has been answered before

A combination of clear and rows.add is needed.
Your Datatable is not loaded with ajax so ajax.reload will not do what you want.

davykiash

@HPB I have looked at the previous question that you have pointed out. Tried using

sales_table.clear().draw();
sales_table.rows.add(sales_local_data);

Its still not working for my use case. Perhaps an example will help

allan

http://live.datatables.net/yaqiberi/1/edit

Maybe you can link to your page so we can see what is going wrong.

Allan