datatable.html revision c77d701a41f1b77424b988c2e63f2a8e6829c7e6
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
98c7a407991cdb0caa6bce97544759d7d56b39e0Tilo Mitra<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssreset/reset-min.css">
98c7a407991cdb0caa6bce97544759d7d56b39e0Tilo Mitra<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssbase/base-min.css">
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra<script type="text/javascript" src="/build/yui/yui-debug.js"></script>
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra font-family: sans-serif;
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra font-size: smaller;
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra padding: 5px;
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra font-size:120%;
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra background: #FFFCB6;
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra border:1px solid #C9C675;
31dc38d003f727e19c61510100f8418658af15d5Tilo Mitra #results dt {
31dc38d003f727e19c61510100f8418658af15d5Tilo Mitra font-weight:bold;
31dc38d003f727e19c61510100f8418658af15d5Tilo Mitra padding:3px;
31dc38d003f727e19c61510100f8418658af15d5Tilo Mitra display:block;
31dc38d003f727e19c61510100f8418658af15d5Tilo Mitra #results dd {
31dc38d003f727e19c61510100f8418658af15d5Tilo Mitra font-weight:normal;
31dc38d003f727e19c61510100f8418658af15d5Tilo Mitra #results dd span {
31dc38d003f727e19c61510100f8418658af15d5Tilo Mitra font-weight:bold;
98c7a407991cdb0caa6bce97544759d7d56b39e0Tilo Mitra<p>To test the performance of various datatables, look at the following sections in the code:
98c7a407991cdb0caa6bce97544759d7d56b39e0Tilo Mitra//large or small dataset.
98c7a407991cdb0caa6bce97544759d7d56b39e0Tilo Mitra//---------------------------------------------
98c7a407991cdb0caa6bce97544759d7d56b39e0Tilo Mitra// Special instructions
98c7a407991cdb0caa6bce97544759d7d56b39e0Tilo Mitra//---------------------------------------------
98c7a407991cdb0caa6bce97544759d7d56b39e0Tilo Mitra //ignore following tests (good to do if you are doing a large dataset)
98c7a407991cdb0caa6bce97544759d7d56b39e0Tilo Mitra testBaseDatatable: true,
98c7a407991cdb0caa6bce97544759d7d56b39e0Tilo Mitra testXYDatatable: true,
98c7a407991cdb0caa6bce97544759d7d56b39e0Tilo Mitra testXDatatable: true,
98c7a407991cdb0caa6bce97544759d7d56b39e0Tilo Mitra testYDatatable_FixedCol: true,
98c7a407991cdb0caa6bce97544759d7d56b39e0Tilo Mitra testYDatatable_AutoCol: true,
98c7a407991cdb0caa6bce97544759d7d56b39e0Tilo Mitra testXYDatatable_BigHeaders: false
98c7a407991cdb0caa6bce97544759d7d56b39e0Tilo Mitra Toggle <code>data</code> from <code>large</code> to <code>small</code> to get a different sized dataset. The <code>ignore</code> object determines which table to load. If testing performance, it is recommended that you only enable 1 table at a time.</p>
98c7a407991cdb0caa6bce97544759d7d56b39e0Tilo Mitra<p><input type="button" value="Run Tests" id="btnRun" disabled=true></p>
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra<h3>Scrolling XY Datatable (Set columnwidths)</h3>
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra<P>A general XY scrolling datatable. Column widths are provided for all columns, table width and height is provided.</p>
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra<p>A X-scrolling datatable. Column A and B have specified widths. The rest of the columns do not have any widths specified. Only a height of 200px is specified.</p>
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra<p>A Y-scrolling datatable. Column widths are provided for all columns, table height is provided. Since all cols have specified width, you may see this table overflowing past its container div (the blue div in the background). </p>
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra<p>A Y-scrolling datatable, where only the first 2 columns have a specified width. Only the table height is provided.</p>
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra<p>A XY-scrolling datatable, where only the first 2 columns have a specified width. Table height and width is provided. The table headers are of larger width than the table contents</p>
76c9fe1d50dff2736aa35ed3e81acaf8cdf48588Tilo Mitra<h3>Scrolling Datatable with no width or height set</h3>
76c9fe1d50dff2736aa35ed3e81acaf8cdf48588Tilo Mitra<p>A scrolling datatable with no width or height values passed in will result in a base datatable being created with auto width and height.</p>
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra(function() {
c77d701a41f1b77424b988c2e63f2a8e6829c7e6Luke Smith filter: (window.location.search.match(/[?&]filter=([^&]+)/) || [])[1] || 'min',
c77d701a41f1b77424b988c2e63f2a8e6829c7e6Luke Smith allowRollup: false,
c77d701a41f1b77424b988c2e63f2a8e6829c7e6Luke Smith useBrowserConsole: false
31dc38d003f727e19c61510100f8418658af15d5Tilo Mitra }).use("console", "test", "dump", "datatable", "profiler","node","json-parse", function(Y) {
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra // Set up the page
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra var ASSERT = Y.Assert,
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra ARRAYASSERT = Y.ArrayAssert,
98c7a407991cdb0caa6bce97544759d7d56b39e0Tilo Mitra BTNRUN = Y.one("#btnRun"),
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra BTNRUN.set("disabled", false);
98c7a407991cdb0caa6bce97544759d7d56b39e0Tilo Mitra TestRunner.subscribe(TestRunner.TEST_CASE_COMPLETE_EVENT, testCompleted);
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra Y.on("click", function(e){
98c7a407991cdb0caa6bce97544759d7d56b39e0Tilo Mitra BTNRUN.set("value", 'Running...');
98c7a407991cdb0caa6bce97544759d7d56b39e0Tilo Mitra BTNRUN.set("disabled", true);
98c7a407991cdb0caa6bce97544759d7d56b39e0Tilo Mitra function testCompleted() {
98c7a407991cdb0caa6bce97544759d7d56b39e0Tilo Mitra BTNRUN.set("value", 'Test Completed');
98c7a407991cdb0caa6bce97544759d7d56b39e0Tilo Mitra Y.log('Test Completed');
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra var myConsole = new Y.Console().render();
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra //large data set
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra var large = [];
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra large[i] = {a: i+1, b:i+2, c:i+3, d: i+4, e: i+5, f: i+6, g:i+7};
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra var small = [{a:3, b:2, c:1, d:6, e:7, f:2, g:0}, {a:9, b:8, c:7, d:6, e:7, f:2, g:0}, {a:1, b:2, c:3, d:6, e:7, f:2, g:0},
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra {a:3, b:2, c:1, d:6, e:7, f:2, g:0}, {a:9, b:8, c:7, d:6, e:7, f:2, g:0}, {a:1, b:2, c:3, d:6, e:7, f:2, g:0},
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra {a:3, b:2, c:1, d:6, e:7, f:2, g:0}, {a:9, b:8, c:7, d:6, e:7, f:2, g:0}, {a:1, b:2, c:3, d:6, e:7, f:2, g:0},
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra {a:3, b:2, c:1, d:6, e:7, f:2, g:0}, {a:9, b:8, c:7, d:6, e:7, f:2, g:0}, {a:1, b:2, c:3, d:6, e:7, f:2, g:0}];
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra nestedcols: [
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra cols: [{key:"a", field:"a", label:"AAA", sortable:true, className: ["oneClass", "anotherClass"], width:'75px'},{key:"b", abbr:"bbb", className:"myClass", width: '120px'},{key:"c", width:'75px'},{key:"d", width:'150px'},{key:"3", width:'75px'},{key:"f", width:'150px'},{key:"g", width:'75px'}],
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra cols2: [{key:"a", field:"a", label:"AAA", sortable:true, className: ["oneClass", "anotherClass"], width:'75px'},{key:"b", abbr:"bbb", className:"myClass", width:'75px'},{key:"c"},{key:"d"},{key:"e"},{key:"f"},{key:"g"}],
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra cols3: [{key:"a", field:"a", label:"Lorem Ipsum Dolor SIt Amet", sortable:true, className: ["oneClass", "anotherClass"], width:'5px'},{key:"b", abbr:"Lorem Ipsum Dolor SIt Amet", className:"myClass", width:'75px'},{key:"Lorem Ipsum Dolor SIt Amet"},{key:"Lorem Ipsum Dolor SIt Amet"},{key:"Lorem Ipsum Dolor SIt Amet"},{key:"Lorem Ipsum Dolor SIt Amet"},{key:"Lorem Ipsum Dolor SIt Amet"}],
98c7a407991cdb0caa6bce97544759d7d56b39e0Tilo Mitra //---------------------------------------------
98c7a407991cdb0caa6bce97544759d7d56b39e0Tilo Mitra //---------------------------------------------
98c7a407991cdb0caa6bce97544759d7d56b39e0Tilo Mitra //ignore following tests (good to do if you are doing a large dataset)
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra //---------------------------------------------
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra //---------------------------------------------
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra //this.rs = new Y.Recordset({records:this.initialData});
31dc38d003f727e19c61510100f8418658af15d5Tilo Mitra /////////////////////////////////////////////////////////////////////////////
31dc38d003f727e19c61510100f8418658af15d5Tilo Mitra /////////////////////////////////////////////////////////////////////////////
31dc38d003f727e19c61510100f8418658af15d5Tilo Mitra var dd = Y.Node.create('<dd>' + v.calls + ' call(s) at ' + v.avg + ' ms/call = <span>' + Math.round(v.avg*v.calls) + '</span> ms total</dd>');
31dc38d003f727e19c61510100f8418658af15d5Tilo Mitra /////////////////////////////////////////////////////////////////////////////
31dc38d003f727e19c61510100f8418658af15d5Tilo Mitra /////////////////////////////////////////////////////////////////////////////
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra testBaseDatatable: function() {
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra var sel = "#base";
31dc38d003f727e19c61510100f8418658af15d5Tilo Mitra this.dt = new Y.DataTable.Base({columnset:this.cols, recordset:this.data, caption:"Base"});
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra var msg = Y.Profiler.getAverage('dtBase') + 'ms taken to display';
31dc38d003f727e19c61510100f8418658af15d5Tilo Mitra var report = Y.Profiler.getFullReport(this.reportParser);
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra Y.log(msg, "time");
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra Y.one(sel).appendChild('<p class="message">'+msg+'</p>');
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra testXYDatatable: function() {
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra var sel = '#scrolling-xy';
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra this.dt = new Y.DataTable.Base({columnset:this.cols, recordset:this.data, tdValueTemplate:"plug then render {value}", caption: "ScrollingDataTable"});
76c9fe1d50dff2736aa35ed3e81acaf8cdf48588Tilo Mitra this.dt.plug(Y.Plugin.DataTableScroll, {width:"200px", height:"300px"});
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra var msg = Y.Profiler.getAverage('dtXY') + 'ms taken to display';
31dc38d003f727e19c61510100f8418658af15d5Tilo Mitra var report = Y.Profiler.getFullReport(this.reportParser);
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra Y.log(msg, "time");
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra Y.one(sel).appendChild('<p class="message">'+msg+'</p>');
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra testXDatatable: function() {
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra var sel = "#scrolling-x";
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra this.dt = new Y.DataTable.Base({columnset:this.cols2, recordset:this.data, caption:"ScrollingDataTable"});
76c9fe1d50dff2736aa35ed3e81acaf8cdf48588Tilo Mitra this.dt.plug(Y.Plugin.DataTableScroll, {width:"150px"});
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra var msg = Y.Profiler.getAverage('dtX') + 'ms taken to display';
31dc38d003f727e19c61510100f8418658af15d5Tilo Mitra var report = Y.Profiler.getFullReport(this.reportParser);
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra Y.log(msg, "time");
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra Y.one(sel).appendChild('<p class="message">'+msg+'</p>');
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra testYDatatable_FixedCol: function() {
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra var sel = "#scrolling-y";
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra this.dt = new Y.DataTable.Base({columnset:this.cols, recordset:this.data, tdValueTemplate:"plug then render {value}", caption:"ScrollingDataTable"});
76c9fe1d50dff2736aa35ed3e81acaf8cdf48588Tilo Mitra this.dt.plug(Y.Plugin.DataTableScroll, {height:"300px"});
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra var msg = Y.Profiler.getAverage('dtY1') + 'ms taken to display';
31dc38d003f727e19c61510100f8418658af15d5Tilo Mitra var report = Y.Profiler.getFullReport(this.reportParser);
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra Y.log(msg, 'time');
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra Y.one(sel).appendChild('<p class="message">'+msg+'</p>');
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra testYDatatable_AutoCol: function() {
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra var sel = "#scrolling-colwidth";
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra this.dt = new Y.DataTable.Base({columnset:this.cols2, recordset:this.data, tdValueTemplate:"plug then render {value}", caption:"ScrollingDataTable"});
76c9fe1d50dff2736aa35ed3e81acaf8cdf48588Tilo Mitra this.dt.plug(Y.Plugin.DataTableScroll, {height:"250px"});
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra var msg = Y.Profiler.getAverage('dtY2') + 'ms taken to display';
31dc38d003f727e19c61510100f8418658af15d5Tilo Mitra var report = Y.Profiler.getFullReport(this.reportParser);
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra Y.log(msg, 'time');
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra Y.one(sel).appendChild('<p class="message">'+msg+'</p>');
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra testXYDatatable_BigHeaders: function() {
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra var sel = "#scrolling-bigcols";
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra this.dt = new Y.DataTable.Base({columnset:this.cols3, recordset:this.data, tdValueTemplate:"plug then render {value}", caption:"ScrollingDataTable"});
76c9fe1d50dff2736aa35ed3e81acaf8cdf48588Tilo Mitra this.dt.plug(Y.Plugin.DataTableScroll, {height:"250px", width:"400px"});
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra var msg = Y.Profiler.getAverage('dtHeaders') + 'ms taken to display';
31dc38d003f727e19c61510100f8418658af15d5Tilo Mitra var report = Y.Profiler.getFullReport(this.reportParser);
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra Y.log(msg, 'time');
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra Y.one(sel).appendChild('<p class="message">'+msg+'</p>');
76c9fe1d50dff2736aa35ed3e81acaf8cdf48588Tilo Mitra testNoScrollDatatable: function() {
76c9fe1d50dff2736aa35ed3e81acaf8cdf48588Tilo Mitra var sel = "#scrolling-noscroll";
76c9fe1d50dff2736aa35ed3e81acaf8cdf48588Tilo Mitra this.dt = new Y.DataTable.Base({columnset:this.cols3, recordset:this.data, tdValueTemplate:"plug then render {value}", caption:"ScrollingDataTable"});
76c9fe1d50dff2736aa35ed3e81acaf8cdf48588Tilo Mitra var msg = Y.Profiler.getAverage('dtNoScroll') + 'ms taken to display';
76c9fe1d50dff2736aa35ed3e81acaf8cdf48588Tilo Mitra var report = Y.Profiler.getFullReport(this.reportParser);
76c9fe1d50dff2736aa35ed3e81acaf8cdf48588Tilo Mitra Y.log(msg, 'time');
76c9fe1d50dff2736aa35ed3e81acaf8cdf48588Tilo Mitra Y.one(sel).appendChild('<p class="message">'+msg+'</p>');
76c9fe1d50dff2736aa35ed3e81acaf8cdf48588Tilo Mitra this.dt.scroll.set('width', '200px');
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra var suite = new Y.Test.Suite({name:"Datatable Test Suite"});
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra Y.Test.Runner.setName("Datatable Test Runner");