CSV Button Error

asrosner

Hello,

i am trying to get a CSV export to work. The button appears but when I click the button, the following error appears:

"Uncaught TypeError: Cannot read properties of undefined (reading 'cell' - https://cdn.datatables.net/2.3.7/js/dataTables.min.js

CSS Included
<link rel="stylesheet" href="https://cdn.datatables.net/2.3.7/css/dataTables.dataTables.min.css" asp-append-version="true" />
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/3.2.6/css/buttons.dataTables.css" asp-append-version="true" />

JS Included

<script src="https://cdn.jsdelivr.net/npm/jquery@4.0.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/2.3.7/js/dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/3.2.6/js/dataTables.buttons.js"></script>
<script src="https://cdn.datatables.net/buttons/3.2.6/js/buttons.dataTables.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdn.datatables.net/buttons/3.2.6/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/3.2.6/js/buttons.print.min.js"></script>

DataTable Definition

var table = new DataTable('#Members', {
 layout: {
    topStart: 'pageLength',
    topEnd: {
        buttons: ['csv']
    },
    bottomStart: 'info',
    bottomEnd: 'paging'
  },
  processing: true,
  serverSide: true,
  orderCellsTop: true,
  ajax: {
    url: '@Url.Action("GetMembers", "Home")',
    type: 'post'
  },
  columns: [
    { data: 'Scn' },
    { data: 'GlobalId' },
    { data: 'Name' },
    { data: 'Eligible' },
    { data: 'ReferralStatus' },
    { data: 'BoxType' },
    { data: 'Delivery' },
    {
        data: 'GlobalId', // Use the row's ID for the link
        orderable: false,
        searchable: false,
        render: function (data, type, row) {
            // Create an Edit link with the row ID
            return '<a href="/Home/' + encodeURIComponent(data) + '">Edit</a>';
        }
    }
  ],
});

//column searching
$('#Members thead tr:eq(1) th').each(function (i) {
    $('input', this).on('keyup change', function () {
        if (table.column(i).search() !== this.value) {
            table
                .column(i)
                .search(this.value)
                .draw();
        }
    });
});

Thank you.

kthorngren

Generally this is due to the table structure not meeting Datatables HTML requirements. Searching for the error includes many results including these two:
https://datatables.net/forums/discussion/comment/239179/#Comment_239179
https://datatables.net/forums/discussion/78538

We will need to see a test case replicating the issue to help troubleshoot. Please provide a link to a running test case showing the error.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin