File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <head>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <link href="https://cdn.datatables.net/v/dt/dt-1.13.6/r-2.5.0/datatables.min.css" rel="stylesheet">
        <script src="https://cdn.datatables.net/v/dt/dt-1.13.6/r-2.5.0/datatables.min.js"></script>
    
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body><table id='myTable' class='display nowrap' width='100%' >
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Název</th>
                    <th>Ulice</th>
                    <th>Číslo popisné</th>
                    <th>PSČ</th>
                    <th>Město</th>
                    <th>Popis</th>
                    <th>Cena</th>
                    <th>Počet jamek</th>
                </tr>
                <tr>
                    <th class='filterhead'>ID</th>
                    <th class='filterhead'>Název</th>
                    <th class='filterhead'>Ulice</th>
                    <th class='filterhead'>Číslo popisné</th>
                    <th class='filterhead'>PSČ</th>
                    <th class='filterhead'>Město</th>
                    <th class='filterhead'>Popis</th>
                    <th class='filterhead'>Cena</th>
                    <th class='filterhead'>Počet jamek</th>
                  </tr>
            </thead>
            <tfoot>
              <tr>
                <th>ID</th>
                <th>Název</th>
                <th>Ulice</th>
                <th>Číslo popisné</th>
                <th>PSČ</th>
                <th>Město</th>
                <th>Popis</th>
                <th>Cena</th>
                <th>Počet jamek</th>
              </tr>
            </tfoot>
            <tbody>
        
        <tr><td>1</td><td>Konopiste - Hradecka</td><td>Ulice 1</td><td>1/1</td><td>11111</td><td>Město 1</td><td>Popis 1</td><td>1</td><td>9</td></tr><tr><td>2</td><td>Konopiste - dEste</td><td>Ulice 2</td><td>2/2</td><td>22222</td><td>Město 2</td><td>Popis 2</td><td>2</td><td>9</td></tr><tr><td>3</td><td>Konopiste - Neco</td><td>Ulice 3</td><td>3/3</td><td>33333</td><td>Město 3</td><td>Popis 3</td><td>3</td><td>18</td></tr><tr><td>4</td><td>Konopiste - Neco</td><td>Ulice 4</td><td>4/4</td><td>44444</td><td>Město 4</td><td>Popis 4</td><td>4</td><td>9</td></tr><tr><td>5</td><td>Hřiště 5</td><td>Ulice 5</td><td>5/5</td><td>55555</td><td>Město 5</td><td>Popis 5</td><td>1100</td><td>18</td></tr><tr><td>6</td><td>Hřiště 6</td><td>Ulice 6</td><td>6/6</td><td>66666</td><td>Město 6</td><td>Popis 6</td><td>6</td><td>9</td></tr><tr><td>7</td><td>Hřiště 7</td><td>Ulice 7</td><td>7/7</td><td>77777</td><td>Město 7</td><td>Popis 7</td><td>7</td><td>9</td></tr><tr><td>8</td><td>Hřiště 8</td><td>Ulice 8</td><td>8/8</td><td>88888</td><td>Město 8</td><td>Popis 8</td><td>8</td><td>9</td></tr><tr><td>9</td><td>Hřiště 9</td><td>Ulice 9</td><td>9/9</td><td>99999</td><td>Město 9</td><td>Popis 9</td><td>9</td><td>9</td></tr><tr><td>10</td><td>Hřiště 10</td><td>Ulice 10</td><td>10/10</td><td>10101</td><td>Město 10</td><td>Popis 10</td><td>10</td><td>18</td></tr></tbody></table>
</body>
</html>
​
CSSSaved
 
body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}
​
thead input {
  width: 100%;
}
JavaScriptSaved
 
$(document).ready(function() {
​
              function hideSearchInputs(columns) {
                for (var i = 0; i < columns.length; i++) {
                  if (columns[i]) {
                    $(".filterhead:eq(" + i + ")" ).show();
                  } else {
                    $(".filterhead:eq(" + i + ")" ).hide();
                  }
                }
              }
              
              var table = $("#myTable").DataTable({
                  orderCellsTop: true,
                  dom: "Bfrtip",
                  responsive: {
                    details: {
                      display: $.fn.dataTable.Responsive.display.modal( {
                        header: function ( row ) {
                          var data = row.data();
                          return "Details for " + data[0] + " " + data[1];
                        }
                      } ),
                      renderer: $.fn.dataTable.Responsive.renderer.tableAll()
                    }
                  },
                  scrollY:        false,
                  scrollX:        false,
                  scrollCollapse: false,
                  scroller:       false,
                  order: [[0, "asc"]],
                  paging: true,
                  pageLength: 100,
                  searching: false,
//                language: {
//                  url: "//cdn.datatables.net/plug-ins/1.13.6/i18n/cs.json",
//                },
                  initComplete: function () {
                    var api = this.api();
                    $(".filterhead", api.table().header()).each( function (i) {
                      var column = api.column(i);
                      var input = $("<input type=\"text\" placeholder=\"Hledej\" />")
                        .appendTo( $(this).empty() )
                        .on("keyup change", function () {
                          var val = $.fn.dataTable.util.escapeRegex($(this).val());
                          column
                            .search(val, true, false)
                            .draw();
                        });
                    });
                    hideSearchInputs(api.columns().responsiveHidden().toArray());
                  }
              });
              
              table.on("responsive-resize", function ( e, datatable, columns ) {
                hideSearchInputs( columns );
              });
            });
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers