added a new call back after_render_record, updated examples and readme

README.md

@@ -117,6 +117,12 @@ Define callback in settings. Callbacks executes after each filtering events.(In
         after_add: function(data){
           //Call after adding data to filter.
         },
+        after_render_record: function(record) {
+          //Call after each record is rendered
+          if(record.amount > 500) {
+            $('#fjs_'+record.id+' .fs_price').addClass('red'); 
+          }
+        }
     };
 
 

examples/assets/css/stream.css

@@ -241,4 +241,3 @@ select:focus, textarea:focus, input:focus{
 .criteria select{
   margin-left: 10px;
 }
-

examples/assets/css/style.css

@@ -162,3 +162,39 @@ h1, h2, h3, h4, h5, h6, p, ol, ul {
 h2{
   text-align: center;
 }
+
+.fs_price.black{
+  color: black;
+}
+.fs_price.green{
+  color: green;
+}
+.fs_price.blue{
+  color: blue;
+}
+.fs_price.red{
+  color: red;
+}
+.price_status{
+  font-size: 90%;
+  font-weight: normal;
+  margin-right: 5px;
+  padding: 1px 0 3px;
+  margin-top: 2px;
+  width: 19px !important;
+  height: 12px;
+  text-decoration: none;
+  float: right;
+}
+.price_status.black{  
+  background-color: black;
+}
+.price_status.blue{  
+  background-color: blue;
+}
+.price_status.green{  
+  background-color: green;
+}
+.price_status.red{  
+  background-color: red;
+}

examples/filterjs.html

@@ -214,29 +214,34 @@ <h3>Filter by Price</h3>
                     <span style="display: inline;">All</span>
                   </li>
                   <li>
-                    <input checked="checked" value="0-50" 
+                    <input checked="checked" value="0-49" 
 type="checkbox">
-                    &nbsp;&nbsp;&lt;&nbsp; $50
+                    &nbsp;&nbsp;&lt;&nbsp; $49
+                    <span class='price_status black' style="display: inline;"></span>
                   </li>
                   <li>
                     <input checked="checked" value="50-100" 
 type="checkbox">
                     &nbsp;&nbsp;$50 to $100
+                    <span class='price_status blue' style="display: inline;"></span>
                   </li>
                   <li>
-                    <input checked="checked" value="100-200" 
+                    <input checked="checked" value="100-199" 
 type="checkbox">
-                    &nbsp;&nbsp;$100 to $200
+                    &nbsp;&nbsp;$100 to $199
+                    <span class='price_status blue' style="display: inline;"></span>
                   </li>
                   <li>
-                    <input checked="checked" value="200-500" 
+                    <input checked="checked" value="200-499" 
 type="checkbox">
-                    &nbsp;&nbsp;$200 to $500
+                    &nbsp;&nbsp;$200 to $499
+                    <span class='price_status green' style="display: inline;"></span>
                   </li>
                   <li>
                     <input checked="checked" value="500-above" 
 type="checkbox">
                     &nbsp;&nbsp;$500 and above
+                    <span class='price_status red' style="display: inline;"></span>
                   </li>
                 </ul>
               </div>

examples/filterjs.js

@@ -93,7 +93,21 @@ function filterInit(template_type){
       $('.result_count').text('Found : ' + result.length);
       $('a[data-fjs]').tsort('.fs_head:visible', {order: 'asc'});
       //console.log(result);
-    }
+    },
+    after_render_record: function(record) {
+      if(record.amount < 50) {  
+        $('#fjs_'+record.id+' .fs_price').addClass('black'); 
+      }
+      if(record.amount >= 50 && record.amount < 200) {  
+        $('#fjs_'+record.id+' .fs_price').addClass('blue'); 
+      }
+      if(record.amount >= 200 && record.amount < 500) {  
+        $('#fjs_'+record.id+' .fs_price').addClass('green'); 
+      }
+      if(record.amount >= 500) {  
+        $('#fjs_'+record.id+' .fs_price').addClass('red'); 
+      }
+    }// after_render_record ends here
 
   };
 

examples/simple_filter.js

@@ -34,6 +34,7 @@ function filterInit() {
     },
     search: {input: '#search_box' },
     and_filter_on: true,
+    callbacks: {}, // define call backs here, if needed
     id_field: 'id' //Default is id. This is only for usecase
   };
 

filter.js

@@ -92,6 +92,9 @@
         el = $(this.view(record));
         el.attr({id: this.root + '_' + record[this.id_field], 'data-fjs': true});
         el = $container.append(el);
+
+        // Perform operations needed after rendering each record
+        this.execCallBack('after_render_record', record);
       }
     },