Using datatables and web2py

211 views
Skip to first unread message

Chris Guest

unread,
Jul 1, 2015, 9:46:23 PM7/1/15
to web...@googlegroups.com
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:

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>

Mirek Zvolský

unread,
Jul 2, 2015, 7:52:44 AM7/2/15
to web...@googlegroups.com
I have not such error in your jsfiddle.
What about to give console.log(column) after if (column) {




Dne čtvrtek 2. července 2015 3:46:23 UTC+2 Chris Guest napsal(a):

Chris Guest

unread,
Jul 12, 2015, 7:55:08 PM7/12/15
to web...@googlegroups.com
Hi Mirek,

On Thursday, July 2, 2015 at 9:52:44 PM UTC+10, Mirek Zvolský wrote:
I have not such error in your jsfiddle.
What about to give console.log(column) after if (column) {

I have changed my web2py page to this:
                    if (column) {
                        console.log(
                            i + ': ' + column.style + ': ' + column.visible()
                        );
                        if (column.style===undefined)
                            column.style = '';
                        column.visible( ! column.visible() );
                        console.log(
                            i + ': ' + column.style + ': ' + column.visible()
                        );
                    }

I am now seeing this in the console: 
a.toggle-vis click event
0: undefined: true
0: : false
1: undefined: true
1: : false

Chris 
Reply all
Reply to author
Forward
0 new messages