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 href="https://cdn.datatables.net/fixedheader/3.1.2/css/fixedHeader.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.datatables.net/fixedheader/3.1.2/js/dataTables.fixedHeader.js"></script>
<link href="https://cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.js"></script>
<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.js"></script>
    
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <form>
      <input type="hidden" id="exportAmounts" name="exportAmounts" value="F,G,H,I,J,K,L,M,N"/>
   </form>
    <div class="container">
        <table id="myTable" class="display hover"  aria-labelledby="myTable_name myTable_info">
​
        <thead>
          <tr>
            <th role="button" style="min-width: 6em;">Fund Code</th>
            <th role="button" style="min-width: 8em;">Annual Planned Expense Budget</th>
            <th role="button" style="min-width: 8em;">Current Month Revenues</th>
            <th role="button" style="min-width: 8em;">Current Month Expenses</th>
            <th role="button" style="min-width: 8em;">Current Month Net Income (Loss)</th>
            <th role="button" style="min-width: 8em;">YTD Revenues</th>
            <th role="button" style="min-width: 8em;">YTD Expenses</th>
            <th role="button" style="min-width: 8em;">YTD Net Income (Loss)</th>
            <th role="button" style="min-width: 8em;">Encumbrances</th>
            <th role="button" style="min-width: 8em;">YTD Less Encumbrances</th>
​
          </tr>
        </thead>
​
        <tfoot>
          <tr>
            
            <th>Grand Totals</th>
            <td class="alignRight" ><span class="offscreen">Annual Planned Expense Budget Grand Total</span>0.00</td>
            <td class="alignRight" ><span class="offscreen">Current Month Revenue Grand Total</span>980,781.10</td>
            <td class="alignRight" ><span class="offscreen">Current Month Expenses Grand Total</span>1,449,217.43</td>
            <td class="alignRight" ><span class="offscreen">Current Month Net Income (Loss) Grand Total</span>(468,436.33)</td>
            <td class="alignRight" ><span class="offscreen">YTD Revenues Grand Total</span>980,781.10</td>
            <td class="alignRight" ><span class="offscreen">YTD Expenses Grand Total</span>1,449,217.43</td>
            <td class="alignRight" ><span class="offscreen">YTD Net Income (Loss) Grand Total</span>(468,436.33)</td>
            <td class="alignRight" ><span class="offscreen">Encumbrances Grand Total</span>11,859,986.00</td>
            <td class="alignRight" ><span class="offscreen">YTD Less Encumbrances Grand Total</span>(12,328,422.33)</td>
            <td >&nbsp;</td>
          </tr> 
        </tfoot>
​
        <tbody>
          <tr>
            <td>301018 </td>
            <td class="alignRight">0.00</td>
            <td class="alignRight">5.20</td>
            <td class="alignRight">4,435.47</td>
            <td class="alignRight">(4,430.27)</td>
            <td class="alignRight">5.20</td>
            <td class="alignRight">4,435.47</td>
            <td class="alignRight">(4,430.27)</td>
​
            <td class="alignRight">43,068.49</td>
            <td class="alignRight">(47,498.76)</td>
​
          </tr>
          <tr>
            <td>301021 </td>
            <td class="alignRight">0.00</td>
            <td class="alignRight">5,197.30</td>
            <td class="alignRight">2,095.86</td>
            <td class="alignRight">3,101.44</td>
            <td class="alignRight">5,197.30</td>
            <td class="alignRight">2,095.86</td>
            <td class="alignRight">3,101.44</td>
​
            <td class="alignRight">44,988.67</td>
            <td class="alignRight">(41,887.23)</td>
​
          </tr>
          <tr>
            <td>301183 </td>
            <td class="alignRight">0.00</td>
            <td class="alignRight">0.00</td>
            <td class="alignRight">0.00</td>
            <td class="alignRight">0.00</td>
            <td class="alignRight">0.00</td>
            <td class="alignRight">0.00</td>
            <td class="alignRight">0.00</td>
​
            <td class="alignRight">0.01</td>
            <td class="alignRight">(0.01)</td>
​
          </tr>
          <tr>
            <td>301350 </td>
            <td class="alignRight">0.00</td>
            <td class="alignRight">0.00</td>
            <td class="alignRight">(354.25)</td>
            <td class="alignRight">354.25</td>
            <td class="alignRight">0.00</td>
            <td class="alignRight">(354.25)</td>
            <td class="alignRight">354.25</td>
​
            <td class="alignRight">0.00</td>
            <td class="alignRight">354.25</td>
​
          </tr>
          <tr>
            <td>301399 </td>
            <td class="alignRight">0.00</td>
            <td class="alignRight">3,786.89</td>
            <td class="alignRight">17,597.36</td>
            <td class="alignRight">(13,810.47)</td>
            <td class="alignRight">3,786.89</td>
            <td class="alignRight">17,597.36</td>
            <td class="alignRight">(13,810.47)</td>
​
            <td class="alignRight">255,260.27</td>
            <td class="alignRight">(269,070.74)</td>
​
          </tr>
          <tr>
           <td>302728 </td>
            <td class="alignRight">0.05</td>
            <td class="alignRight">3,000.00</td>
            <td class="alignRight">0.09</td>
            <td class="alignRight">3,000.22</td>
            <td class="alignRight">3,000.00</td>
            <td class="alignRight">0.21</td>
            <td class="alignRight">3,000.00</td>
​
            <td class="alignRight">0.24</td>
            <td class="alignRight">3,000.00</td>
​
          </tr>
          <tr>
            <td>303075 </td>
            <td class="alignRight">0.00</td>
            <td class="alignRight">0.00</td>
            <td class="alignRight">5,627.08</td>
            <td class="alignRight">(5,627.08)</td>
            <td class="alignRight">0.00</td>
            <td class="alignRight">5,627.08</td>
            <td class="alignRight">(5,627.08)</td>
​
            <td class="alignRight">139,197.17</td>
            <td class="alignRight">(144,824.25)</td>
​
          </tr>
          <tr>
            <td>303711 </td>
            <td class="alignRight">0.00</td>
            <td class="alignRight">393.50</td>
            <td class="alignRight">110.06</td>
            <td class="alignRight">283.44</td>
            <td class="alignRight">393.50</td>
            <td class="alignRight">110.06</td>
            <td class="alignRight">283.44</td>
​
            <td class="alignRight">1,138.93</td>
            <td class="alignRight">(855.49)</td>
​
          </tr>
          <tr>
            <td>301676 </td>
            <td class="alignRight">0.00</td>
            <td class="alignRight">0.00</td>
            <td class="alignRight">48.71</td>
            <td class="alignRight">(48.71)</td>
            <td class="alignRight">0.00</td>
            <td class="alignRight">48.71</td>
            <td class="alignRight">(48.71)</td>
​
            <td class="alignRight">0.00</td>
            <td class="alignRight">(48.71)</td>
​
          </tr>
          <tr>
            <td>302165 </td>
            <td class="alignRight">0.00</td>
            <td class="alignRight">71,000.00</td>
            <td class="alignRight">28,702.38</td>
            <td class="alignRight">42,297.62</td>
            <td class="alignRight">71,000.00</td>
            <td class="alignRight">28,702.38</td>
            <td class="alignRight">42,297.62</td>
​
            <td class="alignRight">60,175.33</td>
            <td class="alignRight">(17,877.71)</td>
​
          </tr>
          <tr>
            <td>302333 </td>
            <td class="alignRight">0.00</td>
            <td class="alignRight">0.00</td>
            <td class="alignRight">0.00</td>
            <td class="alignRight">0.00</td>
            <td class="alignRight">0.00</td>
            <td class="alignRight">0.00</td>
            <td class="alignRight">0.00</td>
​
            <td class="alignRight">4,592.25</td>
            <td class="alignRight">(4,592.25)</td>
​
          </tr>
          <tr>
            <td>302423 </td>
            <td class="alignRight">0.00</td>
            <td class="alignRight">0.00</td>
            <td class="alignRight">52.79</td>
            <td class="alignRight">(52.79)</td>
            <td class="alignRight">0.00</td>
            <td class="alignRight">52.79</td>
            <td class="alignRight">(52.79)</td>
​
            <td class="alignRight">0.00</td>
            <td class="alignRight">(52.79)</td>
​
          </tr>
          <tr>
            <td>303294 </td>
            <td class="alignRight">0.00</td>
            <td class="alignRight">5,500.00</td>
            <td class="alignRight">0.00</td>
            <td class="alignRight">5,500.00</td>
            <td class="alignRight">5,500.00</td>
            <td class="alignRight">0.00</td>
            <td class="alignRight">5,500.00</td>
​
            <td class="alignRight">0.00</td>
            <td class="alignRight">5,500.00</td>
​
          </tr>
          <tr>
            <td>303481 </td>
            <td class="alignRight">0.00</td>
            <td class="alignRight">0.00</td>
            <td class="alignRight">(1,208.44)</td>
            <td class="alignRight">1,208.44</td>
            <td class="alignRight">0.00</td>
            <td class="alignRight">(1,208.44)</td>
            <td class="alignRight">1,208.44</td>
​
            <td class="alignRight">69.34</td>
            <td class="alignRight">1,139.10</td>
​
          </tr>
          <tr>
           <td>303712 </td>
            <td class="alignRight">0.00</td>
            <td class="alignRight">500.00</td>
            <td class="alignRight">0.00</td>
            <td class="alignRight">500.00</td>
            <td class="alignRight">500.00</td>
            <td class="alignRight">0.00</td>
            <td class="alignRight">500.00</td>
​
            <td class="alignRight">4,415.00</td>
            <td class="alignRight">(3,915.00)</td>
​
          </tr>
          <tr>
           <td>303782 </td>                             <td class="alignRight">0.00</td>
            <td class="alignRight">0.00</td>
            <td class="alignRight">(3,251.76)</td>
            <td class="alignRight">3,251.76</td>
            <td class="alignRight">0.00</td>
            <td class="alignRight">(3,251.76)</td>
            <td class="alignRight">3,251.76</td>
​
            <td class="alignRight">3,684.23</td>
            <td class="alignRight">(432.47)</td>
​
          </tr>
          <tr>
           <td>304035 </td>
            <td class="alignRight">0.00</td>
            <td class="alignRight">2,210.80</td>
            <td class="alignRight">2,345.27</td>
            <td class="alignRight">(134.47)</td>
            <td class="alignRight">2,210.80</td>
            <td class="alignRight">2,345.27</td>
            <td class="alignRight">(134.47)</td>
​
            <td class="alignRight">0.00</td>
            <td class="alignRight">(134.47)</td>
​
          </tr>
          <tr>
           <td>304126 </td>
            <td class="alignRight">0.00</td>
            <td class="alignRight">0.00</td>
            <td class="alignRight">0.00</td>
            <td class="alignRight">0.00</td>
            <td class="alignRight">0.00</td>
            <td class="alignRight">0.00</td>
            <td class="alignRight">0.00</td>
​
            <td class="alignRight">300.00</td>
            <td class="alignRight">(300.00)</td>
​
          </tr>
          <tr>
            <td>304152 </td>
            <td class="alignRight">0.01</td>
            <td class="alignRight">0.00</td>
            <td class="alignRight">1,043.00</td>
            <td class="alignRight">(1,043.00)</td>
            <td class="alignRight">0.00</td>
            <td class="alignRight">1,043.00</td>
            <td class="alignRight">(1,043.00)</td>
​
            <td class="alignRight">0.01</td>
            <td class="alignRight">(1,043.00)</td>
​
          </tr>
          <tr>
           <td>304182 </td>
            <td class="alignRight">0.00</td>
            <td class="alignRight">0.00</td>
            <td class="alignRight">3,168.53</td>
            <td class="alignRight">(3,168.53)</td>
            <td class="alignRight">(0.02)</td>
            <td class="alignRight">3,168.53</td>
            <td class="alignRight">(3,168.53)</td>
​
            <td class="alignRight">0.00</td>
            <td class="alignRight">(3,168.53)</td>
​
          </tr>
          <tr>
            <td>303965 </td>
            <td class="alignRight">0.00</td>
            <td class="alignRight">0.00</td>
            <td class="alignRight">0.00</td>
            <td class="alignRight">0.00</td>
            <td class="alignRight">0.00</td>
            <td class="alignRight">0.00</td>
            <td class="alignRight">0.00</td>
​
            <td class="alignRight">10,671.74</td>
            <td class="alignRight">(10,671.74)</td>
​
          </tr>
          <tr>
            <td>303964 </td>
            <td class="alignRight">0.00</td>
            <td class="alignRight">1,476.00</td>
            <td class="alignRight">180.28</td>
            <td class="alignRight">1,295.72</td>
            <td class="alignRight">1,476.00</td>
            <td class="alignRight">180.28</td>
            <td class="alignRight">1,295.72</td>
​
            <td class="alignRight">2,648.88</td>
            <td class="alignRight">(1,353.16)</td>
​
          </tr>
          <tr>
           <td>3041888 </td>
            <td class="alignRight">0.00</td>
            <td class="alignRight">0.00</td>
            <td class="alignRight">3,168.53</td>
            <td class="alignRight">(3,168.53)</td>
            <td class="alignRight">(0.02)</td>
            <td class="alignRight">3,168.53</td>
            <td class="alignRight">(3,168.53)</td>
​
            <td class="alignRight">0.00</td>
            <td class="alignRight">(3,168.53)</td>
​
          </tr>
          <tr>
            <td>3039655 </td>
            <td class="alignRight">0.00</td>
            <td class="alignRight">0.00</td>
            <td class="alignRight">0.00</td>
            <td class="alignRight">0.00</td>
            <td class="alignRight">0.00</td>
            <td class="alignRight">0.00</td>
            <td class="alignRight">0.00</td>
​
            <td class="alignRight">10,671.74</td>
            <td class="alignRight">(10,671.74)</td>
​
          </tr>
          <tr>
            <td>3039644 </td>
            <td class="alignRight">0.00</td>
            <td class="alignRight">1,476.00</td>
            <td class="alignRight">180.28</td>
            <td class="alignRight">1,295.72</td>
            <td class="alignRight">1,476.00</td>
            <td class="alignRight">180.28</td>
            <td class="alignRight">1,295.72</td>
​
            <td class="alignRight">2,648.88</td>
            <td class="alignRight">(1,353.16)</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;
}
.pagination .current {
  padding: 0; }
.offscreen {
  /* available for screen readers, hidden from reg users */
  position: absolute;
  clip: rect(1px 1px 1px 1px); /* IE 6 and IE 7 */
  clip: rect(1px, 1px, 1px, 1px); /* clip to 1px width and height */
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden; 
  text-indent: -999em; /* Indent any text so it is not visible */
  word-wrap: normal; /* Fix a JAWS+Firefox scrollbar issue when word-wrap is set */
  }
ul.pagination li.unavailable a, ul.pagination li.unavailable button {
  color: #858687;
  display: none; }
.invisible {
  visibility: hidden; }
​
div.bottom {
  float: left; }
​
.alignleft {
  text-align: left;
  margin: 0em 0em 0em .5em; }
​
div.dt-buttons {
  margin: 0em 0 0em .3em; }
​
a.buttons-print, a.buttons-html5 {
  padding: 0 .2em 0 .6em;
  margin: 0 .5em 0 0; }
​
div.toolbar {
  margin: .6em 0 0em 25%;
  float: left;
  font-family: "Roboto", arial, sans-serif;
  color: #4d4d4d;
  font-size: 0.875rem; }
​
div.pageBar {
  margin: 0.1em .3em 0 0;
  float: right;
  font-family: "Roboto", arial, sans-serif;
  color: #4d4d4d;
  font-size: 0.875rem; }
​
.paging_full_numbers a.paginate_button {
  background-color: #eee; }
​
.highlight {
  background-color: #D1DBE1; }
​
.displayNone {
  display: none; }
​
.clearboth {
  clear: both; }
  
.fixed-dialog{
  position: fixed;
  top: 50px;
  left: 50px;}
  
.dropdown.menu > li.is-dropdown-submenu-parent > a:hover::after { 
  border-color: #284087 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); 
 }
.dropdown.menu > li.is-dropdown-submenu-parent > a::after {  
  border-color: #ffffff rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
}
.dropdown.menu > li.is-dropdown-submenu-parent > a.active::after {  
                border-color: #284087 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
}
​
  
.alignRight {
  text-align: right;
  white-space: nowrap; }
​
div.flagged  {
  font-style: italic;
  color: #83049D; 
  font-size: .9rem;
  padding-top: 1rem;}
  
.buttons-csv:focus {
  outline: 3px dashed #000; }
#tableDefinitions dd {
    margin-left:1em;
}
​
JavaScriptSaved
 
(function(){
    // Change this list to the valid characters you want to be detected
    var validChars = "$£€c" + "0123456789" + ".-,()'";
    // Init the regex just once for speed - it is "closure locked"
    var
    str = jQuery.fn.dataTableExt.oApi._fnEscapeRegex( validChars ),re = new RegExp('[^'+str+']');
    $.fn.dataTableExt.aTypes.unshift(
        function ( data )
        {
            if ( typeof data !== 'string' || re.test(data) ) {
                return null;
            }
            return 'currency';
        }
    );
    $.fn.dataTable.ext.type.order['currency-pre'] = function ( data ) {
        //Check if its in the proper format
        if(data.match(/[\()]/g)){
            if( data.match(/[\-]/g) !== true){
                //It matched - strip out parentheses & any characters we dont want and append - at front
                data = '-' + data.replace(/[\$£€c\(\),]/g,'');
            }else{
                //Already has a '-' so just strip out non-numeric charactors exluding '-'
                data = data.replace(/[^\d\-\.]/g,'');
            }
        }else{
            data = data.replace(/[\$£€\,]/g,'');
        }
        return parseFloat( data );
    };
}());
​
$(document).ready( function () {
// Set the number of columns to include in the exported files for the datatable.
  // Defind per page in the hidden variable maxExportColumn
  var maxExportColumn = $("#maxExportColumn").val();
  var columnList = [];
  for (i = 0; i <=maxExportColumn; i++) {
    columnList[i] = i; 
  }
  var table = $('#myTable').DataTable(
  {
    "dom": "<'marginrightshow'l><'toolbar'><'alignleft marginrightshow'B><'alignleft marginrightshow'f><'clearboth'>t<'clearboth'><'clearboth'><'bottom'i><'alignleft marginrightshow'p><'pageBar'>", 
    "fixedHeader": {
      header: true,
      footer: false
    },
    "destroy": true, 
    "pageLength": 100,
    "aLengthMenu": [[10, 25, 50, 100], [10, 25, 50, 100]],
    "oLanguage": {
      "sEmptyTable": "No data found. Try changing the filters or choosing a different fiscal year and period."
    },
    "orderble": true,
    "order": [],
    "columnDefs": [
      {"targets": 'no-sort', "orderable": false },
      {"targets": ["alignRight"], "className": "alignRight"}
    ]
  });
  $("div.toolbar").html('Export Data to:');
  $("div.pageBar").html('Go to Page:');
​
  $("div#myTable_paginate").attr('role','navigation');
  $("div#myTable_paginate").attr('aria-label','Go to Page');
  $("div#myTable_length").attr('role','navigation');
  $("div#myTable_length").attr('aria-label','Filter for how many rows to display in the table');
  $("div#myTable_filter").attr('role','search');
  $("div#myTable_filter").attr('aria-label','Search within records displayed in table');
  
                    
 });
​
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers