Search (or filter?) by index and redraw

Search (or filter?) by index and redraw

Dave333Dave333 Posts: 6Questions: 2Answers: 0

Hi, i know how to search for a value programmatically and redraw the DataTable so that it shows only rows containing the given value.
I do that like so: this.api().search('8000').draw();

But now i have the need to do the same but not use a value this time, but show only the row with the given id.

Each row in the DataTable has an id like so:
<tr id="198">

I know the index of the row with id 198 via: var rowIndex = this.api().row('#198');

But how to get the DataTable to only show the row with that index?

Via Google i saw people that would place the id in a separate column and use search for that, but i think there must be a more efficient and better way as every row already has an id and i know the index of the row that i want to show.

Maybe it's simple but I googled a long time, tried lots but none of 'em worked.
Any help or pointers are greatly appreciated, many thanks.


  • allanallan Posts: 61,083Questions: 1Answers: 9,960 Site admin

    Hi Dave,

    There are two options:

    1. Use the method you found on Google with a hidden column containing the data to search. I would actually say this is relatively efficient since it is reusing the DataTables column search ability. It does mean there would be duplicate information in the HTML is the downside in terms of efficiency.
    2. Use a custom search plug-in that will match on the row id attribute. I suspect this will have slower performance since you need to get the DOM attribute for the row each time it is run. With column search we can cache the value, but reading a value from the DOM is always slow (depending on the number of rows, it might or might not be noticeable).


  • Dave333Dave333 Posts: 6Questions: 2Answers: 0
    edited November 2022

    Hi Allan,

    Thanks for the (speedy!) reply, ver much appreciated.

    No.1: clear.

    About no.2: i was hoping that DataTables would store an array or object of sorts which holds the relationship between the id of a row and its index so that one could efficiently filter/search the DataTable by providing that index (or id).

    Do i understand correctly that there is no direct way to show only one row by providing an index for that row? (Or more preferred: by the id of that row)

    The reason i'm asking is because i have an input field which value is '8000 - turnover' while it has an attribute with an the id for that value.

    If the user opens a dropdown (which holds the DataTable) for that input field, that DataTable should only show one row: the 8000 one.

    So a search, not by a value (because the value in the input value is different than in any of the DataTable columns) but by the index of that row. Or even more practical: by the id of that row.

  • colincolin Posts: 15,095Questions: 1Answers: 2,581

    If you use that first approach, the hidden column, you can search explicitly by the hidden column with column().search(), rather than across all columns with search(). You can use regexs to make it more specific, i.e. ^value$, which would work with both global and column searches.


  • Dave333Dave333 Posts: 6Questions: 2Answers: 0

    Thx Colin (and Allan), i'll try that. Hopefully it'll work.

    Maybe it's a thought for a next version of DataTables, adding the possibility to search for a row attribute(s) and show only that row / rows? Or maybe add the ability to access an array or object which holds the relation to the row id of a row and its index?

    For now i'll try your solution.

  • kthorngrenkthorngren Posts: 19,947Questions: 26Answers: 4,701
    edited November 2022

    Or maybe add the ability to access an array or object which holds the relation to the row id of a row and its index?

    You can get this relationship using a Search Plugin. See this example:

    Among other parameters the search plugin provides the row index and the original row data (rowData). The original row data contains the row ID as an object and can be accessed using rowData.DT_RowId.

    Use the search plugin to search by row index or row id. In your search input event handler store the input value’s “ID" in a global variable then use the draw() API to run the plugin. In the plugin use the global variable compare to the rowData.DT_RowId to display or hide the row.

    If you want help with this then please build a simple test case that we can use to help apply your search input to the search plugin.


Sign In or Register to comment.