Search Box Responsive and Style

Hi,

thanks for your post, and sorry for the trouble.

1. The search box can be used in CSS code, like

.dataTables_filter input {
  border-radius: 5px;
}

Just add the desired CSS properties in that.

2. For this, please try the approach from https://www.ads-software.com/support/topic/datatables-buttons-buttons-under-table/#post-9516466

Regards,
Tobias

Thanks question oen is resolved.

For the placeholder text, I cant seem to get it to work. I entered the below in the custom command but everything disappears now.

“language”: $.extend( {}, DataTables_language[“en_US”], { “searchPlaceholder”: “Search” } )

What do you suggest?

Hi,

Can you please post a link to the page with the table where this problem happens, so that I can take a direct look? Thanks!

Regards,
Tobias

Sure, https://bit.ly/2GZM3zY

Hi,

ok, in your case, this is a bit more tricky, because you are using other DataTables Extensions as well, so that we’ll need an adjusted command:

"columnDefs": [ { "orderable": false, "targets": [ 0, 1, ] } ], "order": [ [ 6, "desc" ] ],"dom": "Wlfrtip","oColumnFilterWidgets": { "aiExclude": [ 0,1,4,5,6,7,9,8 ] }, "language": { "search": "", "searchPlaceholder": "Search" }

Regards,
Tobias

Yes, perfect it works! Much appreciated.

Hi,

no problem, you are very welcome! ?? Good to hear that this helped!

Best wishes,
Tobias

Hey Tobias,

Am trying to do the same thing as before, being inputting a custom command for another table / page to include the search placeholder text in the same box.

The page in questions is > https://tinyurl.com/y4vmk2jf

When I enter the custom command you provided previously it makes the column filter widget and search box disappear. I know its probably a little adjustment but I cant get it work.

Thanks in advance.

Cheers

Hi,

for that table, the “Custom Command” should be

"columnDefs": [ { "orderable": false, "targets": [ 0, 1, ] } ],"dom": "Wlfrtip","oColumnFilterWidgets": { "aiExclude": [ 0,1,4 ] }, "language": { "search": "", "searchPlaceholder": "Search" }

Regards,
Tobias

Hi Tobais,

It worked great thanks again.

One further question, with the new custom command you gave me for the first table, I previously had a sorting command included. I wish to change the sorting so the order is sorted random at each refresh. What change is required to the custom command below to make this happen;

“columnDefs”: [ { “orderable”: false, “targets”: [ 0, 1, ] } ], “order”: [ [ 6, “desc” ] ], “columnDefs”: [ { “orderable”: false, “targets”: [ 0, 1, ] } ], “order”: [ [ 6, “desc” ] ],”dom”: “Wlfrtip”,”oColumnFilterWidgets”: { “aiExclude”: [ 0,1,4,5,6,7,9,8 ] }, “language”: { “search”: “”, “searchPlaceholder”: “Search” }

Hi,

achieving a random initial sort is not possible with a JavaScript “Custom Command”. For a random initial order, you could use the TablePress Extension from https://tablepress.org/extensions/table-row-order/

Regards,
Tobias

Got it, worked well. thanks again.

Hi,

great, thanks for the confirmation!

Best wishes,
Tobias

Hi,

DataTables ColumnFilterWidgets just not appearing on my page – all required plugins installed & activated. I am using below mentioned shortcode :

[table id=2 datatables_columnfilterwidgets=true /]

Hi rksingh1,

Can you please post a link to the page with the table where this problem happens, so that I can take a direct look? Thanks!

Regards,
Tobias