Server Side Column Filtering with Drop Down - Get all options

Server Side Column Filtering with Drop Down - Get all options

oranges13oranges13 Posts: 2Questions: 1Answers: 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>' )
            } );
        } );
    }
});

Answers

  • allanallan Posts: 54,909Questions: 1Answers: 8,606 Site admin

    The initComplete callback has the JSON data object that was loaded from the server passed into it. So what I would suggest in this case is that you have your server-side script detect the first draw (draw:1) and augment the JSON with the options for the columns, which you can then use in your initComplete callback rather than column().data().

    Allan

  • oranges13oranges13 Posts: 2Questions: 1Answers: 0

    @allan Thank you, what would that look like in the JSON for example? That's the example that I'm missing from any that I've found online. I'm not sure how to return that data in a way that datatables will understand, and then utilize that in the initComplete function.

  • allanallan Posts: 54,909Questions: 1Answers: 8,606 Site admin
    {
      "data": [
        ...
      ],
      "columnFilters": [
        [
          { "label": 1, "value": 1 },
          ...
        ],
        ...
      ]
    }
    

    Have an entry for each column in the columnFilters array.

    Allan

  • pjustindaryllpjustindaryll Posts: 8Questions: 2Answers: 0

    allan, how do we set it up? can you provide a sample?

  • Elle3141Elle3141 Posts: 3Questions: 1Answers: 0

    @allan I am stuck on the same problem. I have searched on various forums and I haven't managed to find a solution to this.

    Can you please explain how to implement this? I am happy to provide any information, which is necessary for you to help me.

  • ManuelWennerManuelWenner Posts: 16Questions: 2Answers: 1

    @oranges13 @pjustindaryll @Elle3141
    Could you fix that? I stuck on the same problem :(

  • colincolin Posts: 12,939Questions: 0Answers: 2,204

    You would use ajax.json() in the initComplete function to extract the values for your select dropdown. The server would need to add that in as Allan suggested.

  • ManuelWennerManuelWenner Posts: 16Questions: 2Answers: 1

    @colin Okay so you use the .options() from ajax.json() and add the Options when getting the fields on server side? At least that's the way I try. But if I do that, then the request is as slow as without server side request.

  • colincolin Posts: 12,939Questions: 0Answers: 2,204

    But if I do that, then the request is as slow as without server side request.

    This is only to get the options for the dropdown, on the very first Ajax request. The serverSide approach would still apply, only the data for that page would still be sent.

  • ManuelWennerManuelWenner Posts: 16Questions: 2Answers: 1

    @colin Let me get you straight. The options are only fetched at the first request and not at the subsequent ones? Or do I have to adjust this manually?

  • colincolin Posts: 12,939Questions: 0Answers: 2,204

    Yep, that's what Allan was suggesting above:

    So what I would suggest in this case is that you have your server-side script detect the first draw (draw:1) and augment the JSON with the options for the columns

  • ManuelWennerManuelWenner Posts: 16Questions: 2Answers: 1

    Ah okay, thanks. I will give it a try. Maybe this could be a nice feature in upcoming versions ;)

  • saaronsaaron Posts: 1Questions: 0Answers: 0

    Anyone have full code example of this working?

  • albertodomingueztalbertodominguezt Posts: 1Questions: 0Answers: 0

    @ManuelWenner Did you get it done? please let us know

  • tefdattefdat Posts: 34Questions: 6Answers: 3

    just curious and want to ask, if @ManuelWenner or anybody else has a working example of drop down column filtering together with server side processing.

  • ManuelWennerManuelWenner Posts: 16Questions: 2Answers: 1

    Hi @albertodominguezt and @tefdat yes i got it working but after we run in so much problems, we changed it back to client-side processing. If you have any detailed questions, just send me a message.

  • SyedAliAkbarSyedAliAkbar Posts: 1Questions: 0Answers: 0

    Can anyone solve this problem completely? Then please share.

Sign In or Register to comment.