File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
​
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.16/b-1.5.1/b-html5-1.5.1/b-print-1.5.1/datatables.min.css"/>
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.16/b-1.5.1/b-html5-1.5.1/b-print-1.5.1/datatables.min.js"></script>
​
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
      <table id="example" class="table table-striped table-bordered" style="width:100%">
        <thead>
            <tr>
                <th rowspan="4" style="text-align: center">име/секция</th>
                <th rowspan="4" style="text-align: center">етаж</th>
                <th rowspan="4" style="text-align: center">Апартамент</th>
                <th rowspan="3" colspan="1" style="text-align: center">Застроена площ (ЗП)</th>
                <th rowspan="3" colspan="1" style="text-align: center">ЗП с общи части</th>
                <th rowspan="3" colspan="1" style="text-align: center">Тип апартамент</th>
                <th rowspan="1" colspan="5" style="text-align: center">Схема на плащане</th>
                <th rowspan="3" colspan="1" style="text-align: center">Статус</th>
            </tr>
            <tr>
                <th rowspan="1" colspan="5" style="text-align: center">Договор /Акт 14/Акт 15/ Разрешение за ползване(РП)</th>
            </tr>
                <th rowspan="1" colspan="1" style="text-align: center">20/80</th>
                <th rowspan="1" colspan="1" style="text-align: center">20/30/40/10</th>
                <th rowspan="1" colspan="1" style="text-align: center">50/0/40/10</th>
                <th rowspan="1" colspan="1" style="text-align: center">50/40/0/10</th>
                <th rowspan="1" colspan="1" style="text-align: center">80/20</th>
            <tr>
                <th rowspan="1" style="text-align: center">m<sup>2</sup></th>
                <th rowspan="1" colspan="1" style="text-align: center">m<sup>2</sup></th>
                <th rowspan="1" colspan="1" style="text-align: center" class="filterhead">&nbsp;</th>
                <th rowspan="1" colspan="1" style="text-align: center">&#8364;</th>
                <th rowspan="1" colspan="1" style="text-align: center">&#8364;</th>
                <th rowspan="1" colspan="1" style="text-align: center">&#8364;</th>
                <th rowspan="1" colspan="1" style="text-align: center">&#8364;</th>
                <th rowspan="1" colspan="1" style="text-align: center">&#8364;</th>
                <th rowspan="1" colspan="1" style="text-align: center" class="filterhead">&nbsp;</th>
            </tr>
        </thead>
        <tbody>
           <tr>
                <td style="text-align: center; vertical-align: middle;" class="sorting_1">Акация</td>
                <td style="text-align: center; vertical-align: middle;">2</td>
                <td style="text-align: center; vertical-align: middle;">1</td>
                <td class="" style="text-align: center;">47.96</td>
                <td class="" style="text-align: center;">56.78</td>
                <td style="text-align: center; vertical-align: middle;">двустаен</td>
                <td class="" style="text-align: center;">80,000</td>
                <td class="" style="text-align: center;">78,000</td>
                <td class="" style="text-align: center;">76,000</td>
                <td class="" style="text-align: center;">74,000</td>
                <td class="" style="text-align: center;">70,000</td>
                <td style="text-align: center; vertical-align: middle;">продаден</td>
           </tr>
           <tr>
                <td style="text-align: center; vertical-align: middle;" class="sorting_1">Акация</td>
                <td style="text-align: center; vertical-align: middle;">2</td>
                <td style="text-align: center; vertical-align: middle;">1</td>
                <td class="" style="text-align: center;">47.96</td>
                <td class="" style="text-align: center;">56.78</td>
                <td style="text-align: center; vertical-align: middle;">двустаен</td>
                <td class="" style="text-align: center;">80,000</td>
                <td class="" style="text-align: center;">78,000</td>
                <td class="" style="text-align: center;">76,000</td>
                <td class="" style="text-align: center;">74,000</td>
                <td class="" style="text-align: center;">70,000</td>
                <td style="text-align: center; vertical-align: middle;">свободен</td>
            </tr>
            <tr>
                <td style="text-align: center; vertical-align: middle;" class="sorting_1">Акация</td>
                <td style="text-align: center; vertical-align: middle;">2</td>
                <td style="text-align: center; vertical-align: middle;">1</td>
                <td class="" style="text-align: center;">47.96</td>
                <td class="" style="text-align: center;">56.78</td>
                <td style="text-align: center; vertical-align: middle;">двустаен</td>
                <td class="" style="text-align: center;">80,000</td>
                <td class="" style="text-align: center;">78,000</td>
                <td class="" style="text-align: center;">76,000</td>
                <td class="" style="text-align: center;">74,000</td>
                <td class="" style="text-align: center;">70,000</td>
                <td style="text-align: center; vertical-align: middle;">свободен</td>
            </tr>
            <tr>
                <td style="text-align: center; vertical-align: middle;" class="sorting_1">Акация</td>
                <td style="text-align: center; vertical-align: middle;">2</td>
                <td style="text-align: center; vertical-align: middle;">1</td>
                <td class="" style="text-align: center;">47.96</td>
                <td class="" style="text-align: center;">56.78</td>
                <td style="text-align: center; vertical-align: middle;">двустаен</td>
                <td class="" style="text-align: center;">80,000</td>
                <td class="" style="text-align: center;">78,000</td>
                <td class="" style="text-align: center;">76,000</td>
                <td class="" style="text-align: center;">74,000</td>
                <td class="" style="text-align: center;">70,000</td>
                <td style="text-align: center; vertical-align: middle;">продаден</td>
            </tr>
            <tr>
                <td style="text-align: center; vertical-align: middle;" class="sorting_1">Акация</td>
                <td style="text-align: center; vertical-align: middle;">2</td>
                <td style="text-align: center; vertical-align: middle;">1</td>
                <td class="" style="text-align: center;">47.96</td>
                <td class="" style="text-align: center;">56.78</td>
                <td style="text-align: center; vertical-align: middle;">двустаен</td>
                <td class="" style="text-align: center;">80,000</td>
                <td class="" style="text-align: center;">78,000</td>
                <td class="" style="text-align: center;">76,000</td>
                <td class="" style="text-align: center;">74,000</td>
                <td class="" style="text-align: center;">70,000</td>
                <td style="text-align: center; vertical-align: middle;">свободен</td>
            </tr>
            <tr>
                <td style="text-align: center; vertical-align: middle;" class="sorting_1">Акация</td>
                <td style="text-align: center; vertical-align: middle;">2</td>
                <td style="text-align: center; vertical-align: middle;">1</td>
                <td class="" style="text-align: center;">86.75</td>
                <td class="" style="text-align: center;">101.93</td>
                <td style="text-align: center; vertical-align: middle;">тристаен</td>
                <td class="" style="text-align: center;">82,000</td>
                <td class="" style="text-align: center;">80,000</td>
                <td class="" style="text-align: center;">78,000</td>
                <td class="" style="text-align: center;">76,000</td>
                <td class="" style="text-align: center;">72,000</td>
                <td style="text-align: center; vertical-align: middle;">свободен</td>
            </tr>
            <tr>
                <td style="text-align: center; vertical-align: middle;" class="sorting_1">Акация</td>
                <td style="text-align: center; vertical-align: middle;">2</td>
                <td style="text-align: center; vertical-align: middle;">1</td>
                <td class="" style="text-align: center;">86.75</td>
                <td class="" style="text-align: center;">101.93</td>
                <td style="text-align: center; vertical-align: middle;">тристаен</td>
                <td class="" style="text-align: center;">82,000</td>
                <td class="" style="text-align: center;">80,000</td>
                <td class="" style="text-align: center;">78,000</td>
                <td class="" style="text-align: center;">76,000</td>
                <td class="" style="text-align: center;">72,000</td>
                <td style="text-align: center; vertical-align: middle;">продаден</td>
            </tr>
            <tr>
                <td style="text-align: center; vertical-align: middle;" class="sorting_1">Акация</td>
                <td style="text-align: center; vertical-align: middle;">2</td>
                <td style="text-align: center; vertical-align: middle;">1</td>
                <td class="" style="text-align: center;">86.75</td>
                <td class="" style="text-align: center;">101.93</td>
                <td style="text-align: center; vertical-align: middle;">тристаен</td>
                <td class="" style="text-align: center;">82,000</td>
                <td class="" style="text-align: center;">80,000</td>
                <td class="" style="text-align: center;">78,000</td>
                <td class="" style="text-align: center;">76,000</td>
                <td class="" style="text-align: center;">72,000</td>
                <td style="text-align: center; vertical-align: middle;">свободен</td>
            </tr>
            <tr>
                <td style="text-align: center; vertical-align: middle;" class="sorting_1">Акация</td>
                <td style="text-align: center; vertical-align: middle;">2</td>
                <td style="text-align: center; vertical-align: middle;">1</td>
                <td class="" style="text-align: center;">86.75</td>
                <td class="" style="text-align: center;">101.93</td>
                <td style="text-align: center; vertical-align: middle;">тристаен</td>
                <td class="" style="text-align: center;">82,000</td>
                <td class="" style="text-align: center;">80,000</td>
                <td class="" style="text-align: center;">78,000</td>
                <td class="" style="text-align: center;">76,000</td>
                <td class="" style="text-align: center;">72,000</td>
                <td style="text-align: center; vertical-align: middle;">продаден</td>
            </tr>
            <tr>
                <td style="text-align: center; vertical-align: middle;" class="sorting_1">Акация</td>
                <td style="text-align: center; vertical-align: middle;">2</td>
                <td style="text-align: center; vertical-align: middle;">1</td>
                <td class="" style="text-align: center;">86.75</td>
                <td class="" style="text-align: center;">101.93</td>
                <td style="text-align: center; vertical-align: middle;">тристаен</td>
                <td class="" style="text-align: center;">82,000</td>
                <td class="" style="text-align: center;">80,000</td>
                <td class="" style="text-align: center;">78,000</td>
                <td class="" style="text-align: center;">76,000</td>
                <td class="" style="text-align: center;">72,000</td>
                <td style="text-align: center; vertical-align: middle;">свободен</td>
            </tr>
            <tr>
                <td style="text-align: center; vertical-align: middle;" class="sorting_1">Акация</td>
                <td style="text-align: center; vertical-align: middle;">2</td>
                <td style="text-align: center; vertical-align: middle;">1</td>
                <td class="" style="text-align: center;">104.51</td>
                <td class="" style="text-align: center;">122.92</td>
                <td style="text-align: center; vertical-align: middle;">четиристаен</td>
                <td class="" style="text-align: center;">91,000</td>
                <td class="" style="text-align: center;">88,000</td>
                <td class="" style="text-align: center;">83,000</td>
                <td class="" style="text-align: center;">78,000</td>
                <td class="" style="text-align: center;">75,000</td>
                <td style="text-align: center; vertical-align: middle;">продаден</td>
            </tr>
            <tr>
                <td style="text-align: center; vertical-align: middle;" class="sorting_1">Акация</td>
                <td style="text-align: center; vertical-align: middle;">2</td>
                <td style="text-align: center; vertical-align: middle;">1</td>
                <td class="" style="text-align: center;">104.51</td>
                <td class="" style="text-align: center;">122.92</td>
                <td style="text-align: center; vertical-align: middle;">четиристаен</td>
                <td class="" style="text-align: center;">91,000</td>
                <td class="" style="text-align: center;">88,000</td>
                <td class="" style="text-align: center;">83,000</td>
                <td class="" style="text-align: center;">78,000</td>
                <td class="" style="text-align: center;">75,000</td>
                <td style="text-align: center; vertical-align: middle;">свободен</td>
            </tr>
            <tr>
                <td style="text-align: center; vertical-align: middle;" class="sorting_1">Акация</td>
                <td style="text-align: center; vertical-align: middle;">2</td>
                <td style="text-align: center; vertical-align: middle;">1</td>
                <td class="" style="text-align: center;">104.51</td>
                <td class="" style="text-align: center;">122.92</td>
                <td style="text-align: center; vertical-align: middle;">четиристаен</td>
                <td class="" style="text-align: center;">91,000</td>
                <td class="" style="text-align: center;">88,000</td>
                <td class="" style="text-align: center;">83,000</td>
                <td class="" style="text-align: center;">78,000</td>
                <td class="" style="text-align: center;">75,000</td>
                <td style="text-align: center; vertical-align: middle;">свободен</td>
            </tr>
            <tr>
                <td style="text-align: center; vertical-align: middle;" class="sorting_1">Акация</td>
                <td style="text-align: center; vertical-align: middle;">2</td>
                <td style="text-align: center; vertical-align: middle;">1</td>
                <td class="" style="text-align: center;">104.51</td>
                <td class="" style="text-align: center;">122.92</td>
                <td style="text-align: center; vertical-align: middle;">четиристаен</td>
                <td class="" style="text-align: center;">91,000</td>
                <td class="" style="text-align: center;">88,000</td>
                <td class="" style="text-align: center;">83,000</td>
                <td class="" style="text-align: center;">78,000</td>
                <td class="" style="text-align: center;">75,000</td>
                <td style="text-align: center; vertical-align: middle;">продаден</td>
            </tr>
            <tr>
                <td style="text-align: center; vertical-align: middle;" class="sorting_1">Акация</td>
                <td style="text-align: center; vertical-align: middle;">2</td>
                <td style="text-align: center; vertical-align: middle;">1</td>
                <td class="" style="text-align: center;">104.51</td>
                <td class="" style="text-align: center;">122.92</td>
                <td style="text-align: center; vertical-align: middle;">четиристаен</td>
                <td class="" style="text-align: center;">91,000</td>
                <td class="" style="text-align: center;">88,000</td>
                <td class="" style="text-align: center;">83,000</td>
                <td class="" style="text-align: center;">78,000</td>
                <td class="" style="text-align: center;">75,000</td>
                <td style="text-align: center; vertical-align: middle;">свободен</td>
            </tr>
            <tr>
                <td style="text-align: center; vertical-align: middle;" class="sorting_1">Акация</td>
                <td style="text-align: center; vertical-align: middle;">2</td>
                <td style="text-align: center; vertical-align: middle;">1</td>
                <td class="" style="text-align: center;">104.51</td>
                <td class="" style="text-align: center;">122.92</td>
                <td style="text-align: center; vertical-align: middle;">четиристаен</td>
                <td class="" style="text-align: center;">91,000</td>
                <td class="" style="text-align: center;">88,000</td>
                <td class="" style="text-align: center;">83,000</td>
                <td class="" style="text-align: center;">78,000</td>
                <td class="" style="text-align: center;">75,000</td>
                <td style="text-align: center; vertical-align: middle;">продаден</td>
            </tr>
           
​
        </tbody>
    </table>
    </div>
​
  </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;
}
​
JavaScriptSaved
 
        $(document).ready(function() {
          //orderCellsTop: true,  // Move this inside the Datatables init code
            $('#example').DataTable( {
            columnDefs: [
              {
                targets: 'filterhead',
                orderable: false
              }
            ],
                initComplete: function () {
                  var api = this.api();
                  var skipColumns = 3;  // Offset to skip the first three columns with rowspan=4
                    //this.api().columns([5, 11]).every( function () {
                  $('tr:eq(3) th', api.table().header()).each( function (i) {
                    if ( $(this).hasClass('filterhead')) {
​
                        var column = api.column(i + skipColumns);
                        var select = $('<select><option value=""></option></select>')
                            .appendTo( $(this).empty() )
                            .on( 'change', function () {
                                var val = $.fn.dataTable.util.escapeRegex(
                                    $(this).val()
                                );
        
                                column
                                    .search( val ? '^'+val+'$' : '', true, false )
                                    .draw();
                            } );        
                        column.data().unique().sort().each( function ( d, j ) {
                            select.append( '<option value="'+d+'">'+d+'</option>' );
                        } );
                    }
                        
                    } );
                }
            } );
        } );
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers