File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <head>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
    <link href="https://cdn.datatables.net/v/bs4-4.6.0/jq-3.7.0/jszip-3.10.1/dt-2.2.2/af-2.7.0/b-3.2.2/b-colvis-3.2.2/b-html5-3.2.2/b-print-3.2.2/cr-2.0.4/date-1.5.5/fc-5.0.4/fh-4.0.1/kt-2.12.1/r-3.0.4/rg-1.5.1/rr-1.5.0/sc-2.4.3/sb-1.8.2/sp-2.3.3/sl-3.0.0/sr-1.4.1/datatables.min.css" rel="stylesheet" integrity="sha384-Frt5PrADCqKhT2HpfV7eDRqG0sBy2CHCPwj8aJ8EZ7MDAN5ojmhN/6/45K4eY4Ih" crossorigin="anonymous">
​
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js" integrity="sha384-VFQrHzqBh5qiJIU0uGU5CIW3+OWpdGGJM9LBnGbuIH2mkICcFZ7lPd/AAtI7SNf7" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js" integrity="sha384-/RlQG9uf0M2vcTw3CX7fbqgbj/h8wKxw7C3zu9/GxcBPRKOEcESxaxufwRXqzq6n" crossorigin="anonymous"></script>
    <script src="https://cdn.datatables.net/v/bs4-4.6.0/jq-3.7.0/jszip-3.10.1/dt-2.2.2/af-2.7.0/b-3.2.2/b-colvis-3.2.2/b-html5-3.2.2/b-print-3.2.2/cr-2.0.4/date-1.5.5/fc-5.0.4/fh-4.0.1/kt-2.12.1/r-3.0.4/rg-1.5.1/rr-1.5.0/sc-2.4.3/sb-1.8.2/sp-2.3.3/sl-3.0.0/sr-1.4.1/datatables.min.js" integrity="sha384-wvlHRKzYT5ZpyNrRQmrJ6HPAV3QXk++W05RIs6bsQaLk1d0X+ZGIPsOOc33oqgUE" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
​
    
    <meta charset=utf-8 />
    <title>DataTables 2.2.2 - Problem with Card and SearchBuilder at bottom</title>
  </head>
  <body>
​
    <body style="padding: 0px;">
​
        <div class="fixed-top">
            <nav id="navMenuFisrt" class="navbar navbar-expand-lg navbar-light bg-info py-1 text-white" role="navigation">
                <a class="navbar-brand" href="#">Header Fixed top</a>
            </nav>
        </div>
        <div id="header-space-hack" style="height: 50px;"></div>
    
        <div class="container">
            <h3 class="text-center">DataTables 2.2.2 - Problem with Card and SearchBuilder at bottom</h3>
            <br>
<!-- Begin of ligne to comment - Card -->
            <div class="card">
                <div class="card-header bg-light text-dark">
                    Test
                </div>
                <div class="card-body">
<!-- End of ligne to comment - Card -->
                    <table id="dttable" class="table table-hover" cellspacing="0" width="100%">
                      <thead>
                        <tr>
                          <th data-name="id">id</th>
                          <th data-name="name">Name</th>
                          <th data-name="email">E-mail</th>
                          <th data-name="action">Actions</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td>1</td>
                          <td>Name 1</td>
                          <td><a href="mailto:#">name1@domain.com</a></td>
                          <td><button type="button" class="btn btn-secondary btn-sm">Todo</button></td>
                        </tr>
                        <tr>
                          <td>2</td>
                          <td>Name 2</td>
                          <td><a href="mailto:#">name2@domain.com</a></td>
                          <td><button type="button" class="btn btn-secondary btn-sm">Todo</button></td>
                        </tr>
                        <tr>
                          <td>3</td>
                          <td>Name 3</td>
                          <td><a href="mailto:#">name3@domain.com</a></td>
                          <td><button type="button" class="btn btn-secondary btn-sm">Todo</button></td>
                        </tr>
                        <tr>
                          <td>4</td>
                          <td>Name 4</td>
                          <td><a href="mailto:#">name4@domain.com</a></td>
                          <td><button type="button" class="btn btn-secondary btn-sm">Todo</button></td>
                        </tr>
                        <tr>
                          <td>5</td>
                          <td>Name 5</td>
                          <td><a href="mailto:#">name5@domain.com</a></td>
                          <td><button type="button" class="btn btn-secondary btn-sm">Todo</button></td>
                        </tr>
                        <tr>
                          <td>6</td>
                          <td>Name 6</td>
                          <td><a href="mailto:#">name6@domain.com</a></td>
                          <td><button type="button" class="btn btn-secondary btn-sm">Todo</button></td>
                        </tr>
                        <tr>
                          <td>7</td>
                          <td>Name 7</td>
                          <td><a href="mailto:#">name7@domain.com</a></td>
                          <td><button type="button" class="btn btn-secondary btn-sm">Todo</button></td>
                        </tr>
                        <tr>
                          <td>8</td>
                          <td>Name 8</td>
                          <td><a href="mailto:#">name8@domain.com</a></td>
                          <td><button type="button" class="btn btn-secondary btn-sm">Todo</button></td>
                        </tr>
                        <tr>
                          <td>9</td>
                          <td>Name 9</td>
                          <td><a href="mailto:#">name9@domain.com</a></td>
                          <td><button type="button" class="btn btn-secondary btn-sm">Todo</button></td>
                        </tr>
                        <tr>
                          <td>10</td>
                          <td>Name 10</td>
                          <td><a href="mailto:#">name10@domain.com</a></td>
                          <td><button type="button" class="btn btn-secondary btn-sm">Todo</button></td>
                        </tr>
                      </tbody>
                    </table>
​
<!-- Begin of ligne to comment - Card -->
                </div>
            </div>
<!-- End of ligne to comment - Card -->
​
        </div>
        
        <div class="container-fluid mt-auto bg-info text-white">
            <div class="row text-center">
                <div class="col-12  my-2">
                    Footer
                </div>
            </div>
        </div>
​
    
  </body>
</html>
​
CSSSaved
 
body {
  font: 90%/1.45em Arial, sans-serif;
  margin: 0;
  padding: 0px;
  color: #333;
  background-color: #fff;
}
​
JavaScriptSaved
 
$(document).ready(function() {
  
  var dataTableParam = {
    "processing": true,
    "autoWidth": true,
    "columnDefs": [
      { "orderable": false, "targets": [ -1 ] },
      { "searchable": false, "targets": [ -1 ] }
    ],
    "colReorder": true,
    "orderCellsTop": false,
    "lengthMenu": [[10, 25, 50, 100, -1],[10, 25, 50, 100, "All"]],
    "order": [],
    "buttons" : {
      "buttons": [
        {
          "extend": "copyHtml5",
        },
        {
          "extend": "print",
        },
      ]
        },
    "pagingType": "full_numbers",
    "layout": {
      "top3" : ["buttons"],
      "top2" : [ "pageLength", "search" ],
      "top1" : [ "info", "paging" ],
      "topStart": null,
      "topEnd": null,
      "bottomStart": "info",
      "bottomEnd": "paging",
      "bottom1" : {
        "buttons": [
          {
            "extend" : "searchBuilder",
            "config": {
              "greyscale" : true
            }
          }
        ]
      },
    }
  };
​
  var oTable = $("#dttable").DataTable(dataTableParam);
​
});
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers