Possible 2.0.0 error with colvis and datatables.min.js

jzohrab

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!

colin

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

jzohrab

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')).

allan

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

jzohrab

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

allan

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

jzohrab

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.

allan

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

jzohrab

(edited)

jzohrab

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

jzohrab

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!

allan

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

jzohrab

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.

allan

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

Thanks again!
Allan

jzohrab

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)

allan

Delighted to hear it .

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

jzohrab

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.

allan

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

Allan