problem with arrow and columns in responsive table

problem with arrow and columns in responsive table

AlessandrovaAlessandrova Posts: 28Questions: 9Answers: 0

Dear all,
I have made this table:
https://daado.altervista.org/debate.php

The table includes 9 columns. It is responsive. When the screen shrinks, an arrow appears on the right and when it is clicked upon, the hidden columns are shown. I guess I have placed the arrow in the 10th column.

There is a problem. When the page is loaded, the following error message is shown:
DataTables warning: table id=myTable - Requested unknown parameter '9' for row 0, column 9.

Here is my code. Can you help me figure out what the problem is?

<script>
$(document).ready(function() {
    var dt = $('#myTable').DataTable({
      searchHighlight: true,
      responsive: {
        details: {
            display: DataTable.Responsive.display.modal({
                header: function (row) {
                    var data = row.data();
                    return 'Dettagli di ' + data[4] + ' (di ' + data[0] + ')';
                }
            }),
            renderer: DataTable.Responsive.renderer.tableAll()
        }
      },
      mark: true,
      "iDisplayLength": 6,
       buttons: [
                'colvis',
                {
                    extend: 'searchPanes',
                    config: {
                        cascadePanes: true,
                        viewTotal: true,
                        orderable: true
                    }
                }
       ],
      columnDefs:[
      {
            className: 'dtr-control arrow-right',
            orderable: false,
            target: 9
      },
      {
          "targets": [5,6,7,8],
          "orderable": false
        },
        {        
          searchPanes: {
            cascadePanes: true,
            viewTotal: true,
            orderable: true
          },
        },
        {
          searchPanes: {
            show: true
        },
          targets: [0,1,2,3]
        },
        {
          searchPanes: {
            show: false
        },
          targets: [4,5,6,7,8]
        }
      ],
      responsive: {
        details: {
          type: 'column',
          target: 9
        }
      },
      dom: 'Bfrtip',
      select: {
            style: 'os',
            selector: 'td:not(:last-child)'
      },
      order: [[ 4, 'asc' ]]
    });
    dt.on('select.dt', () => {          
        dt.searchPanes.rebuildPane(0, true);
    });
    dt.on('deselect.dt', () => {
        dt.searchPanes.rebuildPane(0, true);
    });
});
</script>

Answers

  • AlessandrovaAlessandrova Posts: 28Questions: 9Answers: 0

    I had forgotten to add an empty column to my table.
    Now it seems to work fine.

  • allanallan Posts: 64,587Questions: 1Answers: 10,679 Site admin

    Thanks for the update - good to hear you've got it working as you need.

    Allan

Sign In or Register to comment.