Empty select filter of columns

jantarek0

Hi,
after long time I'm using DataTables for my project. I have a problem which I can't solve for few days. I was looking for documentation, forums, api and examples but I don't know where I have an error.

I have data table with header (with sorting) and footer, where I want to show few select filters.
Html looks like this:

<table class="table table-striped table-bordered table-hover table-condensed" id="tblNumSeries">
    <thead>
        <tr>
            <th></th>
            <th>Number table</th>
            <th>Sale type</th>
            <th>Place</th>
            <th></th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td></td>
            <td></td>
            <th></th>
            <th></th>
            <td></td>
        </tr>
    </tfoot>
</table>

And JS for rendering dataTable:

var table;
    $(document).ready(function() {
        table = $('#tblNumSeries').DataTable({
            "ajax": "@Url.Action("AjaxNumericalStock","Ajax")",
            "order": [[0, "desc"]],
            "filter": true,
            "columns": [
                {
                    "data": "SerieId",
                    "visible": false
                },
                { "data": "SerieName" },
                { "data": "MovementTypeName" },
                { "data": "StockPlaceName" },
                {
                    "data": "EditUrl",
                    "orderable": false
                }
            ],
            "iDisplayLength": 10
        });

        $("#tblNumSeries tfoot th").each(function(i) {
            var select = $('<select><option value=""></option></select>')
                .appendTo($(this).empty())
                .on('change', function() {
                    table.column(i)
                        .search($(this).val())
                        .draw();
                });
            
            table.column(i).data().unique().sort().each(function(d, j) {
                select.append('<option value="' + d + '">' + j + '</option>');
            });
        });
        

        $('#tblNumSeries_filter input').attr({ "placeholder": "Vyhledávání" });
        $('#tblNumSeries_length select').addClass('input-mini');

    });

My problem is, that selects are empty. When I log to console length of table.column(i).data() I get "0". When I debug step by step the foreach of filling options to select returns null. I don't know why?? Table is filled correctly.

Can you help me with this? Thanks.

Jantarek0

jantarek0

I think I found a problem - trying to get data from table, which is filled by ajax... And data is not loaded yet so my selects are empty... I go to look for solution :))