CODEWITHSUNDEEP
javascriptjquerydatatables
Čamo
Čamo

Reputation: 4160

How to get search input in DataTables?

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.

Upvotes: 2

Views: 557

Answers (2)

Čamo
Čamo

Reputation: 4160

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.

Upvotes: 1

UserOfStackOverFlow
UserOfStackOverFlow

Reputation: 108

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";

Upvotes: 0

Related Questions