无法更改数据表的搜索框宽度或位置

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

不是我所希望的，但通过执行以下操作解决了

    $('#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
        },
        "search": {
            "addClass": 'form-control input-lg col-xs-12'
        },
        "fnDrawCallback":function(){
            $("input[type='search']").attr("id", "searchBox");
            $('#dialPlanListTable').css('cssText', "margin-top: 0px !important;");
            $("select[name='dialPlanListTable_length'], #searchBox").removeClass("input-sm");
            $('#searchBox').css("width", "300px").focus();
            $('#dialPlanListTable_filter').removeClass('dataTables_filter');
        }
    });

所以得到了我想要的外观