DataTable with dropdown/select's are only rendered on first, last and last-1 pages. What might the problem be?

Question

I'm setting up a new overview, and want to use jQuery DataTables. I have the correct data shown on the first page. But when I press the next page, my select-boxes does not have any options. If I resize the window or anything that forces the table to redraw, the table is updated, and the correct data is shown. If I choose to show the last page, the data is shown correctly right away, but all the pages in-between are still not showing the options in the select-boxes. How to I get the options shown at all pages?

I have tried using the DataTables docs for pages (https://datatables.net/reference/api/page%28%29), but the functions are not being hit. Also, I have tried several other ways to draw the next page, but I can't get it to work. At the moment I'm making the table before I make it a DataTable.

$.ajax({
    ...

    success: function (response) {
        CaseData = response;
        console.log(CaseData)
        //The following method creates the table
        buildColumnHeader();

        table = $('#case-layout-table').DataTable({
            scrollY: "600px",
            scrollX: true,
            scrollCollapse: true,
            responsive: true,
            fixedColumns: {
                leftColumns: 3
            },
            data: CaseData,
            "language": {
                "url": "http://cdn.datatables.net/plug-ins/1.10.19/i18n/Danish.json"
            },
            "columns": columns,
        });

        table = $('#case-layout-table').DataTable();
    }
});

//this is code copied from datatables docs - neither are being hit on next/previous page
var table = $('#example').DataTable();

$('#next').on( 'click', function () {
    table.page( 'next' ).draw( 'page' );
} );

$('#previous').on( 'click', function () {
    table.page( 'previous' ).draw( 'page' );
} );

function generateDropDown(data, meta, control) {
var html = "";
if ($('#select-' + (data.ID + '1' + (meta.col - 1)) + '').has('option').length <= 0) {
    html = '<select onChange="handleOnSelectChange(' + (data.ID + '1' + (meta.col - 1)) + ',' + data.ID + ')" style="width: 140px; text-align: center;" id=select-' + (data.ID + '1' + (meta.col - 1)) + '></select>';
    for (var i in control.Parameters) {
        var $option;
        if (control.Parameters[i] === data.DataList[meta.col - 1].Case) {
            $option = $('<option/>', {
                value: control.Parameters[i],
                text: control.Parameters[i],
                selected: true,
            });
        }
        else {
            $option = $('<option/>', {
                value: control.Parameters[i],
                text: control.Parameters[i],
            });
        }

        $('#select-' + (data.ID + '1' + (meta.col - 1)) + '').append($option);
    }
}
return html;
}

In the buildColumnHeader()-method, i am using the following code, which calls the buildRender

else {
    columns[i] = {
        title: group.ControlMetas[i - 1].Title,
        type: group.ControlMetas[i - 1].Type,
        orderDataType: "dom-" + group.ControlMetas[i - 1].Type,
        data: null,
        id: i,
        render:
            function (data, type, row, meta) {
                return buildRender(data, meta)
            }
}

and the buildRender uses the following, if my controlType is dropdown

else if (control.Type === 'Dropdown') {
  html = generateDropDown(data, meta, control)
```

Could you please edit your question to show how you are populating the select-boxes? I guess they are done using ajax? — Priyank Panchal
@PriyankPanchal Yes, thank you - they are made using Ajax - the last code, which is added now — Stefan Krabbe
I will need two more things to be able to answer, 1. From where are you calling generateDropDown()? 2. In your datatables code you have "columns": columns could you please show what the columns variable is? — Priyank Panchal
The columns are just a blank array ( var columns = []; ) I have added a small part of the method calling the generate dropdown. If my html is not select-boxes, it renders the selected data correct — Stefan Krabbe

Stefan Krabbe Stefan Krabbe · Accepted Answer · 2019-03-29T07:50:07

I have found a solution to the problem. In thegenerateDropDown-method I changed the way im making the select-boxes. So instead of using jQuery, i'm now writing HTML.

DataTable with dropdown/select's are only rendered on first, last and last-1 pages. What might the problem be?

1 Answers