Possible 2.0.0 error with colvis and datatables.min.js

Possible 2.0.0 error with colvis and datatables.min.js

jzohrabjzohrab Posts: 20Questions: 1Answers: 0

Hello there,

I've recently updated to 2.0.0, and it works thanks to the fixed minification. Thank you for that!

I'm now trying to get a simple 'colvis' button working, which was the motivator for my upgrade. My minified js has the following header comment:

https://datatables.net/download/#dt/dt-2.0.0/b-3.0.0/b-colvis-3.0.0/b-html5-3.0.0

With a simple datatable and the following config:

      layout: {
        topStart: 'pageLength',
        topEnd: 'search',
        bottomStart: [ 'info', 'buttons' ], /* 'info', */
        bottomEnd: 'paging'
      },
      buttons: [ 'colvis' ],

On run, my dt fails with the following js error:

datatables.min.js:16 Uncaught TypeError: Cannot read properties of undefined (reading 'cell')
    at U.<anonymous> (datatables.min.js:16:59655)
    at U.iterator (datatables.min.js:16:45871)
    at U.<anonymous> (datatables.min.js:16:59551)
    at U.<anonymous> (datatables.min.js:16:47541)
    at U.header (datatables.min.js:16:46800)
    at Object._columnText (datatables.min.js:37:2453)
    at text (datatables.min.js:37:1585)
    at i (datatables.min.js:26:6232)
    at _._buildButton (datatables.min.js:26:7592)
    at _._expandButton (datatables.min.js:26:5342)

with the following layout config, the datatable loads correctly:

      layout: {
        topStart: 'pageLength',
        topEnd: 'search',
        bottomStart: 'info', // [ 'info', 'buttons' ], /* 'info', */
        bottomEnd: 'paging'
      },
      // buttons: [ 'colvis' ],

Any guidance/tips from other users would be appreciated, thanks all!

Replies

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

    Thanks for those links. I gave it a try here, and it's working as expected. Could you look at that, please, and see if it helps. If it's still not working for you, please can you update my example, or link to your page, so that we can see the problem.

    Colin

  • jzohrabjzohrab Posts: 20Questions: 1Answers: 0

    Thank you very much @colin -- I should have mentioned that this is colvis with jquery and server-side processing!

    I found another thread about server side and colvis, but couldn't see anything obvious in the example, https://live.datatables.net/jabedeti/4/edit.

    Here is some more js from my current setup:

        book_listing_table = $('#booktable').DataTable({
          layout: {
            topStart: 'pageLength',
            topEnd: 'search',
            bottomStart: [ 'info', 'buttons' ], /* 'info', */
            bottomEnd: 'paging'
          },
          buttons: [ 'colvis' ],
          responsive: true,
          select: true,
          lengthMenu: [ 10, 25, 50 ],
          pageLength: 25,
          paging: true,
          info: true,
          searching: true,
          processing: true,
          serverSide: true,
          stateSave: true,
          search: { search: initial_search },
          columnDefs: [
            { "name": "BkTitle", "targets": 0, "width": "40%", "render": render_book_title },
            { "name": "WordCount", "targets": 3, "width": "10%" }, ... snip
          ],
    
          // Ajax call
          ajax: {
            url: "/book/datatables/active",
            type: "POST",
            dataType: "json"
          },
    
        });
    
      } // end setup_text_datatable
    
      ... some helpers not shown
    

    If I remove the 'buttons' stuff above, the table loads:

          layout: { ... bottomStart: 'info', ... },
          // buttons: [ 'colvis' ],
    

    If I use bottomStart: [ 'info', 'buttons' ] alone, the ajax endpoint is called and the table loads, but then I get the JS error datatables.min.js:16 Uncaught TypeError: Cannot read properties of undefined (reading 'cell') ... and the loading never "completes"

    With both of them,

          layout: { ...  bottomStart: [ 'info', 'buttons' ], ... },
          buttons: [ 'colvis' ],
    

    the ajax is never called, and I get the same error (datatables.min.js:16 Uncaught TypeError: Cannot read properties of undefined (reading 'cell')).

  • allanallan Posts: 63,356Questions: 1Answers: 10,444 Site admin

    I've created this little test case with that layout and buttons and it seems to load okay.

    I'd need a link to your page showing the error (or any other page showing the error) to be able to debug it.

    Perhaps the columns in the HTML and the Javascript don't match?

    Allan

  • jzohrabjzohrab Posts: 20Questions: 1Answers: 0

    Ah interesting! Yes, my javascript data structure returns more columns than are shown in the table, because they are used during render() calls to actually render the table cells. When I added dummy headings for these values, the table loaded. So I'll see what I can do about fixing the data structure to match the desired table output more.

    I believe this can be closed. Perhaps the "colvis" button documentation should have a warning that the headings must match the js. I'd make a PR to that effect but don't know where the repo is.

    Thank you very much @allan for taking the time to look and respond. Greatly appreciated. Regards, Jeff

  • allanallan Posts: 63,356Questions: 1Answers: 10,444 Site admin

    It is quite possible to have the Ajax response contain more data that what is shown in the table - this example shows that.

    I'd be interested in taking a look at your page in the "broken" state to see if I can figure out the details of what is going on and if I should be doing something different in DataTables.

    Allan

  • jzohrabjzohrab Posts: 20Questions: 1Answers: 0

    Hi @allan, thanks for the reply.

    I ran into a similar error today: ajax contained more (hidden) fields than the table, initial render was fine, but then on enter something into the search bar I got similar error: "Uncaught TypeError: Cannot read properties of undefined (reading 'unique')".

    The rather lengthy file that gives me the error is in public repo;

    https://github.com/jzohrab/lute-v3/blob/wip_update_datatables_2-0-0/lute/templates/term/index.html

    but that's going to be a massive drag for you to decipher. I'm using "columnDefs" -- perhaps related somehow?

    I'll see if I can put together a shorter demo.

  • allanallan Posts: 63,356Questions: 1Answers: 10,444 Site admin

    Gosh yes, if you are able to put together a minimal reproduction of the error, that would make debugging it a lot more tractable!

    Allan

  • jzohrabjzohrab Posts: 20Questions: 1Answers: 0
    edited February 27

    (edited)

  • jzohrabjzohrab Posts: 20Questions: 1Answers: 0

    (sorry, double-post, can't kill the first one)

  • jzohrabjzohrab Posts: 20Questions: 1Answers: 0

    OK, how annoying, I edited my post, and now both of them disappeared. :-)

    I copied your demo from Feb 21, and hid one of the table columns, causing the error:

    https://live.datatables.net/hacadaji/1/edit

    In the past, this method worked -- at least, it did with "columnDefs" (still not sure what the difference is between that and "columns") -- but that could have just been lucky on my part. In my case, I had several fields that influence how the visible ones should be rendered, so I just included them in the ajax, but not in the html table headings. Datatables 2.x might need all headings to be present.

    If all headings need to be present, then I'll need to work out some method of dealing with those extra headings when I introduce "colvis". I wouldn't want the users to have to wade through the extra system-use-only columns, but if they do, that's not a dealbreaker. Cheers!

  • allanallan Posts: 63,356Questions: 1Answers: 10,444 Site admin

    Excellent test case - thank you. I would actually have expected that to work, and and I'll look into what is going wrong before tagging up 2.0.1.

    Thanks,
    Allan

  • jzohrabjzohrab Posts: 20Questions: 1Answers: 0

    It's a grey area, perhaps. The same issues happens with columnDefs.

    When I first started using Datatables, my hope was that I could just use a "null target" with the columnDefs, b/c this extra data really didn't have a target, it was just extra stuff.

  • allanallan Posts: 63,356Questions: 1Answers: 10,444 Site admin

    Fix for that issue committed and it will be in 2.0.1 :).

    Thanks again!
    Allan

  • jzohrabjzohrab Posts: 20Questions: 1Answers: 0

    Super! Thank you very much @allan - I'll keep an eye out for the launch.

    (I use Datatables in a small free app I've created for language learners, and it's been a great help in getting some things off the ground. Thank you very much)

  • allanallan Posts: 63,356Questions: 1Answers: 10,444 Site admin

    Delighted to hear it :).

    I'm terrible at languages, but always feel that I should be better... What's the app?

  • jzohrabjzohrab Posts: 20Questions: 1Answers: 0

    Lute, it's basically a self-hosted reader where you collect vocabulary as you read stuff. https://github.com/jzohrab/lute-v3 Datatables is used for book and term listings.

  • allanallan Posts: 63,356Questions: 1Answers: 10,444 Site admin

    Looks awesome! The gif on the readme really helps get an idea of what is going on.

    Allan

Sign In or Register to comment.