Переименовать ярлык, сгенерированный загрузчиком - PullRequest
Новая
       9

Переименовать ярлык, сгенерированный загрузчиком

0 голосов
/ 28 апреля 2018

Я хочу изменить текстовое содержимое «Поиск» рядом с фильтром ввода. Я использую шаблон таблицы и сгенерирован поисковый фильтр, я хочу изменить текст search , потому что я хочу использовать другой язык.

Используя инструмент разработки, я обнаружил, что идентификатор div равен user_data_filter , и он находится под элементом label.

Я могу изменить это, скопировав форму ввода и изменив текст для поиска 

$('#user_data_filter label').html('Keresés:  <input type="search" class="form-control input-sm" placeholder aria-controls="user_data">');

но после моей замены фильтр не работает, и я не знаю почему ..

Вот HTML: 

<html>
 <head>
  <title>Iskola Tábla</title>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
  <style>
  body
  {
   margin:0;
   padding:0;
   background-color:#f1f1f1;
  }
  .box
  {
   width:1270px;
   padding:20px;
   background-color:#fff;
   border:1px solid #ccc;
   border-radius:5px;
   margin-top:25px;
   box-sizing:border-box;
  }
  </style>
 </head>
 <body>
  <div class="container box">
   <h1 align="center">Iskola Tábla</h1>
   <br />
   <div class="table-responsive">
   <br />
    <div align="right">
     <button type="button" name="add" id="add" class="btn btn-info">Hozzáadás</button>
    </div>
    <br />
    <div id="alert_message"></div>
    <table id="user_data" class="table table-bordered table-striped">
     <thead>
      <tr>
       <th>Ügyfél neve</th>
       <th>Termék</th>
       <th></th>
      </tr>
     </thead>
    </table>
   </div>
  </div>
 </body>
</html>

<script type="text/javascript" language="javascript" >
 $(document).ready(function(){
  fetch_data();
  function fetch_data()
  {
   var dataTable = $('#user_data').DataTable({
   });
  }
 });
</script>

Может ли кто-нибудь помочь мне изменить текстовое содержимое search с работающим фильтром?

Ответы [ 2 ]

0 голосов
/ 28 апреля 2018

Эти метки и элементы управления являются частью таблиц данных и недоступны до инициализации. Вы можете использовать функцию обратного вызова, если вы действительно хотите продолжить этот подход: 

var dataTable = $ ('#user_data').DataTable({
    "initComplete": function (settings, json){
        $('# user_data_filter label').html('Keresés: <input type = "search" class = "form-control input-sm" placeholder aria-controls="user_data">');
    }
});

Однако, если я вас правильно понял, вы бы хотели отобразить данные на другом языке. Поэтому, вместо того, чтобы пытаться заново изобрести колесо, я настоятельно рекомендую вам поближе познакомиться со многими вариантами, которые уже доступны для вас.

https://datatables.net/reference/option/language

https://datatables.net/manual/i18n

0 голосов
/ 28 апреля 2018

Ваш код работает нормально, ваша строка $('#user_data_filter label').html('...'); вставлена ​​в функцию $(document).ready? Это сработало для меня.

Если вы хотите сделать замену более динамичной, вы можете заменить только слово «Поиск». Этот код будет выглядеть следующим образом и также будет помещен в функцию $(document).ready. 

var labelElem = $("#user_data_filter > label");
var newText = labelElem.html().replace("Search", "Keresés");
labelElem.html(newText);

Пример JSFiddle.

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

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

...