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.

It's impossible to know the DOM by looking at an image and your attempt. Please show a minimal code example. — Rafael, Nov 01 '18 at 04:00
Are you using Bootstrap framework? I have done some similar on some project using Bootstrap... — Shidersz, Nov 01 '18 at 04:09
@Rafael All I have is simple HTML code with library imports from the [datatables](https://datatables.net/examples/styling/bootstrap) API. I have written nothing special, whether it is HTML or JS. — Jarvis, Nov 01 '18 at 05:35
Yes. I am using [Bootstrap datatables](https://datatables.net/examples/styling/bootstrap) API. @D.Smania — Jarvis, Nov 01 '18 at 05:54

score 3 · Accepted Answer · edited Jun 20 '20 at 09:12

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>

Setup 2:

"<'row'<'col-sm-6'<'pull-left'l><'pull-left'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-6">
    <div class="pull-left">l</div>
    <div class="pull-left">f</div>
  </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-6'<'pull-left'l><'pull-left'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>

Finally, as shown on the examples, and to apply a custom setup, just push a value on the dom option at the plugin initialization, like this:

var domSetup = "<'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>>";

$('#myTable').dataTable({
    /* Other initialization options */
    ...,
    "dom": domSetup
});

Note, you can do a fully display customization managing the dom option, I hope this guide helps you.

score 0 · Answer 2 · answered Nov 01 '18 at 08:44

0

Try adding pull-left class to your searchbar

answered Nov 01 '18 at 08:44

Fotis Papadamis

184
3
14

Could you explain more with some code or probably a fiddle? – Jarvis Nov 01 '18 at 09:03
It's a Bootstrap class. Take a look at it https://getbootstrap.com/docs/3.3/css/#helper-classes-floats – Fotis Papadamis Nov 01 '18 at 09:10

Customization of Display Format for Datatables Plugin in Boostrap 3

2 Answers2

Linked