Responsive expand buttons not showing with lots of columns

Responsive expand buttons not showing with lots of columns

MKChrisMKChris Posts: 4Questions: 1Answers: 0

Hi there

I've just discovered DataTables() and it's amazing - I wish I had found it when I was first developing my website, but am in the process of changing my tables to use it now.

The problem on the table I'm working on is that I want to define multiple columns.responsivePriority columns for it to be fine for mobile output, however it seems when I define more than a certain number of columnDefs, the little responsive + buttons are not there.

I have done a live example here of what I want to do: http://live.datatables.net/pikikebe/1/edit?output

There are some screenshots here - this is what I'd like to show (albeit with a different columns.responsivePriority on the columns):

To get this, I have to comment out some of my columnDefs options:

  $("#fixtures-table").DataTable({
    "responsive": true,
    "paging": false,
    "info": false,
    "fixedHeader": true,
    "searching": false,
    "order": [[5, "asc"]],
    "ordering": false,
    "rowGroup": {
      "dataSrc": 4
    },
    "columnDefs": [{
      // Day of week number, date sortable, division rank
      "visible": false,
      "targets": [1, 3, 5]
    }, {
      // Date printable
      "responsivePriority": 1,
      "orderData": 3,
      "targets": 2
    }, {
      // Home team
      "responsivePriority": 2,
      "targets": 6
    }/*, {
      // Away team
      "responsivePriority": 3,
      "targets": 7
    }, {
      // Score
      "responsivePriority": 4,
      "targets": 8
    }, {
      // Division name
      "responsivePriority": 5,
      "targets": 4
    }, {
      // Venue
      "responsivePriority": 6,
      "targets": 9
    }, {
      // Day name
      "responsivePriority": 7,
      "targets": 0
    }*/]
  });

If I uncomment them, I get the following:

This shows the correct column order, but there's no option to expand the hidden columns.

Am I doing anything wrong here? The debugger doesn't show up anything and the console isn't showing errors.

Many thanks in advance!

PS I'd be happy to buy support credits, but the only option seems to be to buy quite a lot, which I can't afford and neither can the organisation I develop the website for.

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 6,897Questions: 0Answers: 1,179
    Answer ✓

    Hi @MKChris ,

    Yep, something odd going on there. I've raised it internally (DD-1244 for my reference) and we'll report back here when there's an update.

    Cheers,

    Colin

  • MKChrisMKChris Posts: 4Questions: 1Answers: 0
    edited November 15

    Thanks @colin! Appreciate that, at least I'm not being stupid.

    Also not sure of the protocol here - do I accept the answer, given that you're looking into it or wait until you've looked into it...?

  • colincolin Posts: 6,897Questions: 0Answers: 1,179

    Your call! :)

  • MKChrisMKChris Posts: 4Questions: 1Answers: 0

    Hi @colin, this appears to be less of an issue than I originally thought.

    I now have a working example here: https://www.mkttl.co.uk/event-log

    It seems when I visit on my mobile device, it works as expected:

    However using Developer Tools in Chrome to view, it shows the issue previously reported:

  • colincolin Posts: 6,897Questions: 0Answers: 1,179

    Thanks for letting us know. There's still an issue, probably something to do with calculating the boundaries of the displays, so I'll leave the bug open. We haven't looked at it yet, but when we do, we'll report back here.

    Colin

Sign In or Register to comment.