как добавить значок поиска в таблицы данных - PullRequest
Новая
       7

как добавить значок поиска в таблицы данных

0 голосов
/ 05 мая 2018

У меня есть таблица из плагина dataTables, а соответствующие данные поступают из внешнего json 'members.json'. Все работает нормально, но я хочу поместить значок поиска в текстовое поле поиска непосредственно перед заполнителем и когда я Поднимите ключ, он должен скрыться, и снова он должен быть виден, когда завершение нажатия клавиши такое же, как для заполнителя. Может кто-нибудь, пожалуйста, помогите мне. Ниже приведен мой код.

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"
        }


    ]

1 Ответ

0 голосов
/ 07 мая 2018

На самом деле вы можете манипулировать DOM Datatables и добавить id или class. По сути, вы присваиваете id фильтрующему DOM, а затем используете css.

Например: 

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

Вы можете манипулировать CSS ниже: 

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

Взгляните на этот пример Я сделал.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...