How to make the search bar/filter of a table work for input/select elements?

How to make the search bar/filter of a table work for input/select elements?

nivlenivle Posts: 23Questions: 2Answers: 0

Link to test case: https://stackblitz.com/edit/datatables-columns-adjust-issue?file=index.html
Debugger code (debug.datatables.net): none
Error messages shown: none
Description of problem: I have a table that has input elements, on which the user can enter values. The issue with this is that the search bar/filter doesn't work for these fields, and I'm not sure how to make it work.

This question has an accepted answers - jump to answer

Answers

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

    Kevin did this example a while back : http://live.datatables.net/sazomuwi/1/edit : I'm not sure which thread, but that should get you going.

    Colin

  • nivlenivle Posts: 23Questions: 2Answers: 0

    @colin thanks for the example, it doest help a bit, however in the example the data is hardcoded, while I set the data when initializing the datatable, using the data property. So when i try and change the input value in the table, on the onchange event, it just gets reset to the value I provided during the initialization, so I need a way to get the data variable in question and update the value of it.

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736
    Answer ✓

    Here is a different example with how I would approach this:
    http://live.datatables.net/xexoyisa/1/edit

    Instead of using the onchange event use delegated events, see this FAQ. The key is that it uses Orthogonal Data using columns.render.. It renders the input for display and the cell data for everything else (searching and sorting).

    I didn't dig through your code, there is a lot, to figure out how to apply this solution. But it should give you an idea of what you need to do.

    Kevin

  • nivlenivle Posts: 23Questions: 2Answers: 0

    @kthorngren Thanks,

    the part "table.cell(cell).data( val ).draw(false);" of the code in this example compared to the previous example did the job.

  • nivlenivle Posts: 23Questions: 2Answers: 0
    edited February 2021

    @kthorngren this doesn't work if responsive is active(updated the test case), when responsive is active and the field is tugged under the + button, when I open it and try to edit that field, it works, however when I then try to filter, the value I just edited goes back to its previous value.

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    updated the test case

    Please post the updated URL :smile:

    My guess is the selector for the event handler is not catching the cell when it is in the child row. I would inspect the cell to see what the selector is and create a second event handler.

    Kevin

  • nivlenivle Posts: 23Questions: 2Answers: 0
    edited February 2021
  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    Thought you updated my test case :smile:

    Updated your example here. Added the event handler on line 82. You can move it or change the selectors as appropriate. It just posts an alert of the input value.

    Kevin

  • nivlenivle Posts: 23Questions: 2Answers: 0
    edited February 2021

    @kthorngren hmm it also seems that the "orderDataType: "dom-text", type: 'string'," part in the table settings for initialization breaks column ordering(by clicking on the column).
    If I remove it, the column ordering works as it should, but then the filter doesn't work for input fields..

  • nivlenivle Posts: 23Questions: 2Answers: 0
    edited February 2021

    @kthorngren although in your example there is no such thing as orderdatatype set for the filter to work on the input fields...hmm, in my example filter on input fields doesn't work without setting the orderdatatype, why does it work on your example(http://live.datatables.net/xexoyisa/1/edit )???

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    Using orderDataType uses a custom function for ordering inputs as showin in this example. I'm not sure what you have in your code. There is a lot of Javascript on that page to dig through.

    My solution is to use Orthogonal Data and updates the cell data from the input value. The Live DOM ordering solution does not update the cell data which is why searching doesn't work. You can see that searching doesn't work in the linked example.

    Kevin

  • nivlenivle Posts: 23Questions: 2Answers: 0

    @kthorngren Im not sure what you mean by orthagonal data, am I not using orthagonal data already in the test case?(line 165 setting the columns, using the setUpTableColumns function)

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    am I not using orthagonal data already in the test case?(line 165 setting the columns, using the setUpTableColumns function)

    Maybe you can post the code snippet here that you are referring to. I'm not seeing where you are using orthogonal data. Orthogonal data means that you are using different values for sorting, searching and what is displayed.

    This is from my example:

            render: function (data, type, row) {
              if (type === 'display') {
                return '<input type="text" name="position" value="' + data + '">';
              }
              return data;
            }
    

    It is using the cell data for sorting and searching. The orthogonal part is it is changing the to display to an input element.

    In addition when the input is changed the cell data is updated with this event handler:

      $('#example').on('change', 'input[name="position"]', function () {
        
        // Get the cell containing the input
        var cell = $(this).closest('td');
        
        // Get the input value
        var val = $(this).val();
         
        // Update the cell data
        table.cell(cell).data( val ).draw(false);
        
      })
    

    Kevin

  • nivlenivle Posts: 23Questions: 2Answers: 0
    edited February 2021

    @kthorngren this part of the code is where i do what you do on render

    only difference is that I dont use type to check if its display
    },
    render: (data, type, row, meta) => {
    return isNullOrEmpty(data)
    ? No ${columnNames[meta.col].toLowerCase()} found
    : !isNullOrEmpty(getCustomCellContent) &&
    !isNullOrEmpty(getCustomCellContent(data, row)[meta.col])
    ? getCustomCellContent(data, row)[meta.col]
    : data;
    }
    }
    ],

    After adding, the type === display check, it does seem to work. on the test case, now only need to find a solution, for it to work when the responsive is active.

This discussion has been closed.