From fdf0cb4b85b659c713a1ff70b369680a24fc0826 Mon Sep 17 00:00:00 2001 From: HSystem Date: Sun, 13 Apr 2014 16:40:05 +0300 Subject: [PATCH 1/5] Multiple StreamTables on one page An example and corresponding edits to stream_table.js to be able to use multiple StreamTable.js on one page --- examples/multiple.html | 155 +++++++++++++++++++++++++++++++++++++++++ stream_table.js | 8 +-- 2 files changed, 159 insertions(+), 4 deletions(-) create mode 100644 examples/multiple.html diff --git a/examples/multiple.html b/examples/multiple.html new file mode 100644 index 0000000..24a59a9 --- /dev/null +++ b/examples/multiple.html @@ -0,0 +1,155 @@ + + + + + + + + + + + + + + + + +
+

StreamTable.js

+

Multiple Tables

+
+ +
+
+
+

StreamTable.js

+

Table 1 - Click here to init

+
+
+
0
+
+ + + + + + + + + + + + + + + +
#NameDirectorActorRatingYear
+
+
+
+
+ +
+
+
+

StreamTable.js

+

Table 2 - Click here to init

+
+
+
0
+
+ + + + + + + + + + + + + + + +
#NameDirectorActorRatingYear
+
+
+
+
+ + + diff --git a/stream_table.js b/stream_table.js index bc334d5..3d5cdf7 100644 --- a/stream_table.js +++ b/stream_table.js @@ -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; $(search_box).on('keyup', function(e){ _self.search($(this).val()); @@ -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+' .active')).removeClass('active'); + $((_self.paging_opts.container+' li[data-page='+ current_page +']')).addClass('active'); } return false; From f6dfe0afd323d22b781e9aa452803165ad740bd4 Mon Sep 17 00:00:00 2001 From: HSystem Date: Sun, 13 Apr 2014 16:43:58 +0300 Subject: [PATCH 2/5] removed unused variables / console.log --- examples/multiple.html | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/examples/multiple.html b/examples/multiple.html index 24a59a9..d238691 100644 --- a/examples/multiple.html +++ b/examples/multiple.html @@ -13,21 +13,13 @@ function initializeStreamTable(elementId) { var streamTableStr = "streamtable"; - //var templateId = $("#"+elementId).attr("id")+"_"+templateStr+containerStr+"_"+templateStr; var streamTableContainerId = $("#"+elementId).attr("id"); var streamTableStSearchId = $("#"+elementId).attr("id")+"_"+streamTableStr+"_st_search"; - console.log("streamTableStSearchId: "+streamTableStSearchId); - //var paginationContainerClass = $("#"+elementId).attr("id")+"_paginationcontainer"; var paginationContainerId = "#"+$("#"+elementId).attr("id")+"_paginationcontainer"; - //var paginationUlClass = $("#"+elementId).attr("id")+"_"+streamTableStr+"paginationul"; - //var streamTableContainerId = elementId+"_"+streamTableStr+"container"; var streamTableId = streamTableContainerId+"_"+streamTableStr; - console.log("activateStreamTable, elementId: "+elementId+", streamTableId: "+streamTableId+", streamTableContainerId: "+streamTableContainerId); // nitialcontainerAnchorstreamtablecontainer_streamtable var summaryId = streamTableId+"_summary"; var foundId = streamTableId+"_found"; var recordCountId = streamTableId+"_record_count"; - console.log("recordCountId :"+recordCountId); - //console.log("templateId: "+templateId); var data = Movies[1], html = $.trim($("#template").html()), template = Mustache.compile(html); var view = function(record, index){ return template({record: record, index: index}); @@ -94,7 +86,7 @@

StreamTable.js

-

StreamTable.js

+

Table 1 - Click here to init

@@ -124,7 +116,7 @@

StreamTable.js

-

StreamTable.js

+

Table 2 - Click here to init

From 133531405ccca5627d829967930280a935528480 Mon Sep 17 00:00:00 2001 From: HSystem Date: Sun, 13 Apr 2014 16:47:21 +0300 Subject: [PATCH 3/5] Fixed small bug in progress indicator The progress indicator was removed when first one hit 2000. --- examples/multiple.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/multiple.html b/examples/multiple.html index d238691..6e5201d 100644 --- a/examples/multiple.html +++ b/examples/multiple.html @@ -44,7 +44,7 @@ //Only for example: Stop ajax streaming beacause from localfile data size never going to empty. if (this.data.length == 2000){ this.stopStreaming(); - $('.example .progress').removeClass('active').hide(); + $( ('#'+streamTableContainerId+' .example .progress') ).removeClass('active').hide(); } } From 073fbb26409131b312c9e1971823cf950f1fe80e Mon Sep 17 00:00:00 2001 From: HSystem Date: Sun, 13 Apr 2014 16:51:56 +0300 Subject: [PATCH 4/5] slight tuning in jQuery selectors The new selector is slightly more restrictive, in case somebody has .active in container for other purposes. --- stream_table.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/stream_table.js b/stream_table.js index 3d5cdf7..685d2fe 100644 --- a/stream_table.js +++ b/stream_table.js @@ -145,8 +145,8 @@ current_page = _self.paginate(page); if (current_page >= 0) { - $((_self.paging_opts.container+' .active')).removeClass('active'); - $((_self.paging_opts.container+' 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; From 7813bc9ac8f88499e5043383065ecc9a5780052f Mon Sep 17 00:00:00 2001 From: HSystem Date: Sun, 13 Apr 2014 17:17:29 +0300 Subject: [PATCH 5/5] fixed bug when search_box param not provided As my code prepends a '#' to the search_box id later on, this caused issues (double ##) when search_box wasn't provided in initialization parameter as in multiple.html-example. Now fixed. --- stream_table.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/stream_table.js b/stream_table.js index 685d2fe..952e103 100644 --- a/stream_table.js +++ b/stream_table.js @@ -157,7 +157,7 @@ _F.addSearchBox = function(){ if (this.opts.search_box) return; $(this.main_container).before(''); - this.opts.search_box = '#st_search'; + this.opts.search_box = 'st_search'; }; _F._makeTextFunc = function(record){