Не удается изменить ширину поля поиска или положение для таблицы данных

Question

У меня есть DataTable, который я разрабатывал / настраивал, и я почти на месте, но я просто не могу понять последние несколько вещей, которые мне нужны для search input

• Выравнивание по левому краю входа
• Расширение поля
• Установка фокуса на нагрузку
• Создание поля такого же размера, как и другие поля на сайте

У меня есть следующий код, который я использую

JQuery

$('#dialPlanListTable').dataTable({
    "ordering": true,               // Allows ordering
    "searching": true,              // Searchbox
    "paging": true,                 // Pagination
    "info": false,                  // Shows 'Showing X of X' information
    "pagingType": 'simple_numbers', // Shows Previous, page numbers & next buttons only
    "pageLength": 10,               // Defaults number of rows to display in table
    "columnDefs": [
        {
            "targets": 'dialPlanButtons',
            "searchable": false,    // Stops search in the fields 
            "sorting": false,       // Stops sorting
            "orderable": false      // Stops ordering
        }
    ],
    "dom": '<"top"f>rt<"bottom"lp><"clear">', // Positions table elements
    "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]], // Sets up the amount of records to display
    "language": {
        "search": "_INPUT_",            // Removes the 'Search' field label
        "searchPlaceholder": "Search"   // Placeholder for the search box
    }
});

Текущий просмотр

HTML возвращено / обработано

<div class="top">
    <div id="dialPlanListTable_filter" class="dataTables_filter">
        <label>
            <input type="search" class="form-control input-sm" placeholder="Search" aria-controls="dialPlanListTable">
        </label>
    </div>
</div>

Как вы можете видеть, окно поиска меньше указанного выше (которое будет удалено после стилизации) ине осталось на столе.Я просмотрел сайт https://datatables.net/ и не могу найти последние несколько вещей, которые мне нужны.

Я бы предпочел НЕ обновлять мой .css, так как я не хочу влиять наСброс сайта, только эта страница, поэтому не против использовать JQuery для добавления стилей.также input находится внутри label, как показано в HTML выше

Answer 1

Не то, на что я надеялся, но решил, выполнив следующие действия

Answer 2

Решение 1

Вы можете создать собственное текстовое поле ( в этом случае у вас есть полный контроль над стилем ) в верхней части таблицы и скрыть значение по умолчанию.текстовое поле.

  <p>
      <input type="text" id="mySearchText" placeholder="Search...">
      <button id="mySearchButton">Search</button>
   </p>


  var table =  $('#dialPlanListTable').dataTable({
        "ordering": true,               // Allows ordering
        "searching": false,              // Searchbox
        "paging": true,                 // Pagination
        "info": false,                  // Shows 'Showing X of X' information
        "pagingType": 'simple_numbers', // Shows Previous, page numbers & next buttons only
        "pageLength": 10,               // Defaults number of rows to display in table
        "columnDefs": [
            {
                "targets": 'dialPlanButtons',
                "searchable": false,    // Stops search in the fields 
                "sorting": false,       // Stops sorting
                "orderable": false      // Stops ordering
            }
        ],
        "dom": '<"top"f>rt<"bottom"lp><"clear">', // Positions table elements
        "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]], // Sets up the amount of records to display
        "language": {
            "search": "_INPUT_",            // Removes the 'Search' field label
            "searchPlaceholder": "Search"   // Placeholder for the search box
        }
    });
 $('#mySearchButton').on( 'keyup click', function () {
    table.search($('#mySearchText').val()).draw();
  } );

Решение 2

на основе их документации http://datatables.net/examples/basic_init/dom.html вы можете добавить пользовательский класс в контейнер окна поиска (например,myCustomClass)

   "dom": '<"myCustomClass"f>rt<"bottom"lp><"clear">', // Positions table elements

Вы можете настроить внешний вид окна поиска, добавив стили для этого класса

.myCustomClass{
background-color:red    
}