Add Pulldown Menu to Search Criteria

bridrod

Not sure I am asking the proper way, but I am using the default style/method of datatables, where there is a search box on the upper right side of my page. Search works great. What I would like to do, is to add 2 x pulldown menus tied together, meaning: 1 x for State and another for City (2 x columns of my CSV file). Once those are selected, then only then, the data is displayed on page. I can still use the search box after that, but it would be searching withing the pulldown selection/conditions, matching the State/City previously selected.

How can I do that?

Thanks,
Rod

kthorngren

Start with this example:
https://datatables.net/examples/api/multi_filter_select.html

It places the search inputs the footer but you can place them anywhere on the page. Use the column-selector of your choice if you don't want select inputs for all the columns.

Kevin

bridrod

Kevin, thanks for the suggestion, but I have to apologize, because this is a little over my head, and I am not sure how to implement this. Please, bear with me...This is what I have in my code and it works, displaying my CSV file:

<!--<script>
jQuery(document).ready(function($) {
    $('#example').DataTable();
} );
</script>-->

This is the example from the suggested URL (works with the static HTML example), showing the pulldown/selection for all columns:

<script>
jQuery(document).ready(function($) {
    $('#example').DataTable( {
        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>' )
                } );
            } );
        }
    } );
} );
</script>

I tried using the above, on the working site but nothing happened. Also, I would only need 2 x columns from my CSV: City, State and showing above the table headers, just like the original search box. As you mentioned the code shows at the bottom.

Thanks,

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

kthorngren

Here is an example based on the select search example:
http://live.datatables.net/pehatixo/1/edit

There are many ways you can do this. I used the column-selector as a classname to choose the columns to apply the search inputs. I assigned the HTML5 data attribute element to those columns to provide the id of the element to place the select input. The column().header() API is used to get the HTML5 data attribute.

Kevin

bridrod

Colin,

Understood. I tried creating a test case with static HTML table and that worked, I did not know how to simulate the loading of a CSV file there. Not sure if it's possible or not. Will look further in the HOWTO you provided, for more info. Thanks!

Kevin,
Thanks a bunch! That's EXACTLY what I was looking for! I will try on my code as soon as I get a break and see how it goes!

I really appreciate your attention to the matter, guys!

kthorngren

I did not know how to simulate the loading of a CSV file there. Not sure if it's possible or not.

FYI use a Javascript variable to hold a sample of your data. Then use data to populate the table. Similar to this example.

Kevin

bridrod

Man I am still playing with the test case, not as easy to me as I wanted to. In any case, playing with the code, I got pretty close to an acceptable solution: http://live.datatables.net/qogudere/1/edit

How to make a "default" value for the Pull-down menu for places (3rd column), to be pre-selected with London?

So that every time I go to the page London is always selected, but I can still change to something else?
Thanks,

colin

You can do that with a bit of jQuery code:

          $('table thead tr th:eq(2) select').val('London').trigger('change');

See here: http://live.datatables.net/qogudere/2/edit

Colin

bridrod

Colin,

Thanks! i see it working on the test case.Unfortunately that did not work on my code (there is something funky with mine, indeed).
Appreciate the help!

bridrod

It was the position of my html/head tags. Moved things around and I got partially working. The search/pull-down menus showed up, but it's not accepting my defined selection. Here is the test URL: https://thrive.epizy.com/myhometract/test2.php

Using the same code for the above test case, I tried like this:
$('table thead tr th:eq(2) select').val('Naples').trigger('change');
OR this one:
$('table thead tr th:eq(3) select').val('FL').trigger('change');

Does not work automatically like the test case, but I can do it manually, and it works.

So, what could be the problem?
Thanks,

kthorngren

You have this:

$('table thead tr th:eq(3) select').val('OH').trigger('change');

When I look at the select list I don't see OH as an option. But the bigger problem is your thead columns are built using td instead of th. Best option is to use th instead. Or you can change your selector to match your HTML, something like this:

$('table thead tr td:eq(3) select').val('PA').trigger('change');

Note the change to td:eq(3).

Kevin

kthorngren

You may want to use two header rows so the sorting can be in one row and the select inputs in the other. Use orderCellsTop to move the sorting to the top row, like this example:
http://live.datatables.net/saqozowe/3/edit

Kevin

bridrod

You nailed it! The data is test so reason why the State was missing. You found the structure flaw, and using what you suggested, resolved my issue! Many thanks!