Retrieve Distinct Values from Datatable Columns and populate Select Dropdown

Guyto

I have dilemma and need guidance. I have 2 Select Dropdowns. One for facilities and the other for patients that get populated in my Laravel 8 website. I use datatables to populate my records for facilities and patients columns. I want to know how to do the following. My first facility select dropdown on the onchange action should look for the disctinct values and populate my patient select dropdown from data within the Datatables Patients column and get its distinct values as its options.

I want to put the code on the onchange of the first Facilities select dropdown.

//facility select right below TBR if not function first section
$('#facilitySelect').on('change', function() {
table.column($(this).data('column'))
.search($(this).val())
.draw();
});

How do I do this?

colin

This example here shows cascading select elements. Could you look at that, please, and see if it helps. If it's still not working for you, please can you update my example, or link to your page, so that we can see the problem.

Cheers,

Colin

Guyto

Awesome Colin I will take a look. WOW you response was quite fast. So glad I joined this forum. Also The example you gave is promising but my select dropdowns are outside of the Datatables structure. I will play around with the code and see if I can get it accomplish but if you do have other links or sources I can look into, I will be delighted to get them from you.

colin

We're fast on our feet here!

The same principle would apply if the select dropdowns are outside of the table area - the only code that would need change is the placement of those elements,

Colin

Guyto

Good afternoon. The issue I am having is that I am using Laravel 8 with Controllers and Views and the Data that populate my Table comes from a database that I query. So my table data is not embedded in the HTML page. Can you direct me to a link that shows a Laravel example or other links I can take a look into.

kthorngren

The example Colin posted uses DOM sourced data for the table but the code to build the selects comes from the Datatables data cache. This is code that builds the select options:

    column.data().unique().sort().each( function ( d, j ) {
      select.append( '<option value="'+d+'">'+d+'</option>' );
    } );

It uses columns.data() to build the option list from the Datatables data cache.

Kevin

Guyto

Thank you @kthorngren I will test and see if that works thank you.

Guyto

I still cannot get this to work. Please remember that I am using Laravel 7 and creating my own dropdown outside of the Datatable container. the problem is that the contents of the dropdown is pulled from a sql server table and there contents are not in the page but from a controller. Please help me or provide a resource where someone is able to implement this in Laravel 7 and utilizing data migration and controllers.

colin

I haven't got any experience of Laravel, I'm afraid. If you're saying you can't scan the table for the current values to rebuild the select with, though I'm not clear why that would be the case, you'll need to do some fancy SQL statement to get it instead. That's not a DataTables issues, that'll be Laravel/SQL so might be worth asking on StackOverflow.

Colin

Guyto

Thank you Colin. I will send my request to StackOverflow.