Quantcast
Channel: Recent Discussions — DataTables forums
Viewing all articles
Browse latest Browse all 81728

Server Side Column Filtering with Drop Down - Get all options

$
0
0

Hello all. I have a datatable and I have successfully implemented the drop down column filters as shown in this example: https://datatables.net/examples/api/multi_filter_select.html

However, because I am using the server side processing, only the visible options on the first page are populated in the drop down boxes.

I'm using PHP on my server side. How can I pass the options into my JSON and access them in the initComplete function to prefill my select options?

$("#registrations").dataTable( {
    "ajax": '{!! route('ajax.registrations') !!}',
    processing: true,
    serverSide: true,
    select: true,
    stateSave: true,
    columns: [
        {data: "product.name"},
        {data: "alcohol"},
        {data: "reg_type.type"},
        {data: "status"},
        {data: "reg_date"},
        {data: "renew_date"},
    ],
    initComplete: function () {
        this.api().columns([0,2,3]).every( function () {
            var column = this;
            var select = $('<select class="form-control"><option value=""></option></select>')
                .appendTo( $(column.footer()).empty() )
                .on( 'change', function () {
                    var val = $(this).val();
                    column.search( this.value ).draw();
                } );

            // Only contains the *visible* options from the first page
            console.log(column.data().unique());

            // If I add extra data in my JSON, how do I access it here besides column.data?
            column.data().unique().sort().each( function ( d, j ) {
                select.append( '<option value="'+d+'">'+d+'</option>' )
            } );
        } );
    }
});

Viewing all articles
Browse latest Browse all 81728

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>