Can I add class to the search input via the layout options ?

MelodyNelson

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

Hi,

I'm trying to use some BULMA classes (I want to use 3) for the search input but I didn't find options concerning class here :
https://datatables.net/reference/feature/search.text

The search input is really small, but if I can add some class and tags, it will be better.

layout: {
        topStart: 'pageLength',
        topEnd: {
            search: {
                text: '_INPUT_',
                placeholder: 'Rechercher dans la liste'
            },
        },          
        bottomStart: 'info',
        bottomEnd: 'paging'
    }

Also, I'm wondering if I can add directly the HTML code for the search input and all the « markdown » I want and not use _INPUT_ at all
I've tried, but in this case, there are 2 search inputs, see for example :
https://live.datatables.net/fukivame/1/edit

Thank you

kthorngren

Use initComplete to add the classname using jQuery or Javascript. Updated example:
https://live.datatables.net/cesuqure/1/edit

  initComplete: function () {
    $('div.dt-search input').addClass('testClass')
  }

Kevin

kthorngren

You may also be interested in this thread. Updated example using that technique:
https://live.datatables.net/picawuhu/1/edit

div.dt-container div.dt-layout-cell.dt-end input {
  background-color: lightblue !important;
}

Kevin

MelodyNelson

Thanks Kevin,

I know how to do it with CSS.

I was was wondering if I could put it inside the layout options because I could choose easily the class « case by case » and not apply the same style for all the datatables.

MelodyNelson

I choose a compromise to have a look alike BULMA, I didn't change the CSS but did only this :

layout: {
        topStart: 'pageLength',
        topEnd: {
            search: {
                text: '_INPUT_',
                placeholder: 'Rechercher dans la liste'
            },
        },          
        bottomStart: 'info',
        bottomEnd: 'paging'
    },
initComplete: function () {
        $('div.dt-search input').addClass('input is-rounded is-small maxw300');
        $('div.dt-search input').removeClass('dt-input');
        $('div.dt-search').removeClass('dt-search');
    }

Without the BULMA classes, it was really small and compact :

kthorngren

Looking at the new Features docs I don't see any options to apply class names to the search feature.

Hopefully the dt-input and dt-search classes are used only for styling. @allan can comment if removing those will affect anything else.

Kevin

MelodyNelson

(I've lost my post... starting again)

I'm using BULMA on the website, so I've change DT standard for DT with BULMA styles to give it a try.

Since my last message, the initComplete is different (I don't change anymore dt-inputand dt-search and I'm changing other things) :

initComplete: function () {
        $('nav.pagination').addClass('is-small');
        $('div.dtsp-panesContainer button').addClass('is-small');
    }

Maybe it's « less dangerous » like that but I think I should use something else because I'm losing the added CSS when I'm changing page. Or could it be a bug ?

allan

You can set the class name to be used for the input in the search feature with the static DataTable.ext.classes.search.input property:

DataTable.ext.classes.search.input =
  'input is-rounded is-small maxw300';

var table = new DataTable('#example');

For the Bulma integration, I've got it set to be input. Is it just that you want to add the extra classes, or is that expected in a Bulma site?

Allan

MelodyNelson

Hi Allan,

Thanks for the tip about the class, I will explore the files

If I can play with classes, it's OK for me.

About what is expected, I can't answer for « BULMA », the INPUT is the simple way.
You can have more options if you want to add icons for example but it's a few more HTML tags to add :
https://bulma.io/documentation/form/general/#with-icons

I don't know if I answered your question correctly because of my « lack of English »

MelodyNelson

If you have any clue to add a class for the nav pagination BULMA.
I want to add « is-small » after the class « pagination ».
I did it in the JS file but I don't like changing the DT files.

DataTable.ext.renderer.pagingContainer.bulma = function (settings, buttonEls) {
    var nav = $('<nav class="pagination" role="navigation" aria-label="pagination"><ul class="pagination-list"></ul></nav>');

If I'm doing it like that, the second class (is-small) is here when the table is loaded but disappear when I'm changing page :

initComplete: function () {
        $('nav.pagination').addClass('is-small');
        $('div.dtsp-panesContainer button').addClass('is-small');
    }

Thank you

kthorngren

You might need to use the page event or draw event to reapply the classes.

Kevin

MelodyNelson

Thanks Kevin.

It didn't find how to use the page Event to try it in this code, but the draw callback works fine (I use it to share common settings for all the tables on the website).

Object.assign(DataTable.defaults, {
    language: { url: '//cdn.datatables.net/plug-ins/2.0.0/i18n/fr-FR.json' },
    lengthMenu: [10, 25, 50, 100, { label: 'Tout', value: -1 }],
    pageLength: 25,
    pagingType: 'numbers', // simple_numbers, full_numbers
//  processing: true,
    layout: {
        topStart: 'pageLength',
        topEnd: {
            search: {
                text: '_INPUT_',
                placeholder: 'Rechercher dans la liste'
            },
        },          
        bottomStart: 'info',
        bottomEnd: 'paging'
    },
    initComplete: function () {
//      $('nav.pagination').addClass('is-small');
        $('div.dtsp-panesContainer button').addClass('is-small');
    },
    drawCallback: function (settings) {
        $('nav.pagination').addClass('is-rounded is-small');
    },
});

kthorngren

Nice solution.

Kevin