Icon with data-toggle and data-target in search box position
Icon with data-toggle and data-target in search box position

Hi!
I have a question. Is there a way to add an icon in the search box position? Is there a way to add attributes to that icon such as data-toggle and data-target so i can open a bootstrap modal when clicked?
Thank you very very much!!
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
See if the Custom Toolbar example is what you are looking for.
Kevin
Thanks Kevin! It looks awesome. Is there a way to insert the toolbar in the search box position? So that i can still choose how many elements to show in the table? Thank you very much!
Do you want to remove the search input?
Are you referring to the the Page Length Change element?
The
dom
option is used to control placement of the Datatables elements. If you still have questions please build a simple example that we can use to help you.https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Kevin
Yes, i want to remove the search input, and insert instead the custom toolbar. This way i can keep the page length change element in its position.
Another way around would be to replace the search input for the page length change element, so the custom toolbar stays in the top left position.
I cant build a simple example because the one provided live.datatables.net is the one i would use. Exactly that one, but with the elements in different position. But i can add the custom toolbar to that example:
http://live.datatables.net/xixekofu/1/edit
I that example i need to replace the search input for the page length change element. Thank you very much!
The
dom
docs state the search input is controlled by the `f``. You can remove it from your dom option.This is your example updated to show the length change to the left and the link to the right:
http://live.datatables.net/zudixaje/1/edit
Notice the use of CSS to float the link to the right.
Maybe something like this:
http://live.datatables.net/kugahuvi/1/edit
Use CSS and the
dom
option to place the elements where you like.Kevin
You are awesome! That did the trick perfectly!! Thank you!!!!