Clear stateSave when page reloads

Clear stateSave when page reloads

JonasPJonasP Posts: 5Questions: 2Answers: 0

Is it possible to clear/drop stateSave when a page is reloaded?

I found the function table.state.clear(); but i dont know how to code it to work.

Jonas

<!DOCTYPE HTML>
<html  lang="sv-se">
    <head>
        <meta http-equiv="Content-type" content="text/html; charset="iso-8859-1">
        <title>Brf Info</title>
        <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto">
        <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css">
        <style type="text/css" class="init"></style>
        <link rel="stylesheet" type="text/css" href="Styles/Main2017.css" />
    
        <script type="text/javascript" language="javascript" src="JavaScript/JavaScript.js"></script>
        <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
        <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
        <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js"></script>

    
        <script type="text/javascript" class="init" language="javascript">
    
                $(document).ready(function() {
                    $('#foretaglista').DataTable({
                    
                    stateSave: true,
                    order: [],
                    columnDefs: [{bSortable: false, targets: [4]}],
                    lengthMenu: [ 25, 50, 100, 150 ],   
                    
                        language: {
                          "sEmptyTable": "Tabellen innehåller ingen data",
                          "sInfo": "Visar _START_ till _END_ av totalt _TOTAL_ rader",
                          "sInfoEmpty": "Visar 0 till 0 av totalt 0 rader",
                          "sInfoFiltered": "(filtrerade från totalt _MAX_ rader)",
                          "sInfoPostFix": "",
                          "sInfoThousands": " ",
                          "sLengthMenu": "Visa _MENU_ rader",
                          "sLoadingRecords": "Laddar...",
                          "sProcessing": "Bearbetar...",
                          "sSearch": "Sök:",
                          "sZeroRecords": "Hittade inga matchande resultat",
                          "oPaginate": {
                            "sFirst": "Första",
                            "sLast": "Sista",
                            "sNext": "Nästa",
                            "sPrevious": "Föregående"
                          },
                          "oAria": {
                            "sSortAscending": ": aktivera för att sortera kolumnen i stigande ordning",
                            "sSortDescending": ": aktivera för att sortera kolumnen i fallande ordning"
                          }
                        }
                    
                    });
                } );
        </script>
    
</head>

Answers

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    Hi @JonasP ,

    If you want to clear the state after each draw, you could add it into the drawCallback, something like this:

    $('#foretaglista').DataTable({
    
      stateSave: true,
      order: [],
      columnDefs: [{
        bSortable: false,
        targets: [4]
      }],
      lengthMenu: [25, 50, 100, 150],
    
      language: {
        "sEmptyTable": "Tabellen innehåller ingen data",
        "sInfo": "Visar _START_ till _END_ av totalt _TOTAL_ rader",
        "sInfoEmpty": "Visar 0 till 0 av totalt 0 rader",
        "sInfoFiltered": "(filtrerade från totalt _MAX_ rader)",
        "sInfoPostFix": "",
        "sInfoThousands": " ",
        "sLengthMenu": "Visa _MENU_ rader",
        "sLoadingRecords": "Laddar...",
        "sProcessing": "Bearbetar...",
        "sSearch": "Sök:",
        "sZeroRecords": "Hittade inga matchande resultat",
        "oPaginate": {
          "sFirst": "Första",
          "sLast": "Sista",
          "sNext": "Nästa",
          "sPrevious": "Föregående"
        },
        "oAria": {
          "sSortAscending": ": aktivera för att sortera kolumnen i stigande ordning",
          "sSortDescending": ": aktivera för att sortera kolumnen i fallande ordning"
        }
      },
      drawCallback: function() {
        this.api().state.clear();
      }
    
    });
    

    However, I'm not sure why you'd want to, as that would remove the benefit of the stateSave functionality!

    Cheers,

    Colin

  • JonasPJonasP Posts: 5Questions: 2Answers: 0

    Hi Colins and thanks for your answer. Im sorry but this didn't work out - all extra table functions sortorder, pagning dose not show - perhaps i miss some code.

    Ill try to explain the issue in more detail.


    Click on any brand to list cars

    Chrysler | Ferrari | Volvo

    Here comes the outstanding sortTable


    • A user selects Chrysler and the table (list_cars.aspx) is populated with 200 Chrysler cars - order by car name - A - Z.
    • The user then change sortorder to build year and go to page 7.
    • The user click on a car link (car_info.aspx) and open its detail.
    • The user then click browsers back button and comes back to the list - page 7.

    So far so good !!!!! (stateSave: true, works fine.)

    But now comes the problem.

    The user selects Volvo and the table fill with 150 Volvo cars. The issue is that sortorder now is build year not sortorder car name.

    I really need data to be sorted by default everytime a user selects new data to the table. // Cheers - Jonas

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    Hi @JonasP ,

    That should work, look at the example here, I suspect something else is wrong.

    However, don't do in the drawCallback as that would lose the state whenever the table is drawn. I would do in a click event handle for the cars. You could give them all the same class, and just have a single click handler. I've also added that in the example above.

    Hope that does the trick,

    Cheers,

    Colin

  • JonasPJonasP Posts: 5Questions: 2Answers: 0
    edited April 2018

    I have created a test table - hittabrf.se/hittabrf_labb/testsorttables.asp?Dataset=Data1

    The code
    drawCallback: function() { this.api().state.clear();

    seems to disable stateSave=true so the user dont get back to the right spot.

    I have no skills in JavaScript and i don't know what i'm doing right now....
    I dont know if its possible when page loads:

    1. Step 1 - kill/terminate current users stateSave or sortorder
    2. Step 2 - Start to load the page with the data and set stateSave=true
This discussion has been closed.