Bootstrap Datatables Javascript - Lengthmenu and export buttons too smooshed against each other - want to create line break between the two

user_8543373 0
Viewed 1052

I have a searchable table I'm developing where users need to be able to export their results, but also select the number of results they see. The problem is that everything looks too crammed together. I want to be able to add a line break, paragraph, or a div to space things out. Basically, I want this:

Project Search

Show [Number] Entries

[Copy] [Excel] [CSV] [PDF] [Column Visibility]

[My table]

How would I go about doing this? I can't rely on my trusty BR and P html tags here, but I would like to figure this out.

$(document).ready(function() {
  $('#example').DataTable({
    "lengthMenu": [10, 25, 50, 75, 100],
    dom: 'lBfrtip',
    "columnDefs": [{
        "targets": [],
        "visible": false,
        "searchable": false
      },
      {
        "targets": [],
        "visible": false
      }
    ],

    buttons: [{
        extend: 'copyHtml5',
        exportOptions: {
          columns: ':visible',
          format: {
            body: function(data, row, column, node) {
              var text = node.textContent;
              return column === 10 ? text.replace(/Open$/, '').trim() : data;
            }
          }
        }
      },
      {
        extend: 'excelHtml5',
        exportOptions: {
          columns: ':visible',
          format: {
            body: function(data, row, column, node) {
              var text = node.textContent;
              return column === 10 ? text.replace(/Open$/, '').trim() : data;
            }
          }
        }
      },
      {
        extend: 'csvHtml5',
        exportOptions: {
          columns: ':visible',
          format: {
            body: function(data, row, column, node) {
              var text = node.textContent;
              return column === 10 ? text.replace(/Open$/, '').trim() : data;
            }
          }
        }
      },


      {
        extend: 'pdfHtml5',
        orientation: 'landscape',
        exportOptions: {
          columns: ':visible',
          format: {
            body: function(data, row, column, node) {
              var text = node.textContent;
              return column === 10 ? text.replace(/Open$/, '').trim() : data;
            }
          }
        }
      },

      'colvis'
    ]
  });
});
div.dt-button-collection {
  width: 215px;
}

.display.dataTable {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 12px;
}

.modal {
  max-width: 1000px;
  margin: 2rem auto;
}

td.none {
  display: none;
}
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" />
<link rel "=stylesheet" href="https://cdn.datatables.net/buttons/1.6.2/css/buttons.dataTables.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />

<link href="https://cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.4.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.html5.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.colVis.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">


<table id="example" class="display">
  <thead>
    <tr>
      <th class="all" data-toggle="tooltip" title="The known name of the project.">Project Name</th>
      <th class="all" data-toggle="tooltip" title="The provided unique ID that distinguishes projects.">Project Number</th>
      <th class="all" data-toggle="tooltip" title="The conclusing time point of a project, which is sometimes, but not always the point at which funding ends.">End Date</th>
      <th class="all" data-toggle="tooltip" title="The primary funder of the project.">Funder</th>

      <th class="all" data-toggle="tooltip" title="A brief description on the scope and aims of a project.">Abstract</th>

    </tr>
  </thead>
  <tbody>

    <tr>

      <td>Project 1</td>

      <td>P-1</td>

      <td>2018-04-30 00:00:00</td>

      <td>NIH</td>

      <td>
        <div id="ex83" class="modal">
          <p>

            Abstract 1
            <a href="#" rel="modal:close"></a>
        </div>
        <p><a href="#ex83" rel="modal:open"><button class="button">Open<span></span></button></a></p>
      </td>
    </tr>
    <tr>

      <td>Project 2</td>

      <td>P-2</td>

      <td>2024-03-31 00:00:00</td>

      <td>NIH</td>

      <td>
        <div id="ex103" class="modal">
          <p>

            Abstract 2
            <a href="#" rel="modal:close"></a>
        </div>
        <p><a href="#ex103" rel="modal:open"><button class="button">Open<span></span></button></a></p>
      </td>
    </tr>
    <tr>

      <td>Project 3</td>

      <td>P-3</td>

      <td>2021-01-31 00:00:00</td>

      <td>NIH</td>

      <td>
        <div id="ex111" class="modal">
          <p> Abstract 3</p>
          <a href="#" rel="modal:close"></a>
        </div>
        <p><a href="#ex111" rel="modal:open"><button class="button">Open<span></span></button></a></p>
      </td>
    </tr>


  </tbody>
</table>

bootstrap-4 datatables html jquery javascript
1 Answers

If I understood you correctly, I only added this CSS rule:

.dataTables_length {
    position: relative;
    float: none !important;
    text-align: center;
}

Obviously, if you don't want the Show [Number] Entries horizontally centered, just remove text-align: center;

$(document).ready(function() {
  $('#example').DataTable({
    "lengthMenu": [10, 25, 50, 75, 100],
    dom: '<l>Bfrtip',
    "columnDefs": [{
        "targets": [],
        "visible": false,
        "searchable": false
      },
      {
        "targets": [],
        "visible": false
      }
    ],

    buttons: [{
        extend: 'copyHtml5',
        exportOptions: {
          columns: ':visible',
          format: {
            body: function(data, row, column, node) {
              var text = node.textContent;
              return column === 10 ? text.replace(/Open$/, '').trim() : data;
            }
          }
        }
      },
      {
        extend: 'excelHtml5',
        exportOptions: {
          columns: ':visible',
          format: {
            body: function(data, row, column, node) {
              var text = node.textContent;
              return column === 10 ? text.replace(/Open$/, '').trim() : data;
            }
          }
        }
      },
      {
        extend: 'csvHtml5',
        exportOptions: {
          columns: ':visible',
          format: {
            body: function(data, row, column, node) {
              var text = node.textContent;
              return column === 10 ? text.replace(/Open$/, '').trim() : data;
            }
          }
        }
      },


      {
        extend: 'pdfHtml5',
        orientation: 'landscape',
        exportOptions: {
          columns: ':visible',
          format: {
            body: function(data, row, column, node) {
              var text = node.textContent;
              return column === 10 ? text.replace(/Open$/, '').trim() : data;
            }
          }
        }
      },

      'colvis'
    ]
  });
});
div.dt-button-collection {
  width: 215px;
}

.display.dataTable {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 12px;
}

.modal {
  max-width: 1000px;
  margin: 2rem auto;
}

td.none {
  display: none;
}

div.dt-buttons {
    float: none;
}

.dataTables_length {
    position: relative;
    float: none !important;
    text-align: center;
}
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" />
<link rel "=stylesheet" href="https://cdn.datatables.net/buttons/1.6.2/css/buttons.dataTables.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />

<link href="https://cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.4.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.html5.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.colVis.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">


<table id="example" class="display">
  <thead>
    <tr>
      <th class="all" data-toggle="tooltip" title="The known name of the project.">Project Name</th>
      <th class="all" data-toggle="tooltip" title="The provided unique ID that distinguishes projects.">Project Number</th>
      <th class="all" data-toggle="tooltip" title="The conclusing time point of a project, which is sometimes, but not always the point at which funding ends.">End Date</th>
      <th class="all" data-toggle="tooltip" title="The primary funder of the project.">Funder</th>

      <th class="all" data-toggle="tooltip" title="A brief description on the scope and aims of a project.">Abstract</th>

    </tr>
  </thead>
  <tbody>

    <tr>

      <td>Project 1</td>

      <td>P-1</td>

      <td>2018-04-30 00:00:00</td>

      <td>NIH</td>

      <td>
        <div id="ex83" class="modal">
          <p>

            Abstract 1
            <a href="#" rel="modal:close"></a>
        </div>
        <p><a href="#ex83" rel="modal:open"><button class="button">Open<span></span></button></a></p>
      </td>
    </tr>
    <tr>

      <td>Project 2</td>

      <td>P-2</td>

      <td>2024-03-31 00:00:00</td>

      <td>NIH</td>

      <td>
        <div id="ex103" class="modal">
          <p>

            Abstract 2
            <a href="#" rel="modal:close"></a>
        </div>
        <p><a href="#ex103" rel="modal:open"><button class="button">Open<span></span></button></a></p>
      </td>
    </tr>
    <tr>

      <td>Project 3</td>

      <td>P-3</td>

      <td>2021-01-31 00:00:00</td>

      <td>NIH</td>

      <td>
        <div id="ex111" class="modal">
          <p> Abstract 3</p>
          <a href="#" rel="modal:close"></a>
        </div>
        <p><a href="#ex111" rel="modal:open"><button class="button">Open<span></span></button></a></p>
      </td>
    </tr>


  </tbody>
</table>

By the way, you didn't say anything about the Search box

user_74711800
Related