File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8"/>
<style>
@media screen{
    html {background-color: #FFFFF0;}
body {
    font-size: 16px;
    font-family : Verdana, "Bitstream Vera Sans", "DejaVu Sans", Tahoma, Geneva, Arial, Sans-serif;
    margin: 1em;
}
th, td { padding: 5px 10px; }
th {text-align: left;}
table {border: silver 1px solid; font-size: 14px;font-family: APLFont, monospace;}
code , code a {font-size: 14px; font-family: APLFont, monospace;}
code.header {
    font-size: 16px; 
    font-family: APLFont, monospace; 
    margin: 1.5em 0.5em 0 0.5em; 
    padding:0;
    display: block;
}
div.code-block {
    border: 1px silver dashed;
    background-color: #F2F2F2;
    display: block;
    margin: 0.5em 0.5em 0.5em 0.5em;
    padding: 0.5em;
}
div.code-block code {display: block; white-space: pre-wrap; margin:0; padding:0; word-wrap: break-word;}
.emphasize { font-weight: 800;}
ul li, ol li {margin: 0.7em 0.2em;}
.float-right {float:right;}
.no-underline {    text-decoration :none;}
.top-links {font-size:20px; padding-left: 0.6em;}
.align-right {text-align: right;}
#footer hr {margin-top:1.5em;}
#footer p {margin-top:5px; padding-top:0; font-size: 9px;}
@font-face {
        font-family: "APLFont";
    src:
        local("APL385 Unicode"),
        url("https://misc.aplteam.com/apl385.ttf") format("truetype");
}}
@media print{@page {size: portrait}
@page {
    margin: 1cm 1cm 1cm 1.75cm;
    @bottom-right {
        content: counter(page) " / " counter(pages);
  }
}
body {
    font: 12pt "Times New Roman", Times, serif;
    line-height: 1.2;
     /* CSS3 filter, at the moment Webkit only. Prefix it for future implementations */
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%); /* future-proof */
}
h1 {font-size: 18pt;}
h2 {font-size: 16pt; margin-top: 10pt; margin-bottom: 3pt;}
th, td {padding: 2pt 3pt;}
th {text-align: left;background-color: #DBDBDB;}
tbody tr:nth-child(odd) {background-color: #EDEDED;}
table {
    color-adjust: exact !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    font-size: 8pt;
    font-family: APLFont, monospace;
}
div.keep-together {break-inside: avoid; break-before:auto;}
table {border: silver 1pt solid;}
code , code a {font-size: 8pt; font-family: APLFont, monospace;}
code.header {
    font-size: 8pt;
    font-family: APLFont, monospace;
    margin: 7pt 3pt 0 10pt;
    padding:0;
    display: block;
}
div.code-block {
    border: 1pt silver dashed;
    background-color: #F2F2F2;
    display: block;
    margin: 4pt 4pt 4pt 4pt;
    padding: 4pt;
}
div.code-block code {display: block; white-space: pre-wrap; margin:0; padding:0; word-wrap: break-word;}
.emphasize { font-weight: 800;}
a {text-decoration: none;color: black;}
ul li, ol li {margin: 8pt 3pt;}
.no-print {display:none;}
.align-right {text-align: right;}
#footer hr {margin-top:1.5em;}
#footer p {margin-top:5pt; padding-top:0; font-size: 6pt;}
@font-face {
        font-family: "APLFont";
    src:
        local("APL385 Unicode"),
        url("https://misc.aplteam.com/apl385.ttf") format("truetype");
}}
​
.uncovered {background-color: rgb(240, 122, 122);}
.fullyCovered {background-color: lightgreen;}
.text-right {text-align: right;}
div.dtsp-searchPane div.dataTables_scrollBody {
  height: 8.5em !important; /* reduce height of search pane */
}
</style>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.25/fh-3.1.9/r-2.2.9/sp-1.3.0/sl-1.3.3/datatables.min.css"/>
 
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.25/fh-3.1.9/r-2.2.9/sp-1.3.0/sl-1.3.3/datatables.min.js"></script>
  </head>
<body>
<h1 id="top">Can we make search panes smaller?</h1>
<ul>
  <li>I'd like a single row with 3 items (descriptions can be shortened) instead of 3 rows.</li>  
  <li>Also don't need the top control "Filters Active" and "Clear All"</li>
  </ul>    
<table id="percent">
<thead>
<tr><th style="text-align:left;">ColA</th><th style="text-align:left;">ColB</th><th style="text-align:left;">ColC</th><th style="text-align:right;">ColD</th></tr>
</thead>
<tbody>
   
<tr><td><a href="#listing_1" title="Link to listing">Shakespeare</a></td><td>7←≢2,  4-9</td><td>22</td><td>9</td></tr>
<tr><td><a href="#listing_2" title="Link to listing">Lincoln</a></td><td>109←≢28-31, 33-37, 39-52, 54-56, 58-60, 66-67, 71-73, 80, 83-87, 89-90, 92-93, 97, 99-104, 106-114, 116-117, 121-126, 128-130, 132-141, 143, 152-155, 157-160, 165-168, 170-173, 183-187, 189-192, 194-195</td><td>27</td><td><td>149</td></tr>
<tr><td><a href="#listing_3" title="Link to listing">Wells</a></td><td>16←≢3-4, 9-20, 22, 28</td><td>30</td</td><td>23</td></tr>
<tr><td><a href="#listing_4" title="Link to listing">Doyle</a></td><td>17←≢7-8, 18-19, 22-26, 28-34, 36</td><td>39</td><td>28</td></tr>
<tr><td><a href="#listing_5" title="Link to listing">Tolkien</a></td><td>21←≢6-7, 20-21, 27-28, 30-33, 35, 37-41, 43, 45-47, 49</td><td>43</td><td>37</td></tr>
<tr><td><a href="#listing_6" title="Link to listing">Thatcher</a></td><td>9←≢9-12, 15, 17-19, 21</td><td>44</td><td>16</td></tr>
<tr><td><a href="#listing_7" title="Link to listing">Jaguar</a></td><td>12←≢11-22</td><td>45</td><td>22</td></tr>
<tr><td><a href="#listing_8" title="Link to listing">Chrysler</a></td><td>3, 4</td><td>50</td><td>4</td></tr>
<tr><td><a href="#listing_9" title="Link to listing">Ford</a></td><td>95←≢57-58, 61-63, 72-73, 77-78, 83-85, 87-92, 104-108, 116, 122-124, 134, 142, 145-146, 148, 150, 155-156, 158, 160-162, 164, 166, 171-172, 174, 176-178, 180, 182, 192-196, 198, 203-204, 214, 221, 233-234, 238-251, 264, 283, 287-289, 300, 303-305, 312-319, 322, 325-326</td><td>53</td><td>203</td></tr>
<tr><td><a href="#listing_10" title="Link to listing">BMW</a></td><td>10←≢3-5, 7-8, 12, 14-15, 24, 30</td><td>57</td><td>23</td></tr>
<tr><td><a href="#listing_11" title="Link to listing">Carter</a></td><td>8←≢12, 15, 18-20, 22, 26, 28</td><td>58</td><td>19</td></tr>
<tr><td><a href="#listing_12" title="Link to listing">Marmite</a></td><td>9←≢9, 16-20, 32-33, 36</td><td>65</td><td>26</td></tr>
<tr><td><a href="#listing_13" title="Link to listing">Lizzy</a></td><td>5</td><td>67</td><td>3</td></tr>
<tr><td><a href="#listing_14" title="Link to listing">Jagger</a></td><td>24←≢23-24, 43-45, 55, 69-74, 76, 91-96, 98-99, 101, 103-104</td><td>68</td><td>74</td></tr>
<tr><td><a href="#listing_15" title="Link to listing">Joe</a></td><td>4←≢17, 20-21, 25</td><td>76</td><td>17</td></tr>
<tr><td><a href="#listing_16" title="Link to listing">Huntington</a></td><td>9←≢11, 14-15, 17-18, 21, 41, 45, 48</td><td>80</td><td>44</td></tr>
<tr><td><a href="#listing_17" title="Link to listing">Late</a></td><td>15, 19</td><td>82</td><td>11</td></tr>
<tr><td><a href="#listing_18" title="Link to listing">Street</a></td><td>7</td><td>83</td><td>6</td></tr>
<tr><td><a href="#listing_19" title="Link to listing">Sugar</a></td><td>8, 23</td><td>88</td><td>16</td></tr>
<tr><td><a href="#listing_20" title="Link to listing">Psychologist</a></td><td>14</td><td>93</td><td>15</td></tr>
<tr><td><a href="#listing_21" title="Link to listing">Lorem</a></td><td>44, 48, 64</td><td>94</td><td>47</td></tr>
<tr><td class="uncovered">Ipsum</td><td>ALL</td><td>0</td><td>42</td></tr>
<tr><td class="uncovered">Music</td><td>ALL</td><td>0</td><td>5</td></tr>
<tr><td class="uncovered">Football</td><td>ALL</td><td>0</td><td>100</td></tr>
<tr><td class="uncovered">Reason</td><td>ALL</td><td>0</td><td>43</td></tr>
<tr><td class="uncovered">Logic</td><td>ALL</td><td>0</td><td>79</td></tr>
<tr><td class="fullyCovered">Weird</td><td></td><td>100</td><td>42</td></tr>
<tr><td class="fullyCovered">Strong</td><td></td><td>100</td><td>256</td></tr>
<tr><td class="fullyCovered">Tall</td><td></td><td>100</td><td>11</td></tr>
<tr><td class="fullyCovered">Adjectively</td><td></td><td>100</td><td>326</td></tr>
</tbody>
</table>
</div>
</div>
<script>
$(document).ready(function() {
    $('#percent').DataTable( {
        "paging":   false,
        "ordering": true,
        "info":     true,
        fixedHeader: true,
        order: [2,'desc'],
        dom: "Pft",
        "columnDefs": [
            {className: 'text-right', targets: [2,3]
            },
            {
                "render": function ( data, type, row, meta ) {
      return data+'%' ;        
    },
    targets: 2
            }
        ],
        searchPane: true,
        searchPanes: {
            layout: 'columns-1',
            orderable: false,
            controls: false,
        panes: [{
            header: 'Cover-Types',
            preSelect: "Needing more work",
            options: [
                {
                    label: 'zero-rated',
                    value: function(rowData, rowIdx){
                        return Number(rowData[2]) === 0;
                    }
                },
                {
                    label: '100 percenters',
                    value: function(rowData, rowIdx){
                        return Number(rowData[2]) === 100;
                    }
                    },
                {
                    label: 'Middleground',
                    value: function(rowData, rowIdx){
                        n = Number(rowData[2])
                        return (n > 0) && n<100;
                    }
                }
            ]
        }]
    }        
    } );
} );    
</script>
</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;
}
​
div.dtsp-titleRow {
  display: none;
}
JavaScriptSaved
 
$(document).ready( function () {
  var table = $('#example').DataTable();
} );
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers