How to add placeholder text with search icon on jQuery data tables

Add

"searchPlaceholder": "search"

$('#datatable').DataTable({
        "dom": 'lCfrtip',
            "order": [],
            "colVis": {
            "buttonText": "Hiển thị",
                "overlayFade": 0,
                "align": "right"
        },
        "language": {
            "lengthMenu": '_MENU_ bản ghi trên trang',
                "search": '<i class="fa fa-search"></i>',
                "searchPlaceholder": "search",
                "paginate": {
                "previous": '<i class="fa fa-angle-left"></i>',
                    "next": '<i class="fa fa-angle-right"></i>'
            }
        }
    });

For make that, you can use background-image. try

UPDATE

$(document).ready(function() {
  
    $(".searchIn").keypress(function(){
      $(this).removeClass().addClass("searchOut")
    })
    
    $(".searchIn").click(function(){
      if(!$(this).hasClass("searchOut"))
        $(this).addClass("searchIn")
    })
    
    $(document).on("keyup",".searchOut", function(){
      if(($(this).val().length) == 0 )
        $(this).removeClass().addClass("searchIn")
    })
})

.searchIn{
  background:url(https://cdn0.iconfinder.com/data/icons/basic-website/512/search-website-512.png) no-repeat scroll left center / 15px auto;
}

.searchOut{
background:none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <input type="text" class="searchIn"  />
</div>

How to add placeholder text with search icon on jQuery data tables

Tags:

Javascript

Css

Jquery

Datatables

Related

Recent Posts