<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();
});
} );
You can jump to the latest bin by adding /latest
to your URL
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + [ | Indents selected lines |
ctrl + ] | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Clone Bin |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |