Skip to content

Drastically faster templating approach #317

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 13 commits into
base: master
Choose a base branch
from
Open

Drastically faster templating approach #317

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
fe3f95e
Update internal.js
zspitzer Oct 12, 2015
1225b4a
Add an event columnToggle
zspitzer Oct 30, 2015
2d26fea
Drastically faster templating approach
zspitzer Sep 15, 2016
d33185d
Update extensions.js
zspitzer Sep 15, 2016
8d11d27
lint clean up
zspitzer Sep 15, 2016
f7cfe39
move label infos templated string into templates
zspitzer Dec 9, 2016
0c66fe2
added more append options + timing
zspitzer Dec 10, 2016
e96981a
avoid null result
zspitzer Dec 10, 2016
52e55ad
test to compare final results
zspitzer Dec 10, 2016
cef18bc
refactor out prototypes
zspitzer Dec 10, 2016
10197d2
Revert "refactor out prototypes"
zspitzer Dec 10, 2016
94e1e5b
refactor out base prototypes
zspitzer Dec 10, 2016
f9ee37f
remove appendRow
zspitzer Dec 10, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 50 additions & 18 deletions demo/index.htm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,6 @@
</div>
</div>
<div class="col-md-9">
<button id="append" type="button" class="btn btn-default">Append</button>
<button id="clear" type="button" class="btn btn-default">Clear</button>
<button id="removeSelected" type="button" class="btn btn-default">Remove Selected</button>
<button id="destroy" type="button" class="btn btn-default">Destroy</button>
Expand All @@ -61,12 +60,20 @@
<button id="getSearchPhrase" type="button" class="btn btn-default">Search Phrase</button>
<button id="getSortDictionary" type="button" class="btn btn-default">Sort Dictionary</button>
<button id="getSelectedRows" type="button" class="btn btn-default">Selected Rows</button>

<div>
<button type="button" class="btn btn-default append" data-rows="10">Append 10</button>
<button type="button" class="btn btn-default append" data-rows="100">Append 100</button>
<button type="button" class="btn btn-default append" data-rows="1000">Append 1000</button>
<span class="loading"/>
</div>

<!--div class="table-responsive"-->
<table id="grid" class="table table-condensed table-hover table-striped" data-selection="true" data-multi-select="true" data-row-select="true" data-keep-selection="true">
<thead>
<tr>
<th data-column-id="id" data-identifier="true" data-type="numeric" data-align="right" data-width="40">ID</th>
<th data-column-id="sender" data-order="asc" data-align="center" data-header-align="center" data-width="75%">Sender</th>
<th data-column-id="id" data-identifier="true" data-type="numeric" data-align="right" data-width="100">ID</th>
<th data-column-id="sender" data-order="asc" data-align="center" data-header-align="center" data-width="35%">Sender</th>
<th data-column-id="received" data-css-class="cell" data-header-css-class="column" data-filterable="true">Received</th>
<th data-column-id="link" data-formatter="link" data-sortable="false" data-width="75px">Link</th>
<th data-column-id="status" data-type="numeric" data-visible="false">Status</th>
Expand Down Expand Up @@ -193,22 +200,47 @@
});
}

var timerKey = 'initRender';
var timerStart = null;
$("#grid").on("loaded.rs.jquery.bootgrid", function (e){
if (timerKey)
console.timeEnd(timerKey);
if (timerStart)
$(".loading").text("rendered time: " + (new Date().getTime() - timerStart) + "ms");
timerKey = null;
timerStart = null;
});

function startTimer(key){
$(".loading").html(timerKey + "<b>loading...</b>");
console.time(timerKey);
timerStart = new Date();
}

startTimer(timerKey);
init();

$("#append").on("click", function ()
appendCounter = 100;

$(".append").on("click", function (e)
{
$("#grid").bootgrid("append", [{
id: 0,
sender: "[email protected]",
received: "Gestern",
link: ""
},
{
id: 12,
sender: "[email protected]",
received: "Heute",
link: ""
}]);
var data = [];
var rows = $(e.target).data('rows');
for (var i=0; i < rows; i++)
{
var row = {
id: i+appendCounter,
sender: "[email protected]",
received: new Date(new Date().getTime()+(i*24*60*60*1000)).toString(),
link: "link",
status: "status" + i,
hidden: (i % 2 === 0) ? "yes" : "no"
};
data.push(row);
}
appendCounter = appendCounter + rows;
timerKey = "[appendData: " + rows + " rows] ";
startTimer(timerKey);
$("#grid").bootgrid("append", data);
});

$("#clear").on("click", function ()
Expand Down Expand Up @@ -275,4 +307,4 @@
});
</script>
</body>
</html>
</html>
Loading