How can we solve search bar loading in different place?

devang3

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");
},

tangerine

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

devang3

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

kthorngren

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

devang3

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/

colin

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

Colin

devang3

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

colin

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

Colin

colin

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

devang3

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

devang3

@colin ?

colin

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

devang3

Thank you so much!

devang3

@colin

It still has one problem

live.datatables.net/lefojoze/10/edit

When data is empty it still shows groups

this is my data

colin

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

devang3

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

colin

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

devang3

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

Its Web View of Google Sheet file...

devang3

@colin can you please help?

colin

There you go - you need to check for the rows having class d-none - see here: http://live.datatables.net/lefojoze/21/edit

Colin

devang3

Thank You!