change the appearance of the default search input box

change the appearance of the default search input box

montoyammontoyam Posts: 568Questions: 136Answers: 5

There may be an easier way to do this, but this worked for me:

In my CSS I added:

/* dataTables Search input box */

    .dataTables_filter {
        position: relative;
    }

    .dataTables_filter input {
        width: 250px;
        height: 32px;
        background: #fcfcfc;
        border: 1px solid #aaa;
        border-radius: 5px;
        box-shadow: 0 0 3px #ccc, 0 10px 15px #ebebeb inset;
        text-indent: 10px;
    }

    .dataTables_filter .fa-search {
        position: absolute;
        top: 10px;
        left: auto;
        right: 10px;
    }

in my javascript I added this before the dataTables are initialized:

    //remove the default 'Search' text for all DataTable search boxes
        $.extend(true, $.fn.dataTable.defaults, {
            language: {
                search: ""
            }
        });

then after they are initalized i added (I usuallly have more than one DataTables on a page)

                //custom format of Search boxes
                    $('[type=search]').each(function () {
                        $(this).attr("placeholder", "Search...");
                        $(this).before('<span class="fa fa-search"></span>');
                    });

Replies

  • montoyammontoyam Posts: 568Questions: 136Answers: 5

  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin

    Looks superb like that - thanks for sharing this! It is nice to see something other than the flat designs that have been so prevalent lately.

    Regards,
    Allan

  • montoyammontoyam Posts: 568Questions: 136Answers: 5

    thanks. I love DataTables out of the box, but I am always looking for a little more 'spice' for them.

    I am searching the forums for other styling ideas and such. I wish there was a section, similar to the Announcements section, that has formatting tips and ideas.

    Another trick I learned with bootstraps was the use of cards and drop shadows to make them snap :)

                <div class="col-md-4">
                    <div class="card pt-3 mb-3">
                        <h3 class="card-title">Invoice Categories/Sections</h3>
                        <div class="card-body">
                            <table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="Categories"></table>
                        </div>
                    </div>
                </div>
    

    in my css file:

    div.card {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    

  • montoyammontoyam Posts: 568Questions: 136Answers: 5

    I forgot to mention, the first bit of code requires the Font Awesome library

Sign In or Register to comment.