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

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

YoDavishYoDavish Posts: 123Questions: 46Answers: 3

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();
            });
        });
    }

This question has accepted answers - jump to:

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • YoDavishYoDavish Posts: 123Questions: 46Answers: 3

    @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/

  • tangerinetangerine Posts: 3,342Questions: 35Answers: 394

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

  • YoDavishYoDavish Posts: 123Questions: 46Answers: 3
    edited June 2021
  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • YoDavishYoDavish Posts: 123Questions: 46Answers: 3

    @colin

    It is registered to another email

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735

    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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

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

  • YoDavishYoDavish Posts: 123Questions: 46Answers: 3
    edited June 2021

    @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"

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735

    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

  • YoDavishYoDavish Posts: 123Questions: 46Answers: 3
    edited June 2021

    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

  • YoDavishYoDavish Posts: 123Questions: 46Answers: 3
    edited June 2021

    @kthorngren

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

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

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735

    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

  • YoDavishYoDavish Posts: 123Questions: 46Answers: 3

    @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/

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735
    Answer ✓

    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

  • YoDavishYoDavish Posts: 123Questions: 46Answers: 3

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

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735

    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

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735
    Answer ✓

    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

Sign In or Register to comment.