How can we solve search bar loading in different place?

How can we solve search bar loading in different place?

devang3devang3 Posts: 16Questions: 1Answers: 0

Description of problem:
How can we solve search bar loading in different place?
I have attached gif of how it's loading

I have used this code to change location of search bar

initComplete: function () {
$("#data-table_filter").detach().appendTo("#search-area");
},

This question has accepted answers - jump to:

Answers

  • tangerinetangerine Posts: 2,968Questions: 23Answers: 350

    The dom options determine the placing of DT elements such as search(filter):
    https://datatables.net/reference/option/dom

  • devang3devang3 Posts: 16Questions: 1Answers: 0

    I am new to JS / jQuery can you help me please check PM

  • kthorngrenkthorngren Posts: 12,482Questions: 25Answers: 2,941

    Please provide a running test case showing how you are trying to place the search bar. Let us know what you expect to happen differently.
    https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

    Kevin

  • devang3devang3 Posts: 16Questions: 1Answers: 0

    See how search shows on right before loading CSS to it... any way to just load it late or hide it?

    live.datatables.net/befurebi/1/

  • colincolin Posts: 11,475Questions: 0Answers: 1,961

    You could call jQuery's hide() method when starting your code, then call show() when finished loading in initComplete,

    Colin

  • devang3devang3 Posts: 16Questions: 1Answers: 0

    Can you edit and show it on test case please? I am learning JS

  • colincolin Posts: 11,475Questions: 0Answers: 1,961
    Answer ✓

    There you go - I used preInit to trigger the hide(). Search for comments with "HERE",

    Colin

  • colincolin Posts: 11,475Questions: 0Answers: 1,961

    One thing to note, you've got a working solution so no point changing it, but you could have used RowGroup to group the wards. Something for next time :)

    Colin

  • devang3devang3 Posts: 16Questions: 1Answers: 0

    Thank You! It worked
    Just added RowGroup to this

    how can we hide entire group with header if data of "gsx$functionalondate.$t" is empty?

    http://live.datatables.net/lefojoze/2/edit

  • devang3devang3 Posts: 16Questions: 1Answers: 0

    @colin ?

  • colincolin Posts: 11,475Questions: 0Answers: 1,961
    Answer ✓

    Sorry for not replying over the week - beer took priority ;)

    You can just hide the grouping row with hidden - see here: http://live.datatables.net/lefojoze/4/edit

    Colin

  • devang3devang3 Posts: 16Questions: 1Answers: 0

    Thank you so much!

  • devang3devang3 Posts: 16Questions: 1Answers: 0

    @colin

    It still has one problem

    live.datatables.net/lefojoze/10/edit

    When data is empty it still shows groups

    this is my data

  • colincolin Posts: 11,475Questions: 0Answers: 1,961

    Something funny is going on there. For example, Ward A is showing 6 rows in your data, but none in the table - that's why the group footer is present. I assume you're doing something with that data, you'll need to factor that in to your code.

    Colin

  • devang3devang3 Posts: 16Questions: 1Answers: 0
    edited May 5

    Yeah if "Functional on (Date)?" column is empty it will hide the row used createdRow for this...

    Even if we remove footer code still same problem live.datatables.net/lefojoze/12/edit

    Also to note: If I edit and select Ward B center name in Yes it shows in Ward A group :D

  • colincolin Posts: 11,475Questions: 0Answers: 1,961

    Yep, so in the rowGroup.startRender you'll need to factor in those hidden rows. You can iterate through them and see if any are unhidden, or use the same logic again with the date.

    I'm not clear what you mean about the editing, as the site we've been looking at is read-only.

    Colin

  • devang3devang3 Posts: 16Questions: 1Answers: 0

    It doesn't have any issue if there is more than 1 row under same ward...

    Its Web View of Google Sheet file...

Sign In or Register to comment.