How to dynamically create select (filter) when using server side processing v 1.10

Eitre · June 2015

Hi,
I'm trying to create filters for some of the columns I am show in my table. I've been looking at some of the older examples of this but they are all with the old API and I am having trouble translating and making it work.

So I'm passing an additional object to the client from my server called select which consists of an array with arrays for the different dropdowns I need.

{'draw': '1', 
'recordsTotal': 13, 
'recordsFiltered': 13, 
'selects': [[1thing1, 2thing1], ['1thing2, 2thing2']], 
'data': [{'thing1': '1thing1', 'thing2': '1thing2'},{'thing1': '2thing1', 'thing2': '2thing2'}],

This is my initialization code:

$(document).ready( function () { 
$('#dataTables-outputTest').DataTable({
        "processing": true,
       "serverSide": true,
        "ajax": {
           url: '/TestData/data-source',
         },
        "columns": [
            { "data": "PAnr",
              "searchable": true},
            { "data": "gear",
             "searchable": true},
            { "data": "ratio",
            "searchable": true},
           { "data": "oiltype",
             "searchable": true},
            { "data": "oiltemp",
             "searchable": true},
            { "data": "link",
             "searchable": false,
             "orderable": false},
        ],
        "initComplete": function () {
            this.api().columns().every( function () {
                var column = this;
                var select = $('<select><option value=""></option></select>')
                    .appendTo( $(column.footer()).empty() )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );
                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } );
                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
            } );
        }
});

How can I populate the select with my select data I sent from the server?

Eitre · June 2015

Okay I'm so sorry but that code looks horrible. I'm going to edit that.

Edit: Now it looks better.

daniel_r · June 2015

You can try my yadcf plugin for datatables, it support server side processing and allow you to send the filter elements from your server along with the datatables data, see showcase page scroll down to code snippets

Eitre · June 2015

That looks pretty good actually, but I have now managed to solve the problem by changing InitComplete to this:

"initComplete": function (data) {
            var selects = data.json.selects;
            var test = selects[0];
            var gear = selects[1];
            for (var i = 0; i < test.length; i++) {
                var option = '<option value="'+test[i]+'">'+test[i]+'</option>'
                $(option).appendTo("#test-filter");
            }
            for (var i = 0; i < gear.length; i++) {
                var option = '<option value="'+gear[i]+'">'+gear[i]+'</option>'
                $(option).appendTo("#gear-filter");
            }

And adding this to my html file:

                    <div class="form-group col-lg-3">
                        <label>Test</label>
                        <select id="test-filter" class="form-control">
                            <option value="None"></option>

                        </select>
                    </div>
                    <div class="form-group col-lg-3">
                        <label>Gear</label>
                        <select id="gear-filter" class="form-control">
                            <option value="None"></option>

                        </select>
                    </div>

Then I use this to be able to send the data to the server:

"ajax": {
            url: '/TestData/data-source',
            data: function (data) {
                var testselect = $( "#test-filter" ).val();
                var gearselect = $( "#gear-filter" ).val();
                data.testselect = testselect;
                data.gearselect = gearselect;
            }

Now I only need to figure out how to redraw the table and send the data each time something changes in my filters.

It looks like I need the draw() function inside an .on('change', handler). But I don't know where to put this code. Can anybody help me with this?

Eitre · June 2015

And now I managed to solve that last problem as well with this:

    var testtable = $('#dataTables-outputTest').DataTable({
        "processing": true,
    ...
    });


    $('#test-filter').change(function(table){
        testtable.draw(false);
    });

    $('#gear-filter').change(function(table){
        testtable.draw(false);
    });

How to dynamically create select (filter) when using server side processing v 1.10

How to dynamically create select (filter) when using server side processing v 1.10

Replies

Howdy, Stranger!

Categories

DataTables

How to dynamically create select (filter) when using server side processing v 1.10

How to dynamically create select (filter) when using server side processing v 1.10

Replies

Howdy, Stranger!

Quick Links

Categories

DataTables