[web2py] Using datatables and web2py

[Chris Guest]

I have a very wide html table. I want to selectively hide groups of columns 
at a time using a list of <a>.
Someone suggested using Datatables.net. So I have developed a proof of 
concept and all looks well.

http://jsfiddle.net/ChrisGuest/orgj7oL9/

Now when I drop this code into a web2py as below, I end up with wrong 
behaviour and seeing this error in the JS Console:

a.toggle-vis click event
0: : false
1: : false
a.toggle-vis click event
0: : false
1: : false
a.toggle-vis click event
0: : false
1: : false
a.toggle-vis click event
*Uncaught TypeError: Cannot read property 'style' of undefined*


I suspected that this could be caused by a conflict between DataTables.js 
and another JavaScript module so I went through & commented them all out 
except for jquery.js .
Unfortunately the problems still persists. 
I have documented how I use DataTables.js with web2py. I am wondering if 
I've missed something important here. I'd be curious if anyone else could 
get this to go.

Thanks,
Chris


I have modified layout.html to include:

<link rel="stylesheet" 
href="https://cdn.datatables.net/1.10.7/css/jquery.dataTables.css"; />
<script src='https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js' 
> </script>


view/batch/demo.html ( see http://jsfiddle.net/ChrisGuest/orgj7oL9/ for 
complete table code).

    {{extend 'layout.html'}}
    
    <h1>Results</h1>
    
    <ul>...</ul>
    <table id="batch_table">
    ...
    </table>
    
    <script>
    
    $(document).ready(function() {
        var table = $('#batch_table').DataTable( {
            "scrollY": "200px",
            "paging": false
        } );
    
        $('a.toggle-vis').on('click', function (e) {
            e.preventDefault();
            
            console.log('a.toggle-vis click event');
            // Get the column API object
            var data_columns =  $(this).attr('data-column');
            if (data_columns.length) {
                var data_columns = data_columns.split(',');
                for (var i=0; i<data_columns.length; i++) { 
                    var column = table.column(data_columns[i]);            
                    if (column) {
                        if (column.style===undefined)
                            column.style = '';
                        column.visible( ! column.visible() );
                        console.log(
                            i + ': ' + column.style + ': ' + 
column.visible()
                        );
                    }
                }
            }
             
        });
    
    });
    
    </script>

-- 
Resources:
- http://web2py.com
- http://web2py.com/book (Documentation)
- http://github.com/web2py/web2py (Source code)
- https://code.google.com/p/web2py/issues/list (Report Issues)
--- 
You received this message because you are subscribed to the Google Groups 
"web2py-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to web2py+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.