Как добавить X, чтобы очистить поле ввода

Question

Я использую datatable. js на двух страницах. На одной есть X, чтобы очистить поле ввода, на другой нет

Когда я использую инспектор dom в chrome, в dom, где X находится ничего нет.

Мне кажется, я установил одинаковые параметры на обеих страницах; что мне не хватает?

Answer 1

Inside Datatable инициализация для установки initComplete функция для получения input type and wrap div + button с помощью Bootstrap4 предопределено классы, а также написать несколько хитрых css для show & hide кросс-кнопки, когда вход имеет какое-то значение, тогда показать кросс, если нет, тогда скрыть .
Также добавлено нажмите функциональность на cross кнопку для redraw с возможностью ввода данных и установите нулевое значение ввода на .search('').

Это работает на всех браузерах.

Надеюсь, приведенный ниже фрагмент поможет Вы много.

$(function(){
  $('#example').DataTable({
    initComplete: function(settings) {
      //settings.nTable.id --> Get table ID
      $('#'+settings.nTable.id+'_filter input').wrap(`
      	<div class="d-inline-flex position-relative"></div>
      `).after(`
      	<button type="button" class="close position-absolute" aria-label="Close" style="right:5px">
      	  <span aria-hidden="true">&times;</span>
      	</button>
      `).attr('required','required').attr('title','Search');

      // Click Event on Clear button
      $(document).on('click', '#'+settings.nTable.id+'_filter button', function(){
         $('#'+settings.nTable.id).DataTable({
           "retrieve": true,
          }).search('').draw(); // reDraw table
      });
     }
  });
});

.dataTables_wrapper .dataTables_filter input:not(:valid):not(:focus){
  box-shadow: 0 0 5px #fff!important;
}
.dataTables_wrapper .dataTables_filter input::-webkit-search-cancel-button {
  -webkit-appearance: none!important;
}
.dataTables_wrapper .dataTables_filter button{
  visibility: hidden;
  outline: none;
}
.dataTables_wrapper .dataTables_filter input:valid ~ button{
  visibility: visible;
}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">
  
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>

<div class="container-fluid my-4">
  <div class="row">
    <div class="col-sm-12">
      <table id="example" class="table table-striped">
        <thead>
          <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th> date</th>
            <th>Salary</th>
          </tr>
        </thead>
        <tbody>
          <tr>
           <td>Tiger Nixon</td>
           <td>System Architect</td>
           <td>Edinburgh</td>
           <td>61</td>
           <td>2011/04/25</td>
           <td>$320,800</td>
          </tr>
          <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$170,750</td>
          </tr>
          <tr>
            <td>Ashton Cox</td>
            <td>Junior Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>$86,000</td>
           </tr>
           <tr>
             <td>Cedric Kelly</td>
             <td>Senior Javascript Developer</td>
             <td>Edinburgh</td>
             <td>22</td>
             <td>2012/03/29</td>
             <td>$433,060</td>
           </tr>
          </tbody>	
        </table>
     </div>
    </div>
</div>

Answer 2

Было бы неплохо с реальным примером. По скриншоту мне кажется, что вы используете разные стили, и я думаю, bootstrap4 на второй странице. Bootstrap преднамеренно удалите × с помощью

[type="search"] { -webkit-appearance: none; }

Если вы используете стили загрузки DataTables bootstrap4, вы можете заставить кнопку отмены снова появляться в поле ввода фильтра DT с помощью

.dataTables_wrapper .dataTables_filter input::-webkit-search-cancel-button {
  -webkit-appearance: button !important;
  -moz-appearance: button !important; 
}

Это проблема WebKit / Blink. Я думаю, что эквивалентный край называется ::-ms-clear, но у него нет windows для его проверки.

---

Демо -> https://jsfiddle.net/au0j4h89/