How to make search function point to the row without hiding other row?

How to make search function point to the row without hiding other row?

SHOSHO Posts: 7Questions: 1Answers: 0

Hi, I am new to datatables and now currently doing the search function.
Datatables's search will point to the search result and hide the other row.
How can I make the search point to the search result but still containing other line?

This question has accepted answers - jump to:

Answers

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

    Are you wanting to highlight the row containing the search term? If so, maybe the row().show() plugin will do what you want. Here is an example that also uses the Select Extension to highlight the row:
    http://live.datatables.net/hatojihe/3/edit

    Click the Find Quinn button.

    Kevin

  • SHOSHO Posts: 7Questions: 1Answers: 0

    Yes I want to highlight it but not using a button. But using the Search input and it should work same as your button "Find Quinn" works.

    Please help me.

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

    But using the Search input and it should work same as your button "Find Quinn" works.

    There are a couple options:

    1. Create your own input and use that to call the row().show() plugin. You can hide the default search input using the -option dom` option if you want.
    2. Remove the Datables event handler from the default Search input and create your own, like this example:
      http://live.datatables.net/jorexujo/1/edit

    Kevin

  • SHOSHO Posts: 7Questions: 1Answers: 0

    Hi, kthorngren can you kindly show me? I failed to do the first options and options 2 the example you provide me seem to still hiding the other row.

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

    Here is an example that takes over the Datatables search input and uses row().show() along with the Select Extension to show the row:
    http://live.datatables.net/hatojihe/34/edit

    Type in a person's name in the table to show the row.

    options 2 the example you provide me seem to still hiding the other row.

    That example uses search(). Its a generic example I've used for other threads.

    Kevin

  • SHOSHO Posts: 7Questions: 1Answers: 0

    Hi kthorngren, the example you gave me works perfectly on the link. But when I apply to my code, nothing happen. No error show too but it just did not work. Please noted that I am using real live data means data from database, is the method only works on hard coded data?

  • SHOSHO Posts: 7Questions: 1Answers: 0

    It is working now, thank you so much :*

  • SHOSHO Posts: 7Questions: 1Answers: 0

    Hi kthorngren, I have one more thing to ask. When user search, they need to key in the exact word for the search to function.

    How can I make the search to work even when user key in one letter and the table will highlight all result that start with that letter?

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

    The example I provided uses the row().show() plugin which takes only one row as a parameter to jump to and display the page. What you describe can potentially display more than one row which won't work with row().show().

    You can change the comparison from return data[0].toLowerCase() === val.toLowerCase(); to whatever meets your solution. Using regex will allow the search to be more flexible. I updated the example to show this:
    http://live.datatables.net/hatojihe/36/edit

    Note that I changed var row = table.row(function ( idx, data, node ) { to var row = table.rows(function ( idx, data, node ) { to check all rows. Its now table.rows with an s to use rows(). I also commented out the .show() since it won't work with multiple rows. You could add some logic to use show() if the length of the rows is 1 if you want.

    Kevin

  • SHOSHO Posts: 7Questions: 1Answers: 0

    Thank you so much Kevin, its help a lot. Now I will figure out how to show the row if the length is > 0.

    Thank you :)

This discussion has been closed.