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

nivle

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.

colin

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

nivle

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

kthorngren

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

nivle

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

nivle

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

kthorngren

updated the test case

Please post the updated URL

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

nivle

@kthorngren the link is the same as the one at the top
https://stackblitz.com/edit/datatables-columns-adjust-issue?file=index.html

kthorngren

Thought you updated my test case

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

nivle

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

nivle

@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 )???

kthorngren

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

nivle

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

kthorngren

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

nivle

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