change the appearance of the default search input box

montoyam

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>');
                    });

montoyam

allan

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

montoyam

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);
}

montoyam

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