Search code examples
javascriptjquerydatatablesextracthtml-input

Sorting a HTML table, which has inputs in it's <td>


I was wondering if I can sort a table with JavaScript, which has input fields. I found a pretty nice plugin named DataTables, and it works flawlessly with basic tables, but not with table having inputs as it's fields.

Or would I be better off writing that kind of sorting/filtering with backend and passing just the data matching the request?


Solution

  • For completeness, the solution given via comment was to use a plugin. Loosely cited from DataTables.net:

    Example: Live DOM ordering

    ... Use information available in the DOM to order columns. Typically DataTables will read information to be ordered during its initialisation phase. This will not be updated based on user interaction. So ordering on columns with inputs may not reflect the current value of the inputs.

    Getting current values

    You must update the data that DataTables will order on, just prior to the order. This method is much more efficient than actually ordering using the DOM, since only one DOM query is needed for each cell to be ordered.

    Docs: Sorting plug-ins – Custom data source sorting

    Allows complete control of the data that is to be sorted. Typically this is used to retrieve data live from the DOM just prior to the table being sorted, to perform sorting on data that can be updated by the end-user or by some other script.

    Predefined data extractors

    • <input type=text> as string
    • <input type=text> as numeric
    • <input type=select> as string
    • <input type=checkbox> as boolean