javascript - Customization of Display Format for Datatables Plugin in Boostrap 3

Question

I want to move my search bar just next to the position of Show entries, that is, to the left position. I have this CSS style code applied to the filter input:

.dataTables_filter {
    width: 50%;
    float: left;
    text-align: left;
}

It did move to left but not as expected, it just moved a bit to the left, in the center. Like in the next image:

Any idea how to fix this? Another acceptable solution is to just exchange the position of Show entries and Search. If that is possible, how can I do that?

Regarding my code, I have done nothing special and I only imported the library directly from the datatables API. All I have is just a simple HTML code for displaying a table.

Answer 1

Since you are using Bootstrap, I will explain how to work with the display of elements related to the datatables plugin. Datatables provides a way to configuring the dom, in other words, it let you configure how to display the different elements that form part of the table. These are identified like this:

The built-in table control elements in DataTables are:

l - length changing input control
f - filtering input
t - The table!
i - Table information summary
p - pagination control
r - processing display element

And the default dom configuration for Bootstrap on Datatables are the next ones:

Bootstrap 3:

"<'row'<'col-sm-6'l><'col-sm-6'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-5'i><'col-sm-7'p>>"

Bootstrap 4:

"<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>"

Now, the setup of the dom for Bootstrap 3 is then traduced to the following html markup:

<div class="row">
  <div class="col-sm-6">l</div>
  <div class="col-sm-6">f</div>
</div>
<div class="row">
  <div class="col-sm-12">tr</div>
</div>
<div class="row">
  <div class="col-sm-5">i</div>
  <div class="col-sm-7">p</div>
</div>

That is why when you used the following CSS style on the filtering control it just goes to the middle of the page (note the filtering control f is wrapped inside a col-sm-6 element):

.dataTables_filter {
  width: 50%;
  float: left;
  text-align: left;
}

The good thing is that you can change this setup on Datatables initialization using the dom option. In your particular case, you can try out the next two setups, however, I invite you to play a little to found another one more convincing to you::

Setup 1:

"<'row'<'col-sm-3'l><'col-sm-3'f><'col-sm-6'>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-5'i><'col-sm-7'p>>"

That will be traduced to next html:

<div class="row">
  <div class="col-sm-3">l</div>
  <div class="col-sm-3">f</div>
  <div class="col-sm-6"></div>
</div>
<div class="row">
  <div class="col-sm-12">tr</div>
</div>
<div class="row">
  <div class="col-sm-5">i</div>
  <div class="col-sm-7">p</div>
</div>

Example in Bootstrap 3:

$(document).ready(function()
{
    var domCfg = "<'row'<'col-sm-3'l><'col-sm-3'f><'col-sm-6'>>" +
                 "<'row'<'col-sm-12'tr>>" +
                 "<'row'<'col-sm-5'i><'col-sm-7'p>>";

    $('#example').DataTable({
        dom: domCfg
    });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap.min.js"></script>

<div class="container-fluid">
<table id="example" class="table table-striped table-bordered" style="width:100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
    </tr>
    <tr>
      <td>Ashton Cox</td>
      <td>Junior Technical Author</td>
      <td>San Francisco</td>
      <td>66</td>
    </tr>
  </tbody>
</table>
</div>