Skip to content

Multiple tables on same page #7

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 5 commits into
base: master
Choose a base branch
from
Open

Multiple tables on same page #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
fdf0cb4
Multiple StreamTables on one page
HSystem Apr 13, 2014
f6dfe0a
removed unused variables / console.log
HSystem Apr 13, 2014
1335314
Fixed small bug in progress indicator
HSystem Apr 13, 2014
073fbb2
slight tuning in jQuery selectors
HSystem Apr 13, 2014
7813bc9
fixed bug when search_box param not provided
HSystem Apr 13, 2014
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
147 changes: 147 additions & 0 deletions examples/multiple.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,147 @@
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
<link href="assets/css/bootstrap.min.css" media="screen" rel="stylesheet" type="text/css" />
<link href="assets/css/style.css" media="screen" rel="stylesheet" type="text/css" />
<script src="assets/js/jquery.min.js" type="text/javascript"></script>
<script src="../vendors/mustache.js" type="text/javascript"></script>
<script src="../stream_table.js" type="text/javascript"></script>
<script src="movie_data.js" type="text/javascript"></script>

<script type="text/javascript">

function initializeStreamTable(elementId) {
var streamTableStr = "streamtable";

var streamTableContainerId = $("#"+elementId).attr("id");
var streamTableStSearchId = $("#"+elementId).attr("id")+"_"+streamTableStr+"_st_search";
var paginationContainerId = "#"+$("#"+elementId).attr("id")+"_paginationcontainer";
var streamTableId = streamTableContainerId+"_"+streamTableStr;
var summaryId = streamTableId+"_summary";
var foundId = streamTableId+"_found";
var recordCountId = streamTableId+"_record_count";
var data = Movies[1], html = $.trim($("#template").html()), template = Mustache.compile(html);
var view = function(record, index){
return template({record: record, index: index});
};
var $summary = $( ("#"+summaryId) );
var $found = $( ("#"+foundId) );
var $record_count = $( ("#"+recordCountId) );
$( ("#"+foundId) ).hide();

var callbacks = {
pagination: function(summary){
if ($.trim($(("#"+streamTableStSearchId)).val()).length > 0){
$found.text('Found : '+ summary.total).show();
}else{
$found.hide();
}
$summary.text( summary.from + ' to '+ summary.to +' of '+ summary.total +' entries');
},
after_add: function(){
var percent = this.data.length*100/2000;
$record_count.text(percent + '%').attr('style', 'width:' + percent + '%');
//Only for example: Stop ajax streaming beacause from localfile data size never going to empty.
if (this.data.length == 2000){
this.stopStreaming();
$( ('#'+streamTableContainerId+' .example .progress') ).removeClass('active').hide();
}

}
}

st = StreamTable( ("#"+streamTableId),
{ view: view,
per_page: 10,
data_url: 'data/movies.json',
stream_after: 0.5,
fetch_data_limit: 100,
search_box: streamTableStSearchId,
callbacks: callbacks,
pagination: {container: paginationContainerId, span: 5, next_text: 'Next &rarr;', prev_text: '&larr; Previous' }
},
data);
}

</script>

</head>
<body>
<script id="template" type="text/html">
<tr>
<td>{{index}}</td>
<td>{{record.name}}</td>
<td>{{record.director}}</td>
<td>{{record.actor}}</td>
<td>{{record.rating}}</td>
<td>{{record.year}}</td>
</tr>
</script>

<div class="title">
<h1><!--<span class="glyphicon glyphicon-filter"> --></span>StreamTable.js</h1>
<p class='lead'> Multiple Tables</p>
</div>

<div id="streamTable_container1" class="streamtable_container">
<div class='example'>
<div class="title" onclick="initializeStreamTable('streamTable_container1');">
<br>
<p class='lead'> Table 1 - Click here to init</p>
</div>
<div class="progress progress-striped active">
<div id="streamTable_container1_streamtable_record_count" class="progress-bar progress-bar-success" style="width: 0%">0</div>
</div>
<span id="streamTable_container1_streamtable_found" class="label label-info"></span>
<input id="streamTable_container1_streamtable_st_search" class="st-search" type="text" name="search" placeholder="Search here..."></input>
<table id="streamTable_container1_streamtable" class='table table-striped table-bordered'>
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Director</th>
<th>Actor</th>
<th>Rating</th>
<th>Year</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div id="streamTable_container1_paginationcontainer"></div>
<div id="streamTable_container1_summary"></div>
</div>
</div>

<div id="streamTable_container2" class="streamtable_container">
<div class='example'>
<div class="title" onclick="initializeStreamTable('streamTable_container2');">
<br>
<p class='lead'> Table 2 - Click here to init</p>
</div>
<div class="progress progress-striped active">
<div id="streamTable_container2_streamtable_record_count" class="progress-bar progress-bar-success" style="width: 0%">0</div>
</div>
<span id="streamTable_container2_streamtable_found" class="label label-info"></span>
<input id="streamTable_container2_streamtable_st_search" class="st-search" type="text" name="search" placeholder="Search here..."></input>
<table id="streamTable_container2_streamtable" class='table table-striped table-bordered'>
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Director</th>
<th>Actor</th>
<th>Rating</th>
<th>Year</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div id="streamTable_container2_paginationcontainer"></div>
<div id="streamTable_container2_summary"></div>
</div>
</div>

</body>
</html>
10 changes: 5 additions & 5 deletions stream_table.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,12 +112,12 @@
$(this.main_container).after(html);
}

this.$pagination = $('.' + p_classes.join('.'));
this.$pagination = $( (this.paging_opts.container+' .' + p_classes.join('.') ) );
};

_F.bindEvents = function(){
var _self = this,
search_box = this.opts.search_box;
search_box = '#'+this.opts.search_box;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not the maintainer on this, but as a user, I'd much rather be able to provide any jQuery selector and not be constrained to an ID.


$(search_box).on('keyup', function(e){
_self.search($(this).val());
Expand Down Expand Up @@ -145,8 +145,8 @@

current_page = _self.paginate(page);
if (current_page >= 0) {
$('.st_pagination .active').removeClass('active');
$('.st_pagination li[data-page='+ current_page +']').addClass('active');
$((_self.paging_opts.container+' .st_pagination .active')).removeClass('active');
$((_self.paging_opts.container+' .st_pagination li[data-page='+ current_page +']')).addClass('active');
}

return false;
Expand All @@ -157,7 +157,7 @@
_F.addSearchBox = function(){
if (this.opts.search_box) return;
$(this.main_container).before('<input name="search" type="text" id="st_search" class="st_search" placeholder="Search here...">');
this.opts.search_box = '#st_search';
this.opts.search_box = 'st_search';
};

_F._makeTextFunc = function(record){
Expand Down