Question

我有一个DataTable，我一直在进行样式/设置，我已经差不多了，但是我无法弄清search {{1 }}

左对齐输入
扩大领域
将重点放在负载上
使字段的大小与网站上其他字段的大小相同

我正在使用以下代码

JQuery

input

当前外观

返回/呈现的HTML

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

如您所见，搜索框小于上面的搜索框（一旦为该搜索框设置样式，该搜索框将被删除），并且不留在表格中。我看过https://datatables.net/网站，找不到我需要的最后几件事。

我不想更新我的<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>，因为我不想影响网站的重置，仅此页面，所以不要介意使用.css添加样式。而且JQuery位于input内，如上面的label所示

Answer 1

解决方案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    
}

Answer 2

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

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

所以我就去寻找

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

2 个答案: