Assigning global variables within datatables

ngwenyama

Hi, I'm new to DataTables, and need to save some data from the table into a global (or otherwise) variable. as an example, I declare the javascript variables at global scope:

        <script type="text/javascript">
         var browse_url;
         var browse_start;
         var browse_end;
         var browse_chr;
        </script>

then I have the DataTables table:

             $(document).ready(function() {
                 var table = $('#datatable').DataTable( {
                     stateSave: true,
                     columns: [
                         { "data": "id"},
                         { "data": "seq_region_name" },
                         { "data": "start" },
                         { "data": "end" },
                         { "data": "bases_unmapped" },
                         { "data": "start_end_mapped" }
                     ],
                     columnDefs: [
                         {
                             targets: [1],
                             render: function ( data, type, row, meta)
                             {
                                 coord_str = data + ':' + row["start"] + '-' + row["end"];
                                 return("<button>" + coord_str + "</button>");
                             }
                         },
                         {
                             targets: [2,3],
                             visible: false
                         }

                     ],
                     scrollY: 200,
                     deferRender: true,
                     scroller: true
                 } );
                 $('#datatable tbody').on( 'click', 'button', function () {
                     var data = table.row( $(this).parents('tr') ).data();
                     var goto_coord = data["seq_region_name"] + ":" + data["start"] + "-" + data["end"];
                     browse_chr = data["seq_region_name"];
                     browse_start = data["start"];
                     browse_end   = data["end"];
                     browse_url   = "chr_" + browse_chr + ".json";
                     window.location.href = "index.php?r=" + goto_coord;
                     alert(browse_start);
                 } );
                 alert(browse_start);
             } );
            </script>

Notice that I have a button defined that combines data from 3 different fields into a single field. What I want is to be able to save (some of) the data from the row into those global variables so that I can use them in another web application that exists on the same page as the DataTable.

On line 39 above, the alert gives me the correct answer indicating that the variables are being assigned properly, but then that data is lost by line 41. I suspect this is a scope issue, which is why I am using globals (at least for now), but how can I get the data out of the function?

Any corrections to my code above (or suggestions of other ways to do it) would be much appreciated.

Thank you in advance!

ngwenyama

Oh, I just realized that my second alert doesn't work because it isn't called as part of the 'click' event. However, this realization unfortunately doesn't help me to figure out how to get values out.

ThomD

What happens if you declare 'data' as a global var?

How do you know that those variables are not being set globally? What does the browser debugger say about those variables?

ngwenyama

If I do a

      <script>document.write("This is the start point: " + browse_start)</script>

It gives me "undefined". Also, places in the other web app on the same page fail to use it, but if I hard code something into the declarations of the global variables, then they work fine, though the 'click' event fails to change them.

Regarding 'data', if I remove the var designation and/or declare it in the first snippet above as global, nothing seems to change.

ThomD

The problem you've run into is a JS problem, not a DT problem. Stop the code inside that on click function and I'll bet you'll find that those variables being set are scoped into the function.

I agree that it should work as you expect. Chrome's developer tools debugger is very good for tracking down this sort of thing.

ngwenyama

Yes, you are correct that they are being set inside the function. Can you suggest a way to get the values outside the function?

ThomD

If you don't use the "var" statement, JS should scope them globally. change that script at the top to not use var and see what happens.