How can i show search bar with fixed header?

How can i show search bar with fixed header?

xaki85xaki85 Posts: 2Questions: 1Answers: 0

Im using Datatable for one of my projects....a great plugin indeed, one thing i want to ask that How can i show search bar with fixed header? when I scroll down, header is fixed but i lose default search bar of datatable and nothing is shown above the header, how can i show default search bar or some of my custom filters within fixed header???

This question has an accepted answers - jump to answer

Answers

  • 990consulting990consulting Posts: 23Questions: 7Answers: 0

    I'm also interested in keeping the search bar and the editor buttons fixed at the top of the page, even as I scroll the data table. One possibility would be to create separate form elements and associate the same Javascript events with them, but it's a little opaque how to do that, since the logic for the placement of these controls seems to be defined outside the user-defined code.

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

    I'm no CSS expert but is this what you are looking for?
    http://live.datatables.net/rahetive/1/edit

    It uses the dom to place the buttons and search input into a div with a class that uses position: sticky. Also fh-fixedHeader is used in the div to offset the FixedHeader.

    Haven't tested this so not sure how compatible or what other configs are needed to make it work properly. Hopefully it gets you started.

    Kevin

  • 990consulting990consulting Posts: 23Questions: 7Answers: 0

    Not quite, but when I discovered that you can put a scroll bar on the side of the data table itself, it solved the problem. The goal is to keep the editor buttons visible at all times. You can do that by making the buttons sticky, or by making the table scrollable. Sticky buttons is hard as hell, but scrollable table is just a setting:

    https://datatables.net/examples/basic_init/scroll_y.html

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    Yes, scrollY is basically another way of achieving what is basically a fixed layout.

    If you didn't want the internal scrolling, then Kevin's suggestion of position: sticky is absolutely the way to go in modern browsers.

    Allan

  • xaki85xaki85 Posts: 2Questions: 1Answers: 0

    @kthorngren it really looks good, I appreciate your effort, now I try to apply that fixed at my end, hopefully things will be all good.

    Thanks you too @allan ...

  • UnlimitedUnlimited Posts: 3Questions: 0Answers: 0

    Hello. These topic is about I am looking for.. but it does not work in responsive layout tables. (I am using BS4, but it has nothing to do with it) I mean sticky solution e.g. in example above
    http://live.datatables.net/rahetive/1/edit
    If the search-bar with buttons are wrapped to more lines, then table header is still showing on its base position for full-screen. Any idea, how to recalculate a sticky table header position?
    Thanks!

  • UnlimitedUnlimited Posts: 3Questions: 0Answers: 0

    Hello. I was able to do it via:
    dataTable.fixedHeader.headerOffset()
    but it does not work for 100%.
    From some small responsive width, from the header two first columns are lost:

    Any idea? On a wider screen, it works properly.

  • UnlimitedUnlimited Posts: 3Questions: 0Answers: 0
    edited December 2019

    Ok, again solved myself with nbsp in header for two first cols.

This discussion has been closed.