change the appearance of the default search input box
change the appearance of the default search input box

in DataTables
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>');
});
This discussion has been closed.
Replies
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
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
in my css file:
I forgot to mention, the first bit of code requires the Font Awesome library