How to get search input in DataTables?

Question

This are DataTables https://datatables.net/forums/discussion/23922/assign-an-id-to-the-search-input

I have an implementation in Vue3 project but I am not able to fix some I mean bugs in there. It should be simple but I am not able to get any dynamically generated elements in there. For example needs to add class to the search input. According the link I mentioned above the code I use looks like

    setDataTable() {
        var table = $('#myTable');

        if( this.dataTableObject ) return this.dataTableObject.draw();

        this.dataTableObject = table.DataTable({
            'responsive': true,
            "pageLength": 10,
            ...
        });


        // Both selectors are empty. 
        $('.dataTables_wrapper').find('input');  
    }

Before the code I import the required libraries

import "datatables.net-bs4/css/dataTables.bootstrap4.css"
import 'datatables.net-bs4'

But selector is empty. Hope somebody will know cause I spend the whole day on it without any success. Thanks.

Can you please add your complete code?

BeerusDev
– BeerusDev

2021-08-19 15:53:56 +00:00
Commented Aug 19, 2021 at 15:53 — BeerusDev
– BeerusDev, Commented Aug 19, 2021 at 15:53
There is little more code.

Čamo
– Čamo

2021-08-19 20:26:24 +00:00
Commented Aug 19, 2021 at 20:26 — Čamo
– Čamo, Commented Aug 19, 2021 at 20:26

Čamo · Accepted Answer · 2021-08-19 20:15:32Z

1

My solution is based on draw event.

this.dataTableObject.on('draw', function(e) {
    $(this).closest('.dataTables_wrapper')
        .removeClass('form-inline')
        .find('.col-xs-12').addClass('col-12');
});

DataTables forum says that I have old DTBootstrap4 version. So I am curious what they answer in the question I asked them. Cause this is really dirty code.

answered Aug 19, 2021 at 20:15

Čamo

4,41318 gold badges80 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dharman · Accepted Answer · 2021-08-19 18:21:46Z

0

this element is easyly editable, I've added 'style="background: green"' for the input search ant it worked.

Try to set property by property using:

document.getElementById("p2").style.color="blue";

Or try change entire class using:

document.getElementById("p2").className = "classname";

edited Aug 19, 2021 at 18:21

Dharman♦

34k27 gold badges106 silver badges157 bronze badges

answered Aug 19, 2021 at 18:16

UserOfStackOverFlow

1281 gold badge3 silver badges15 bronze badges

3 Comments

Čamo Over a year ago

So why you thing the code $('.dataTables_filter input').addClass( 'form-control' ); does not work?

UserOfStackOverFlow Over a year ago

It depends how the project is structured, the rest of codes above work for you? I recommend you make a minimal test to check this.

Čamo Over a year ago

Ok thanks. Today minimal means vue, webpack, bundlers, modules, ..... Its like 10 years ago. Code it still more and more complicated. I have a solution but it looks really bad.

Collectives™ on Stack Overflow

How to get search input in DataTables?

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related