Individual dropdown column filters (values) doesn't search on columns that are rendered

YoDavish

The individual column dropdown filters (values) do not work on render columns that display the label rather than the value.

How can I get the dropdown filters to work on rendered columns?

Below is the DataTables rendered code:

    columns: [
        {
            "title": "id",
            "data": "task.id"
        },
        {
            "title": "Accession Number",
            "data": "task.accessionNumber"
        },
        {
            "title": "Barcode",
            "data": "task.barcode"
        },
        {
            "title": "AssignedTo",
            "data": "task.assignedTo"
        },
        {
            "title": "Status",
            "data": "task.statusDefId",
            render: function (data, type, row) {
                return $.grep( statusSelectOptions, function(obj){return obj.value == data;})[0].label;
            }
        },
        {
            "title": "Task Name",
            "data": "task.taskDefId",
            render: function (data, type, row) {
                return $.grep( taskSelectOptions, function(obj){return obj.value == data;})[0].label;
            }
        },
        {
            "title": "Date Reported",
            "data": "task.date1"
        }
    ],

Here is my dropdown filter columns code:

     initComplete: function () {
        let c = 0;
        tab.columns().every( function () {
            c++;
            var column = this;
            var select = $('<select id="SelectFilter'+c+'" onchange="clearOtherColumnFilter(\'TextFilter'+c+'\')"><option value=""></option></select>')
            .appendTo( $("#table thead tr:eq(2) th").eq(column.index()).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>')
            });

            $('select', this.header()).click(function(event) {
                event.stopPropagation();
            });
        });
    }

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

YoDavish

@colin

I tried to load up just the base needed to get it to run but I'm having some trouble with it:

http://live.datatables.net/rojesini/1/

tangerine

Your loading sequence for js is wrong.
jQuery should come first, and DataTables should precede the Editor.

YoDavish

@tangerine, updated the sequence

http://live.datatables.net/rojesini/1/

colin

I see you're using Editor in your example, but our accounts aren't showing that you have a license - it just reports that your trial expired. Is the license registered to another email address? Please can let us know so we can update our records.

Thanks,

Colin

YoDavish

@colin

It is registered to another email

kthorngren

Your example still doesn't seem complete. Please update your test case to show the issue and provide the steps to replicate the issue.

You are getting some errors in the console log. You probably will want to remove the columns definition since you haven't defined all the columns and there isn't a status object. Please make sure to fix all the errors.

Kevin

colin

@YoDavish - please can you PM me the details of the account that purchased the license so I can update your records.

YoDavish

@kthorngren

I've updated fully now it can be viewed here:

http://live.datatables.net/rojesini/3/edit

Steps to reproduce error

In the filter dropdown under "Status" because the value is "1 or 2" if we select those, it will not filter or find what we want, since it is rendered to the label. How can I render the dropdown to either search for the label or to find the value in the data set under "Status"

kthorngren

I may be missing something but I don't see any select filters in the example. There are text input filters which they don't seem to work.

Kevin

YoDavish

I'll reshare it again. I've tested both the input text and the select dropdown, which is the main issue.

http://live.datatables.net/rojesini/3/edit?js,output

YoDavish

@kthorngren

Had to re clone it to get it to output now, the link is below

http://live.datatables.net/zoxujusi/1/

kthorngren

Here is the table I see with you link http://live.datatables.net/rojesini/3/edit?js,output

Maybe you need to clone the JS BIN and post the new link.

Kevin

YoDavish

@colin @kthorngren
I accidentally clicked on answered "yes" for colin's response, but that was incorrect. I don't know how to remove that.

Anyways the reclone link is below:

http://live.datatables.net/zoxujusi/1/

kthorngren

You need to create the select list with the same data conversion that you used to populate the column data, like this:
http://live.datatables.net/zoxujusi/2/edit

Specifically this code:

                column.data().unique().sort().each( function ( d, j ){
                  if (column.index() === 4) {
                    var opt = $.grep( statusSelectOptions, function(obj){return obj.value == d;})[0].label;
                    select.append( '<option value="'+opt+'">'+opt+'</option>');
                  } else {
                    select.append( '<option value="'+d+'">'+d+'</option>');
                  }

Also note that your columnDefs render function won't run because its overwritten by the columns.render function in columns. Also you misspelled columnDefs, you have columnsDef.

Kevin

YoDavish

Thanks @kthorngren that worked! is there a way to get rid of the extra <tr> in the header as well?

kthorngren

Looks like you are starting with two headers in HTML then appending two. So maybe you can remove the second you defined in HTML?

Kevin

kthorngren

Sorry, realized my answer was not correct; Change your cloning statement to this:

$('#table thead tr:eq(0)').clone(true).appendTo( '#table thead' );

Use the :eq(0) to clone only the first row. Without that its cloning both rows.

Kevin