File
Add library
Share
Login or Register
Help
HTML
 
​
<head>
<meta name="description" content="[add your bin description]" />
  <!-- Bootstrap 4.1 -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
​
  <!-- CDN/CSS for DataTables 
    See: https://datatables.net/download/index
    Step 1: Framework = Bootstrap 4
    Step 2: Packages = DataTables
    Step 3: Extensions = ALL
  -->
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.18/af-2.3.2/b-1.5.4/b-colvis-1.5.4/b-flash-1.5.4/b-html5-1.5.4/b-print-1.5.4/cr-1.5.0/fc-3.2.5/fh-3.1.4/kt-2.5.0/r-2.2.2/rg-1.1.0/rr-1.2.4/sc-1.5.0/sl-1.2.6/datatables.min.css"/>
​
  <!-- FontAwesome 5.4.1 SVG with JS -->
  <script defer src="https://use.fontawesome.com/releases/v5.4.1/js/all.js" integrity="sha384-L469/ELG4Bg9sDQbl0hvjMq8pOcqFgkSpwhwnslzvVVGpDjYJ6wJJyYjvG3u8XW7" crossorigin="anonymous"></script>
  
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.js" type="text/javascript" language="javascript"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
  
​
  <!-- Javascript for DataTables 
    See: https://datatables.net/download/index
    Step 1: Framework = Bootstrap 4
    Step 2: Packages = DataTables
    Step 3: Extensions = ALL
  -->
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.18/af-2.3.2/b-1.5.4/b-colvis-1.5.4/b-flash-1.5.4/b-html5-1.5.4/b-print-1.5.4/cr-1.5.0/fc-3.2.5/fh-3.1.4/kt-2.5.0/r-2.2.2/rg-1.1.0/rr-1.2.4/sc-1.5.0/sl-1.2.6/datatables.min.js"></script>
  <!-- JS for DT Plugin - PageResize -->
  <script type="text/javascript" src="https://cdn.datatables.net/plug-ins/1.10.19/features/pageResize/dataTables.pageResize.min.js"></script>
​
</head>
<body>
  <div id="resize_wrapper" class="border border-primary rounded mt-5 p-4">
    <table id="dtPluginExample" class="table table-striped table-hover dt-responsive nowrap" style="width:100%">
      <thead>
        <tr>
          <th>No.</th>
          <th>Name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Age</th>
          <th>Start date</th>
          <th>Salary</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Tiger Nixon</td>
          <td>System Architect</td>
          <td>Edinburgh</td>
          <td>61</td>
          <td>2011/04/25</td>
          <td>$320,800</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Garrett Winters</td>
          <td>Accountant</td>
          <td>Tokyo</td>
          <td>63</td>
          <td>2011/07/25</td>
          <td>$170,750</td>
        </tr>
        <tr>
          <td>3</td>
          <td>Ashton Cox</td>
          <td>Junior Technical Author</td>
          <td>San Francisco</td>
          <td>66</td>
          <td>2009/01/12</td>
          <td>$86,000</td>
        </tr>
        <tr>
          <td>4</td>
          <td>Cedric Kelly</td>
          <td>Senior Javascript Developer</td>
          <td>Edinburgh</td>
          <td>22</td>
          <td>2012/03/29</td>
          <td>$433,060</td>
        </tr>
        <tr>
          <td>5</td>
          <td>Airi Satou</td>
          <td>Accountant</td>
          <td>Tokyo</td>
          <td>33</td>
          <td>2008/11/28</td>
          <td>$162,700</td>
        </tr>
        <tr>
          <td>6</td>
          <td>Brielle Williamson</td>
          <td>Integration Specialist</td>
          <td>New York</td>
          <td>61</td>
          <td>2012/12/02</td>
          <td>$372,000</td>
        </tr>
        <tr>
          <td>7</td>
          <td>Herrod Chandler</td>
          <td>Sales Assistant</td>
          <td>San Francisco</td>
          <td>59</td>
          <td>2012/08/06</td>
          <td>$137,500</td>
        </tr>
        <tr>
          <td>8</td>
          <td>Rhona Davidson</td>
          <td>Integration Specialist</td>
          <td>Tokyo</td>
          <td>55</td>
          <td>2010/10/14</td>
          <td>$327,900</td>
        </tr>
        <tr>
          <td>9</td>
          <td>Colleen Hurst</td>
          <td>Javascript Developer</td>
          <td>San Francisco</td>
          <td>39</td>
          <td>2009/09/15</td>
          <td>$205,500</td>
        </tr>
        <tr>
          <td>10</td>
          <td>Sonya Frost</td>
          <td>Software Engineer</td>
          <td>Edinburgh</td>
          <td>23</td>
          <td>2008/12/13</td>
          <td>$103,600</td>
        </tr>
        <tr>
          <td>11</td>
          <td>Jena Gaines</td>
          <td>Office Manager</td>
          <td>London</td>
          <td>30</td>
          <td>2008/12/19</td>
          <td>$90,560</td>
        </tr>
        <tr>
          <td>12</td>
          <td>Quinn Flynn</td>
          <td>Support Lead</td>
          <td>Edinburgh</td>
          <td>22</td>
          <td>2013/03/03</td>
          <td>$342,000</td>
        </tr>
        <tr>
          <td>13</td>
          <td>Charde Marshall</td>
          <td>Regional Director</td>
          <td>San Francisco</td>
          <td>36</td>
          <td>2008/10/16</td>
          <td>$470,600</td>
        </tr>
        <tr>
          <td>14</td>
          <td>Haley Kennedy</td>
          <td>Senior Marketing Designer</td>
          <td>London</td>
          <td>43</td>
          <td>2012/12/18</td>
          <td>$313,500</td>
        </tr>
        <tr>
          <td>15</td>
          <td>Tatyana Fitzpatrick</td>
          <td>Regional Director</td>
          <td>London</td>
          <td>19</td>
          <td>2010/03/17</td>
          <td>$385,750</td>
        </tr>
        <tr>
          <td>16</td>
          <td>Michael Silva</td>
          <td>Marketing Designer</td>
          <td>London</td>
          <td>66</td>
          <td>2012/11/27</td>
          <td>$198,500</td>
        </tr>
        <tr>
          <td>17</td>
          <td>Paul Byrd</td>
          <td>Chief Financial Officer (CFO)</td>
          <td>New York</td>
          <td>64</td>
          <td>2010/06/09</td>
          <td>$725,000</td>
        </tr>
        <tr>
          <td>18</td>
          <td>Gloria Little</td>
          <td>Systems Administrator</td>
          <td>New York</td>
          <td>59</td>
          <td>2009/04/10</td>
          <td>$237,500</td>
        </tr>
        <tr>
          <td>19</td>
          <td>Bradley Greer</td>
          <td>Software Engineer</td>
          <td>London</td>
          <td>41</td>
          <td>2012/10/13</td>
          <td>$132,000</td>
        </tr>
        <tr>
          <td>20</td>
          <td>Dai Rios</td>
          <td>Personnel Lead</td>
          <td>Edinburgh</td>
          <td>35</td>
          <td>2012/09/26</td>
          <td>$217,500</td>
        </tr>
        <tr>
          <td>21</td>
          <td>Jenette Caldwell</td>
          <td>Development Lead</td>
          <td>New York</td>
          <td>30</td>
          <td>2011/09/03</td>
          <td>$345,000</td>
        </tr>
        <tr>
          <td>22</td>
          <td>Yuri Berry</td>
          <td>Chief Marketing Officer (CMO)</td>
          <td>New York</td>
          <td>40</td>
          <td>2009/06/25</td>
          <td>$675,000</td>
        </tr>
        <tr>
          <td>23</td>
          <td>Caesar Vance</td>
          <td>Pre-Sales Support</td>
          <td>New York</td>
          <td>21</td>
          <td>2011/12/12</td>
          <td>$106,450</td>
        </tr>
        <tr>
          <td>24</td>
          <td>Doris Wilder</td>
          <td>Sales Assistant</td>
          <td>Sidney</td>
          <td>23</td>
          <td>2010/09/20</td>
          <td>$85,600</td>
        </tr>
        <tr>
          <td>25</td>
          <td>Angelica Ramos</td>
          <td>Chief Executive Officer (CEO)</td>
          <td>London</td>
          <td>47</td>
          <td>2009/10/09</td>
          <td>$1,200,000</td>
        </tr>
        <tr>
          <td>26</td>
          <td>Gavin Joyce</td>
          <td>Developer</td>
          <td>Edinburgh</td>
          <td>42</td>
          <td>2010/12/22</td>
          <td>$92,575</td>
        </tr>
        <tr>
          <td>27</td>
          <td>Jennifer Chang</td>
          <td>Regional Director</td>
          <td>Singapore</td>
          <td>28</td>
          <td>2010/11/14</td>
          <td>$357,650</td>
        </tr>
        <tr>
          <td>28</td>
          <td>Brenden Wagner</td>
          <td>Software Engineer</td>
          <td>San Francisco</td>
          <td>28</td>
          <td>2011/06/07</td>
          <td>$206,850</td>
        </tr>
        <tr>
          <td>29</td>
          <td>Fiona Green</td>
          <td>Chief Operating Officer (COO)</td>
          <td>San Francisco</td>
          <td>48</td>
          <td>2010/03/11</td>
          <td>$850,000</td>
        </tr>
        <tr>
          <td>30</td>
          <td>Shou Itou</td>
          <td>Regional Marketing</td>
          <td>Tokyo</td>
          <td>20</td>
          <td>2011/08/14</td>
          <td>$163,000</td>
        </tr>
        <tr>
          <td>31</td>
          <td>Michelle House</td>
          <td>Integration Specialist</td>
          <td>Sidney</td>
          <td>37</td>
          <td>2011/06/02</td>
          <td>$95,400</td>
        </tr>
        <tr>
          <td>32</td>
          <td>Suki Burks</td>
          <td>Developer</td>
          <td>London</td>
          <td>53</td>
          <td>2009/10/22</td>
          <td>$114,500</td>
        </tr>
        <tr>
          <td>33</td>
          <td>Prescott Bartlett</td>
          <td>Technical Author</td>
          <td>London</td>
          <td>27</td>
          <td>2011/05/07</td>
          <td>$145,000</td>
        </tr>
        <tr>
          <td>34</td>
          <td>Gavin Cortez</td>
          <td>Team Leader</td>
          <td>San Francisco</td>
          <td>22</td>
          <td>2008/10/26</td>
          <td>$235,500</td>
        </tr>
        <tr>
          <td>35</td>
          <td>Martena Mccray</td>
          <td>Post-Sales support</td>
          <td>Edinburgh</td>
          <td>46</td>
          <td>2011/03/09</td>
          <td>$324,050</td>
        </tr>
        <tr>
          <td>36</td>
          <td>Unity Butler</td>
          <td>Marketing Designer</td>
          <td>San Francisco</td>
          <td>47</td>
          <td>2009/12/09</td>
          <td>$85,675</td>
        </tr>
        <tr>
          <td>37</td>
          <td>Howard Hatfield</td>
          <td>Office Manager</td>
          <td>San Francisco</td>
          <td>51</td>
          <td>2008/12/16</td>
          <td>$164,500</td>
        </tr>
        <tr>
          <td>38</td>
          <td>Hope Fuentes</td>
          <td>Secretary</td>
          <td>San Francisco</td>
          <td>41</td>
          <td>2010/02/12</td>
          <td>$109,850</td>
        </tr>
        <tr>
          <td>39</td>
          <td>Vivian Harrell</td>
          <td>Financial Controller</td>
          <td>San Francisco</td>
          <td>62</td>
          <td>2009/02/14</td>
          <td>$452,500</td>
        </tr>
        <tr>
          <td>40</td>
          <td>Timothy Mooney</td>
          <td>Office Manager</td>
          <td>London</td>
          <td>37</td>
          <td>2008/12/11</td>
          <td>$136,200</td>
        </tr>
        <tr>
          <td>41</td>
          <td>Jackson Bradshaw</td>
          <td>Director</td>
          <td>New York</td>
          <td>65</td>
          <td>2008/09/26</td>
          <td>$645,750</td>
        </tr>
        <tr>
          <td>42</td>
          <td>Olivia Liang</td>
          <td>Support Engineer</td>
          <td>Singapore</td>
          <td>64</td>
          <td>2011/02/03</td>
          <td>$234,500</td>
        </tr>
        <tr>
          <td>43</td>
          <td>Bruno Nash</td>
          <td>Software Engineer</td>
          <td>London</td>
          <td>38</td>
          <td>2011/05/03</td>
          <td>$163,500</td>
        </tr>
        <tr>
          <td>44</td>
          <td>Sakura Yamamoto</td>
          <td>Support Engineer</td>
          <td>Tokyo</td>
          <td>37</td>
          <td>2009/08/19</td>
          <td>$139,575</td>
        </tr>
        <tr>
          <td>45</td>
          <td>Thor Walton</td>
          <td>Developer</td>
          <td>New York</td>
          <td>61</td>
          <td>2013/08/11</td>
          <td>$98,540</td>
        </tr>
        <tr>
          <td>46</td>
          <td>Finn Camacho</td>
          <td>Support Engineer</td>
          <td>San Francisco</td>
          <td>47</td>
          <td>2009/07/07</td>
          <td>$87,500</td>
        </tr>
        <tr>
          <td>47</td>
          <td>Serge Baldwin</td>
          <td>Data Coordinator</td>
          <td>Singapore</td>
          <td>64</td>
          <td>2012/04/09</td>
          <td>$138,575</td>
        </tr>
        <tr>
          <td>48</td>
          <td>Zenaida Frank</td>
          <td>Software Engineer</td>
          <td>New York</td>
          <td>63</td>
          <td>2010/01/04</td>
          <td>$125,250</td>
        </tr>
        <tr>
          <td>49</td>
          <td>Zorita Serrano</td>
          <td>Software Engineer</td>
          <td>San Francisco</td>
          <td>56</td>
          <td>2012/06/01</td>
          <td>$115,000</td>
        </tr>
        <tr>
          <td>50</td>
          <td>Jennifer Acosta</td>
          <td>Junior Javascript Developer</td>
          <td>Edinburgh</td>
          <td>43</td>
          <td>2013/02/01</td>
          <td>$75,650</td>
        </tr>
        <tr>
          <td>51</td>
          <td>Cara Stevens</td>
          <td>Sales Assistant</td>
          <td>New York</td>
          <td>46</td>
          <td>2011/12/06</td>
          <td>$145,600</td>
        </tr>
        <tr>
          <td>52</td>
          <td>Hermione Butler</td>
          <td>Regional Director</td>
          <td>London</td>
          <td>47</td>
          <td>2011/03/21</td>
          <td>$356,250</td>
        </tr>
        <tr>
          <td>53</td>
          <td>Lael Greer</td>
          <td>Systems Administrator</td>
          <td>London</td>
          <td>21</td>
          <td>2009/02/27</td>
          <td>$103,500</td>
        </tr>
        <tr>
          <td>54</td>
          <td>Jonas Alexander</td>
          <td>Developer</td>
          <td>San Francisco</td>
          <td>30</td>
          <td>2010/07/14</td>
          <td>$86,500</td>
        </tr>
        <tr>
          <td>55</td>
          <td>Shad Decker</td>
          <td>Regional Director</td>
          <td>Edinburgh</td>
          <td>51</td>
          <td>2008/11/13</td>
          <td>$183,000</td>
        </tr>
        <tr>
          <td>56</td>
          <td>Michael Bruce</td>
          <td>Javascript Developer</td>
          <td>Singapore</td>
          <td>29</td>
          <td>2011/06/27</td>
          <td>$183,000</td>
        </tr>
        <tr>
          <td>57</td>
          <td>Donna Snider</td>
          <td>Customer Support</td>
          <td>New York</td>
          <td>27</td>
          <td>2011/01/25</td>
          <td>$112,000</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th>&nbsp;</th>
          <th>Total</th>
          <th>&nbsp;</th>
          <th>&nbsp;</th>
          <th>&nbsp;</th>
          <th>&nbsp;</th>
          <th>$14,371,710</th>
        </tr>
      </tfoot>
    </table>
    <div id="resize_handle">Click and drag me!</div>
  </div>
​
​
</body>
</html>
CSS
 
​
​
​
/* ---------------------------------------------------------------------------- */
/* ATR Styles Here - Fix Double Caret for custom-select */
/* See: https://stackoverflow.com/questions/51077573/bootstrap-4-custom-select-class-showing-two-overlapping-arrow-styles */
/* See: https://stackoverflow.com/questions/48956992/default-caret-appearing-over-top-of-custom-select-carets-in-bootstrap-4 */
/* ---------------------------------------------------------------------------- */
.atr-remove-double-caret {  
  -webkit-appearance: none;  
  -moz-appearance: none;        
}
/* ---------------------------------------------------------------------------- */
​
​
​
/* ---------------------------------------------------------------------------- */
/* ATR Styles Here - DataTablesBS4 */
/* ---------------------------------------------------------------------------- */
#dtPluginExample.table.table-striped.table-hover.dt-responsive.nowrap td,
#dtPluginExample.stripe.hover.row-border.dt-responsive.nowrap td {
  font-size: 0.90rem !important; 
}
/* ---------------------------------------------------------------------------- */
        #resize_handle {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 1.5em;
            border-bottom-right-radius: 0.5em;
            border-bottom-left-radius: 0.5em;
            text-align: center;
            font-size: 0.8em;
            line-height: 1.5em;
            background-color: #4d90fe;
            color: white;
            cursor: pointer;
        }
JavaScript
 
$(document).ready(function() {
​
    var wrapper = $('#resize_wrapper');
    $('#resize_handle').on( 'mousedown', function (e) {
        var mouseStartY = e.pageY;
        var resizeStartHeight = wrapper.height();
​
        $(document)
            .on( 'mousemove.demo', function (e) {
                var height = resizeStartHeight + (e.pageY - mouseStartY);
                if ( height < 180 ) {
                    height = 180;
                }
​
                wrapper.height( height );
            } )
            .on( 'mouseup.demo', function (e) {
                $(document).off( 'mousemove.demo mouseup.demo' );
            } );
​
        return false;
    } );
  
  
    var strIconSearch = '<i class="fas fa-search"></i>';
    var tableTitle = 'Summary of Employees';
    var tableSubTitle = 'Current Listing of Active Employees';
    var tableBS4 = $('#dtPluginExample').DataTable( {
​
        drawCallback: function () {
            // Moved this code block from below the DT options block to get
            // this statement to work - adding pagination-sm to ul.
            // For some reason this class was not remaining after subsequent events.
            $('#dtPluginExample_paginate ul.pagination').addClass("pagination-sm");
        },
​
      
        language: {
            lengthMenu: "Show _MENU_ Entries",
            search: strIconSearch,
            info: "Showing _START_ to _END_ of _TOTAL_ Entries"
        },
      
        //pageLength: 10,
        searching: true,
        info: true,
      paging: false,
​
        // pageResizing Plug-In (Optional).
        pageResize: true,
      
        columnDefs: [
            { targets: [0, 4], className:'text-center bg-warning' },
            { targets: [1, 2, 3], className:'text-left bg-light' },
            { targets: [-1, -2], className:'text-right bg-success text-white' }
        ],
      
        buttons: {
            buttons: [
                { extend: 'copyHtml5', 
                    text: '<i class="fas fa-copy"></i>', 
                    className: 'btn-primary', 
                    title: tableTitle, 
                    messageTop: tableSubTitle, 
                    titleAttr: 'Copy to Clipboard' 
                },
                { extend: 'csvHtml5', 
                    text: '<i class="fas fa-file-csv"></i>', 
                    className: 'btn-primary', 
                    titleAttr: 'Export to CSV' 
                },
                { extend: 'excelHtml5', 
                    text: '<i class="fas fa-file-excel"></i>', 
                    className: 'btn-primary', 
                    title: tableTitle,  
                    messageTop: tableSubTitle, 
                    titleAttr: 'Export to Excel' 
                },
                { extend: 'pdfHtml5', 
                    text: '<i class="fas fa-file-pdf"></i>', 
                    className: 'btn-primary', 
                    title: tableTitle,  
                    messageTop: tableSubTitle, 
                    titleAttr: 'Export to PDF' 
                },
                { extend: 'print', 
                    text: '<i class="fas fa-print"></i>', 
                    className: 'btn-primary', 
                    title: tableTitle,  
                    messageTop: tableSubTitle, 
                    titleAttr: 'Print Table' 
                },
                { extend: 'colvis', 
                    text: '<i class="fas fa-columns"></i>', 
                    className: 'btn-primary', 
                    titleAttr: 'Show/Hide Columns' 
                }
            ],
            dom: {
                button: {
                className: 'btn'
                }
            }
        }
    });
​
    
​
​
    // Add a row for the Title & Subtitle in front of the first row of the wrapper
    var divTitle = '' 
        + '<div class="col-12 text-center text-md-left">'
        + '<h4 class="text-primary">' + tableTitle + '</h4>'
        + '<h5 class="text-primary">' + tableSubTitle + '</h5>'
        + '<hr class="m-0 mb-4" style="border:none; background-color:rgba(0,75,141,1.0); color:rgba(0,75,141,1.0); height:1px;" />'
        + '</div>';
    $( divTitle ).prependTo( '#dtPluginExample_wrapper .row:eq(0)' );
    
    // Insert the Button Toolbar in front of the first row of the wrapper.
    // Had to add BS4-Classes first for proper Responsive/Horizontal Alignment.
    tableBS4.buttons().container().addClass("justify-content-center justify-content-md-start mb-3");
    tableBS4.buttons().container().prependTo( '#dtPluginExample_wrapper .col-12:eq(0)' );
​
    // Table Header
    //    1. Remove BS4-Classes for Background set in the columnDefs Options above, 
    //    2. Add BS4-Class for White Text on Black Background 
    //    3. Reduce Font Size
    // $('#dtPluginExample thead tr th').removeClass("bg-warning bg-light bg-success").addClass("bg-dark text-white").css("font-size", "0.85rem");
    $('thead tr th').removeClass("bg-warning bg-light bg-success").addClass("bg-dark text-white").css("font-size", "0.85rem");
​
    // Table Footer
    //    1. Remove BS4-Classes for Background set in the columnDefs Options above, 
    //    2. Add BS4-Class for White Text on Black Background 
    //    3. Reduce Font Size
    //    4. Remove Horizontal Alignments set above and reassign for Totals.
    $('tfoot tr th').removeClass("bg-warning bg-light bg-success text-left text-center text-right").addClass("bg-dark text-white").css("font-size", "0.85rem");
    $('tfoot tr th:eq(1)').addClass("text-left");
    $('tfoot tr th:eq(6)').addClass("text-right");
​
    // Table Body
    //    1. Reduce Font Size
    // $('#dtPluginExample tbody tr td').css("font-size", "0.90rem");           // This did not work for records beyond initial rendering.  See CSS.
    // $('#dtPluginExample tbody tr td').addClass("atr-datatables-bs4-td");     // This did not work for records beyond initial rendering.  See CSS.
​
    $("input.form-control.form-control-sm").attr('placeholder', 'Search...');
    $("input.form-control.form-control-sm").attr('size', 30);
​
    // Button Toolbar & DataTables Dropdown - Add BS4-Class for Vertical Alignment (in first of 2 columns)
    $('#dtPluginExample_wrapper .col-md-6:eq(0)').addClass("align-self-end");
​
    // Search Box - Add BS4-Class for Vertical Alignment (in second of 2 columns)
    $('#dtPluginExample_wrapper .col-md-6:eq(1)').addClass("align-self-end");
​
    // Pagination - Add BS4-Class for Horizontal Alignment (in second of 2 columns) & Top Margin
    $('#dtPluginExample_wrapper .col-md-7:eq(0)').addClass("d-flex justify-content-center justify-content-md-end");
    $('#dtPluginExample_paginate').addClass("mt-3 mt-md-2");
​
  
});
5 warnings
Line 112: Bad line breaking before '+'.
Line 113: Bad line breaking before '+'.
Line 114: Bad line breaking before '+'.
Line 115: Bad line breaking before '+'.
Line 116: Bad line breaking before '+'.
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers