jquery datatables selected row's data getting reset on paginated table while navigating on pages

Question

I am using jquery datatables . http://jsfiddle.net/s3j5pbj4/2/ I am populating around 3000 records in paginated table.Problem is that If am selecting few checkbox and dropdown

Answer 1

I solved this for you. I recommend to you, to make 2 html files and 1 javascript file and insert my code (below) and play around a little with it. Check your Browsers console, because I added some console.log's so that you can see what is going on in detail.

Also THIS is a good read on the topic: http://www.w3schools.com/html/html5_webstorage.asp

In my example you have 2 html pages with 3 checkboxes each. Every time you switch between the checkboxes, the page gets reloaded (and all memory is lost). For this reason I added a little JavaScript file, that saves your checked checkboxes in the localStorage (a javascript object) of the users Browser.

Tell me if you still experience troubles.

HTML of PAGE 1:

  
  

  

    
    



    
    Item #1
    


    
    Item #2
    


    
    Item #3
    


    

      

        

          
            «
          
        
        
1
        
2
        

          
            »
          
        
      
    

    
    

HTML of PAGE 2:

  
  

  

    
    



    
    Item #4
    


    
    Item #5
    


    
    Item #6
    


    

      

        

          
            «
          
        
        
1
        
2
        

          
            »
          
        
      
    

    
    

JAVASCRIPT from the embedded file "my_javascript.js"

$("input").click(function(){

    var key = $("input:hover").attr("name"); 
    var value = $("input:hover").attr("name");
    var item_is_present = false;

    console.log(key);
    console.log(value);

    if ( localStorage.getItem(key) != null ){
        localStorage.removeItem(key);
    } else {
        localStorage.setItem(key, value);
    };

    console.log(localStorage);
    console.log(localStorage.length);
});

$(function(){
    for ( var i = 0, len = localStorage.length; i < len; ++i ) {

        var myVar = localStorage.getItem( localStorage.key( i ) ) ;

        $("input[name=" + myVar + "]").prop("checked", true);
    }
});