Can't Change Search Box Width Or Position For DataTable

Question

I have a DataTable which i have been styling/setting up and i'm almost there but i just cant figure out the last few styling things i'm after for the search input

• Left align the input
• Make field wider
• Set focus on load
• Make field same size as other fields on site

I have the following code i'm using

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
    }
});

Current look

HTML Returned/Rendered

<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>

As you can see the search box is smaller than the one above (which will be removed once this one is styled) and is not left to the table. I have looked at the https://datatables.net/ site and cant find the last few things i need.

I'd prefer NOT to have to update my .css as i don't want to affect the reset of the site, just this page only so dont mind using JQuery to add styling. also the input is sat inside the label as shown in the HTML above

Answer 1

Not what i was hoping for but resolved by doing the below

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

So got the look i was going for

Answer 2

Solution 1

You can create a custom textbox (in this case you have full control of styling ) in the top of the table and hide the default text box.

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

Solution 2

based on their documentation http://datatables.net/examples/basic_init/dom.html you can add a custom class to the search box container( for example myCustomClass)

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

You can customize the look of the search box by adding styles on that class

.myCustomClass{
background-color:red    
}