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

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

MelodyNelsonMelodyNelson Posts: 213Questions: 33Answers: 2

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

This question has accepted answers - jump to:

Answers

  • kthorngrenkthorngren Posts: 21,343Questions: 26Answers: 4,954
    edited February 22 Answer ✓

    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

  • kthorngrenkthorngren Posts: 21,343Questions: 26Answers: 4,954
    edited February 22

    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

  • MelodyNelsonMelodyNelson Posts: 213Questions: 33Answers: 2

    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.

  • MelodyNelsonMelodyNelson Posts: 213Questions: 33Answers: 2

    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 :

  • kthorngrenkthorngren Posts: 21,343Questions: 26Answers: 4,954

    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

  • MelodyNelsonMelodyNelson Posts: 213Questions: 33Answers: 2

    (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 ?

  • allanallan Posts: 63,534Questions: 1Answers: 10,475 Site admin
    Answer ✓

    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

  • MelodyNelsonMelodyNelson Posts: 213Questions: 33Answers: 2

    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 »

  • MelodyNelsonMelodyNelson Posts: 213Questions: 33Answers: 2

    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

  • kthorngrenkthorngren Posts: 21,343Questions: 26Answers: 4,954
    Answer ✓

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

    Kevin

  • MelodyNelsonMelodyNelson Posts: 213Questions: 33Answers: 2

    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');
        },
    });
    
  • kthorngrenkthorngren Posts: 21,343Questions: 26Answers: 4,954

    Nice solution.

    Kevin

Sign In or Register to comment.