CODEWITHSUNDEEP
datatables
A prasad
A prasad

Reputation: 143

how to add search icon in datatables

I have a table that is coming from plugin called dataTables and the corresponding data is coming from external json 'members.json'.Everything is working fine but I want to put a search icon inside search textbox just before placeholder and when I key up it should hide and again it should visible when key down completion same as like placeholder.Can anyone please help me on it.Below is my code.

HTML

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.css">
</head>
<body>
<div class="col-md-12">
</div>
<div id="div">
<div>
 <table id="example">
        <thead>
            <tr>            
                <th>name</th>
                <th>stargazerscount</th>
                <th>forkscount</th>
                <th>description</th>               
            </tr>
        </thead>
        <tbody>          
        </tbody>
    </table>
    <script type="text/javascript" charset="utf8" src="js/script.js"></script>
    </div>  
</div>
</body>

script.js

$('#example').DataTable( {
language: {
        searchPlaceholder: "Search records"
    },
 "ajax": {
             "type"   : "POST",
            "url": "http://localhost/js/members.json",
             "dataSrc": function (json) {
      var return_data = new Array();
      for(var i=0;i< json.length; i++){

        return_data.push({

         'name': json[i].name,
          'stargazerscount'  : '<span onclick="f()">'+json[i].stargazerscount+'</span>',
           'forkscount'  : json[i].forkscount,
          'description' : json[i].description
        })

      }

      return return_data;
             }
    },

        "columns": [
            { "data": "name" },
            { "data": "stargazerscount" },
            { "data": "forkscount" },
            { "data": "description" }

        ]

});

members.json

[{
            "name": "mango",
            "stargazerscount": 526,
            "forkscount": "critical",
            "description": "fruits"
        },
        {
            "name": "brinjal",
            "stargazerscount": 526,
            "forkscount": "critical",
            "description": "vagetables"
        },
        {
            "name": "grapes",
            "stargazerscount": 526,
            "forkscount": "major",
            "description": "fruits"
        },
        {
            "name": "soap",
            "stargazerscount": 526,
            "forkscount": "major",
            "description": "groceries"
        },
        {
            "name": "dates",
            "stargazerscount": 526,
            "forkscount": "critical",
            "description": "dryfruits"
        },
        {
            "name": "mobiles",
            "stargazerscount": 526,
            "forkscount": "major",
            "description": "electronics"
        },
        {
            "name": "shirt",
            "stargazerscount": 526,
            "forkscount": "critical",
            "description": "clothes"
        },
        {
            "name": "dates",
            "stargazerscount": 526,
            "forkscount": "critical",
            "description": "dryfruits"
        },
        {
            "name": "mobiles",
            "stargazerscount": 526,
            "forkscount": "major",
            "description": "electronics"
        },
        {
            "name": "shirt",
            "stargazerscount": 526,
            "forkscount": "critical",
            "description": "clothes"
        },
        {
            "name": "shirt",
            "stargazerscount": 526,
            "forkscount": "critical",
            "description": "clothes"
        },
        {
            "name": "dates",
            "stargazerscount": 526,
            "forkscount": "critical",
            "description": "dryfruits"
        },
        {
            "name": "mobiles",
            "stargazerscount": 526,
            "forkscount": "major",
            "description": "electronics"
        },
        {
            "name": "shirt",
            "stargazerscount": 526,
            "forkscount": "critical",
            "description": "clothes"
        },
        {
            "name": "dates",
            "stargazerscount": 526,
            "forkscount": "critical",
            "description": "dryfruits"
        },
        {
            "name": "mobiles",
            "stargazerscount": 526,
            "forkscount": "major",
            "description": "electronics"
        },
         {
            "name": "mobiles",
            "stargazerscount": 526,
            "forkscount": "major",
            "description": "electronics"
        },
         {
            "name": "mobiles",
            "stargazerscount": 526,
            "forkscount": "major",
            "description": "electronics"
        },
         {
            "name": "mobiles",
            "stargazerscount": 526,
            "forkscount": "major",
            "description": "electronics"
        },
         {
            "name": "mobiles",
            "stargazerscount": 526,
            "forkscount": "major",
            "description": "electronics"
        },
         {
            "name": "mobiles",
            "stargazerscount": 526,
            "forkscount": "major",
            "description": "electronics"
        },
         {
            "name": "mobiles",
            "stargazerscount": 526,
            "forkscount": "major",
            "description": "electronics"
        },
         {
            "name": "mobiles",
            "stargazerscount": 526,
            "forkscount": "major",
            "description": "electronics"
        },
        {
            "name": "shirt",
            "stargazerscount": 526,
            "forkscount": "critical",
            "description": "clothes"
        }


    ]

Upvotes: 0

Views: 3731

Answers (1)

Sachi Tekina
Sachi Tekina

Reputation: 1810

You can actually, manipulate the DOM of Datatables and add an id or class. Basically, you assign an id to the filter DOM then use css.

For example:

$(document).ready( function () {

  var table = $('#example').DataTable({
    language: {
        searchPlaceholder: "Search records"
    },
    "dom": "<'#searchid'f>trip"
  });
} );

$( window ).on( "load", function(){
  $("#searchid :input").addClass('empty');
} );

$(document).on('keyup','#searchid :input', function() {
    var input = $("#searchid :input");
    if(input.val().length === 0) {
        input.removeClass('no-icon');
        input.addClass('empty');

    } else {
        input.removeClass('empty');
        input.addClass('no-icon')
    }
});

You can manipulate the CSS below:

input.empty {
    background-image: url(https://cdn4.iconfinder.com/data/icons/iconic/raster/16/magnifying_glass_alt.png);
    background-position: 10px center;
    background-repeat: no-repeat;
    border: 1px solid #ccc;
    padding: 5px 5px 5px 10px;
    text-indent: 20px;
    width: 200px;
}

input.no-icon{
  padding: 5px 5px 5px 10px;
  width: 200px;
}

Take a look at this example I made.

Upvotes: 0

Related Questions