<script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://nightly.datatables.net/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/fixedcolumns/3.1.0/js/dataTables.fixedColumns.min.js"></script>
<body>
<div class="lynxPageHeader">
</div>
<div id="lynx_filter" style="display:flex">
<label>Row Filter<input id="row_filter_value" /></label>
</div>
2 rows, so 2 checkboxes, 2 firstrealcolumn, etc<br/>
  Click a column header checkbox to see errors listed in console
<table id="lynx_table_1">
<thead>
<tr style="height:9px;">
<td bgcolor="#aaaaaa"><font color="#aaaaaa">X</font></td>  <td class="graytd" bgcolor="#aaaaaa"><font color="#aaaaaa"><input class="colcb" type="checkbox" id="cb1" onclick="colHdrClicked(1)">fl</input></font></td>
  <td class="graytd" bgcolor="#aaaaaa"><font color="#aaaaaa"><input class="colcb" type="checkbox" id="cb2" onclick="colHdrClicked(2)">fl</input></font></td>
  <td class="graytd" bgcolor="#aaaaaa"><font color="#aaaaaa"><input class="colcb" type="checkbox" id="cb3" onclick="colHdrClicked(3)">fl</input></font></td>
</tr>
<tr>
<td bgcolor="#aaaaaa"><font color="#aaaaaa">X</font></td>  <td align="left" bgcolor="#948ecd"><font color="#000000">Date</font></td>
  <td align="left" bgcolor="#cebfe7"><font color="#000000">User</font></td>
  <td align="left" bgcolor="#d7c7b1"><font color="#000000">Area</font></td>
</tr>
</thead>
<tbody>
<tr><td bgcolor="#aaaaaa"><font color="#000000"><input class="rowcb" type="checkbox" value="0" id="rowcb0" onclick="rowHdrClicked(0)"></input>0</font></td>
  <td class = "firstrealcolumn" align="left" bgcolor="#ffffff"><font color="#000000">2015_01_00</font></td>
  <td align="left" bgcolor="#ffffff"><font color="#000000">Frank</font></td>
  <td align="right" bgcolor="#ffffff"><font color="#000000">260</font></td>
</tr>
<tr><td bgcolor="#aaaaaa"><font color="#000000"><input class="rowcb" type="checkbox" value="1" id="rowcb1" onclick="rowHdrClicked(1)"></input>1</font></td>
  <td class = "firstrealcolumn" align="left" bgcolor="#ffffff"><font color="#000000">2015_01_01</font></td>
  <td align="left" bgcolor="#ffffff"><font color="#000000">Allen</font></td>
  <td align="right" bgcolor="#ffffff"><font color="#000000">250</font></td>
</tr>
</tbody>
</table>
</body>
 
* {
  font-family: "Lucida Sans Typewriter", monospace;
}
h1 {
  font-size: 14px;
  text-align: left;
  color:#000000;
}
h2 {
  font-size: 11px;
  text-align: left;
  color:#000000;
}
a:link    {color: #000000; text-decoration: none; }
a:active  {color: #000000; text-decoration: none; }
a:visited {color: #0000ff; text-decoration: none; }
a:hover   {color: #000000; text-decoration: none; }
table {
  margin: 0;
  padding: 0;
  border-collapse: separate; /* never use collapse here */
  border-spacing: 0;
  border-style: none none solid solid;
  border-width: 1px;
  border-color: #c7c4c1;
}
table table {
  margin: 0;
  padding: 0;
  border-style: none;
  height: 100%;
  width: 100%;
}
td {
  font-size: 11px;
  margin: 0;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 0;
  padding-bottom: 0;
  /* border-style: solid; */
  border-style: solid solid none none;
  border-width: 1px;
  border-color: #c7c4c1;
  white-space: nowrap;
}
td td {
  border-style: none;
}
.c  {
  margin: 0;
  /* border-style: solid; */
  border-style: solid solid none none;
  border-width: 1px;
  border-color: #c7c4c1;
  padding: 0;
}
.cb {
  padding:0px;
  margin:0px;
}
.tbb {
  width:44px;
  margin-right:0px;
  margin-left:0px;
}
.graytd {
  margin:0px;
}
.DTFC_LeftBodyLiner{
  overflow-x:hidden;
}
 
    // next four lines replaced on parse.  Exact text is searched/replaced, so be careful
    var columnNames = [
    "+NULL+", // signals fixed column, for checkbox column at beginning
    "Date",
    "User",
    "Area",
    ];
    var columnState = [
    false,false,false,false
    ];
    var rowState = [
    false,false
    ];
    var rowNames = [
    ];
    var columnCount = 1;
    
    var oTable = null;
    var defaultOptions = null;
    var shiftKeyState = false;
    var ckbox_flag=false;
    var _myrowFilterRegexArray = null;
    var firstColWidth = 0;
    var bannerHeight = 0; // our h1 and h2 height, only calculated on startup
    var headerHeight = 0; // height of table header, varies with rows in header
    var allowance = 90; // extra space needed, found 118 good for offline debugging in firefox
    var windowHeight = 0;
    var isInFrame = (window.location != window.parent.location) ? true : false;
    var calcWindowHeight = function(){
      if (isInFrame){
         return window.innerHeight;
      }else{
         return window.outerHeight;
      }
    };
    var calcDataTableHeight = function(){
       var wHeight = windowHeight - bannerHeight - headerHeight - allowance;
       return wHeight + 'px';
    };
    var getFirstColumnActualWidth = function(){
      return $('#lynx_table_1 thead:first tr:first td:first').css("width");
    };
    String.prototype.endsWith = function(suffix) {
      return this.indexOf(suffix, this.length - suffix.length) !== -1;
    };
    var replaceIfNotPrecededBy = function(theString, toReplace, ifnotprecby) {
      var retVal = "";
      var splt = theString.split(toReplace);
      for (var i=0; i<splt.length-1; i++){
        var s = splt[i];
        retVal = retVal.concat(s);
        if (!s.endsWith(ifnotprecby)){
          retVal = retVal.concat(ifnotprecby);
        }
        retVal = retVal.concat(toReplace);
      }
      retVal = retVal.concat(splt[splt.length-1]);
      return retVal;
    };
    
   
    function generateRegex(inputString){
      var retval = [null];
      
      return retval;
    }
    // This push call happens twice on startup.  Is that normal?
    $.fn.dataTable.ext.search.push(
      function(settings, data, index){
        return true;
      });
    function rowHdrClicked(hdrNumber){}
    function colHdrClicked(hdrNumber){
      // these queries are here for testing purposes
      var allrowcbs = $('.rowcb');
      console.log('number of row checkboxes should be 2: '+allrowcbs.length);
      var firstrealcolumnlist = $('.firstrealcolumn');
      console.log('number of firstrealcolumnlist entries should be 2: '+firstrealcolumnlist.length);
      var newSetting = !columnState[hdrNumber];
      columnState[hdrNumber]=newSetting;
    }
    function reset_controls(){}
    function recalc_table(){}
    $(document).on('keyup keydown', function(e){shiftKeyState = e.shiftKey; console.log('shift:'+shiftKeyState);} );
    $(document).ready(function() {
        reset_controls();
        bannerHeight = $('div.lynxPageHeader').height();
        headerHeight = parseInt($('#lynx_table_1 thead:first').css("height"), 10);
        firstColWidth = getFirstColumnActualWidth();
        windowHeight = calcWindowHeight();
        var dtHeight = calcDataTableHeight();
        //alert('initial ht:'+windowHeight);
        defaultOptions = {
          "scrollX": true,
          "scrollY": "0px", // recalculated when ready
          "scrollCollapse": true, // height reduced to what is needed if table is short
          "orderCellsTop": true, // we have the phantom row in there now, so this is needed
          "fixedColumns": { "leftColumns": 1 }, // make 1 larger than header_cols on multitable for the legend column
          //"rowsGroup": [], // 2 in line above means 0,1, 3 means 0,1,2, etc, unless multitable, then subtract 1 before deciding here
          "paging": false,
          "bInfo": false,
          "order":[],
          "sDom": '<"top"i>rt<"bottom"lp><"clear">',
          columnDefs: [{ targets: 0, width: firstColWidth }, {type:'mystring', targets:'_all'}]
        };
        var cols = [{"orderable":false},{"orderable":false},{"orderable":false},{"orderable":false},];
        defaultOptions.columns = cols;
        defaultOptions.scrollY = dtHeight;
        oTable = $('#lynx_table_1').DataTable(defaultOptions); 
        // sense change in the row filter box
        $('#row_filter_value').keyup(function(){
          oTable.draw();
        });
        
    } );
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers