Updated 1.04 Paging (markdown)

1.04-Paging.md

@@ -11,33 +11,55 @@
   <tbody>
     <tr> 
       <th>paging</th>
-      <td>boolean</td>
+      <td>boolean|object</td>
       <td>if set true, it will generate a paging feature</td>
       <td></td>
-      <td><code>var tfConfig = { paging: true }</code></td>
+      <td>
+         <pre>
+var tfConfig = { paging: true };
+// or
+var tfConfig = { 
+  paging: {} 
+};
+        </pre>
+      </td>
     </tr>
     <tr> 
-      <th>paging_length</th>
+      <th>length</th>
       <td>number</td>
-      <td>sets # of rows displayed in a page (default - 10) </td>
+      <td>defines the number of results displayed in a page (default - 10) </td>
       <td></td>
-      <td><code>var tfConfig = { paging_length: 50 }</code></td>
+      <td>
+         <pre>
+var tfConfig = { 
+  paging: {
+    length: 50
+  } 
+};
+        </pre>
+      </td>
     </tr>
     <tr> 
-      <th>paging_target_id</th>
+      <th>target_id</th>
       <td>string</td>
       <td>defines the id of the element that will contain the paging elements 
         (pages drop-down and navigation buttons) (default - null)</td>
       <td></td>
-      <td><code>var tfConfig = { paging: true, paging_target_id: 'myContainerId' 
-        };</code></td>
+      <td>
+         <pre>
+var tfConfig = { 
+  paging: {
+    target_id: 'myContainerId'
+  } 
+};
+        </pre>
+      </td>
     </tr>
     <tr> 
       <th>results_per_page</th>
       <td>array</td>
       <td>this property enables users to change the number of results 
-        per page. Paging property needs to be set true. It accepts an 
-        array with the following values: 
+        per page. It accepts an array with the following values: 
         <ul>
           <li>a string containing the results per page label ('Results 
             per page') </li>
@@ -46,8 +68,15 @@
         </ul></td>
       <td>the label is a <code>span</code> element, results per page values 
         are contained in a <code>select</code> element</td>
-      <td><code>var tfConfig = { results_per_page: ['Results per page',[25,50,100]] 
-        };</code></td>
+      <td>
+         <pre>
+var tfConfig = { 
+  paging: {
+    results_per_page: ['Results per page', [25, 50, 100]]
+  } 
+};
+        </pre>
+      </td>
     </tr>
     <tr> 
       <th>results_per_page_target_id</th>
@@ -55,16 +84,30 @@
       <td>defines the id of the element that will contain the results 
         per page drop-down element (default - null)</td>
       <td></td>
-      <td><code>var tfConfig = { paging: true, results_per_page_target_id: 
-        'myContainerId' };</code></td>
+      <td>
+         <pre>
+var tfConfig = { 
+  paging: {
+    results_per_page_target_id: 'myContainerId'
+  } 
+};
+        </pre>
+      </td>
     </tr>
     <tr> 
-      <th>paging_btns</th>
+      <th>btns</th>
       <td>boolean</td>
-      <td>enables / disables paging buttons if <strong>paging</strong> 
-        property set true (default - true)</td>
+      <td>enables / disables paging buttons (default - true)</td>
       <td></td>
-      <td><code>var tfConfig = { paging: true, paging_btns: false };</code></td>
+      <td>
+         <pre>
+var tfConfig = { 
+  paging: {
+    btns: false
+  } 
+};
+        </pre>
+      </td>
     </tr>
     <tr> 
       <th>page_selector_type</th>
@@ -72,141 +115,248 @@
       <td>defines the page selector element: drop-down or text-box. 2 
         possible values: 'select' or 'input'</td>
       <td></td>
-      <td><code>var tfConfig = { paging: true, page_selector_type: 'input' 
-        };</code></td>
+      <td>
+         <pre>
+var tfConfig = { 
+  paging: {
+    page_selector_type: 'input'
+  } 
+};
+        </pre>
+      </td>
     </tr>
     <tr> 
       <th>btn_next_page_text</th>
       <td>string</td>
-      <td>sets 'next page' button's label if <strong>paging</strong> property 
-        set true (default - &quot;&gt;&quot;)</td>
+      <td>sets 'next page' button's label (default - &quot;&gt;&quot;)</td>
       <td></td>
-      <td><code>var tfConfig = { paging: true, btn_next_page_text: 'Next 
-        >' };</code></td>
+      <td>
+         <pre>
+var tfConfig = { 
+  paging: {
+    btn_next_page_text: 'Next >'
+  } 
+};
+        </pre>
+      </td>
     </tr>
     <tr> 
       <th>btn_prev_page_text</th>
       <td>string</td>
-      <td>sets 'previous page' button's label if <strong>paging</strong> 
-        property set true (default - &quot;&lt;&quot;)</td>
+      <td>sets 'previous page' button's label (default - &quot;&lt;&quot;)</td>
       <td></td>
-      <td><code>var tfConfig = { paging: true, btn_prev_page_text: '&lt; 
-        Prev' };</code></td>
+      <td>
+         <pre>
+var tfConfig = { 
+  paging: {
+    btn_prev_page_text: '< Previous'
+  } 
+};
+        </pre>
+      </td>
     </tr>
     <tr> 
       <th>btn_last_page_text</th>
       <td>string</td>
-      <td>sets 'last page' button's label if <strong>paging</strong> property 
-        set true (default - &quot;&gt;|&quot;)</td>
+      <td>sets 'last page' button's label (default - &quot;&gt;|&quot;)</td>
       <td></td>
-      <td><code>var tfConfig = { paging: true, btn_last_page_text: 'Last 
-        >>' };</code></td>
+      <td>
+         <pre>
+var tfConfig = { 
+  paging: {
+    btn_last_page_text: 'Last >>'
+  } 
+};
+        </pre>
+      </td>
     </tr>
     <tr> 
       <th>btn_first_page_text</th>
       <td>string</td>
-      <td>sets 'first page' button's label if <strong>paging</strong> 
-        property set true (default - &quot;|&lt;&quot;)</td>
+      <td>sets 'first page' button's label (default - &quot;|&lt;&quot;)</td>
       <td></td>
-      <td><code>var tfConfig = { paging: true, btn_first_page_text: '&lt;| 
-        First' };</code></td>
+      <td>
+         <pre>
+var tfConfig = { 
+  paging: {
+    btn_first_page_text: '<< First'
+  } 
+};
+        </pre>
+      </td>
     </tr>
     <tr> 
       <th>btn_next_page_html</th>
       <td>string</td>
-      <td>defines 'next page' button's HTML if <strong>paging</strong> 
-        property set true (default - null)</td>
+      <td>defines 'next page' button's HTML (default - null)</td>
       <td>note that the <code>onclick</code> event is added automatically 
         to the html element and overwrites any eventual <code>onclick</code> 
         attribute </td>
-      <td><code>var tfConfig = { paging: true, btn_next_page_html: '&lt;a 
-        href=&quot;javascript:;&quot;&gt;Next &gt;&lt;/a&gt;' };</code></td>
+      <td>
+         <pre>
+var tfConfig = { 
+  paging: {
+    btn_next_page_html: '<a href="javascript:void(0);">Next ></a>'
+  } 
+};
+        </pre>
+      </td>
     </tr>
     <tr> 
       <th>btn_prev_page_html</th>
       <td>string</td>
-      <td>defines 'next page' button's HTML if <strong>paging</strong> 
-        property set true (default - null)</td>
+      <td>defines 'next page' button's HTML (default - null)</td>
       <td>note that the <code>onclick</code> event is added automatically 
         to the html element and overwrites any eventual <code>onclick</code> 
         attribute </td>
-      <td><code>var tfConfig = { paging: true, btn_prev_page_html: '&lt;a 
-        href=&quot;javascript:;&quot;&gt;&lt; Previous&lt;/a&gt;' };</code></td>
+      <td>
+         <pre>
+var tfConfig = { 
+  paging: {
+    btn_prev_page_html: '<a href="javascript:void(0);">< Previous</a>'
+  } 
+};
+        </pre>
+      </td>
     </tr>
     <tr> 
       <th>btn_last_page_html</th>
       <td>string</td>
-      <td>defines 'next page' button's HTML if <strong>paging</strong> 
-        property set true (default - null)</td>
+      <td>defines 'next page' button's HTML (default - null)</td>
       <td>note that the <code>onclick</code> event is added automatically 
         to the html element and overwrites any eventual <code>onclick</code> 
         attribute </td>
-      <td><code>var tfConfig = { paging: true, btn_last_page_html: '&lt;a 
-        href=&quot;javascript:;&quot;&gt;&lt; Last &gt;|&lt;/a&gt;' };</code></td>
+      <td>
+         <pre>
+var tfConfig = { 
+  paging: {
+    btn_last_page_html: '<a href="javascript:void(0);">Last >></a>'
+  } 
+};
+        </pre>
+      </td>
     </tr>
     <tr> 
       <th>btn_first_page_html</th>
       <td>string</td>
-      <td>defines 'next page' button's HTML if <strong>paging</strong> 
-        property set true (default - null)</td>
+      <td>defines 'next page' button's HTML (default - null)</td>
       <td>note that the <code>onclick</code> event is added automatically 
         to the html element and overwrites any eventual <code>onclick</code> 
         attribute </td>
-      <td><code>var tfConfig = { paging: true, btn_first_page_html: '&lt;a 
-        href=&quot;javascript:;&quot;&gt;&lt;| First&lt;/a&gt;' };</code></td>
+      <td>
+         <pre>
+var tfConfig = { 
+  paging: {
+    btn_first_page_html: '<a href="javascript:void(0);">First >></a>'
+  } 
+};
+        </pre>
+      </td>
     </tr>
     <tr> 
       <th>page_text</th>
       <td>string</td>
-      <td>defines the text preceeding the page selector drop-down (default - ' Page ')</td>
+      <td>defines the text preceding the page selector drop-down (default - ' Page ')</td>
       <td></td>
-      <td><code>var tfConfig = { paging: true, page_text: 'Pg' };</code></td>
+      <td>
+         <pre>
+var tfConfig = { 
+  paging: {
+    page_text: 'Pg'
+  } 
+};
+        </pre>
+      </td>
     </tr>
     <tr> 
       <th>of_text</th>
       <td>string</td>
       <td>defines the text after page selector drop-down (default - ' of ')</td>
       <td></td>
-      <td><code>var tfConfig = { paging: true, of_text: ' / ' };</code></td>
+      <td>
+         <pre>
+var tfConfig = { 
+  paging: {
+    of_text: ' / '
+  } 
+};
+        </pre>
+      </td>
     </tr>
     <tr> 
-      <th>paging_slc_css_class</th>
+      <th>slc_css_class</th>
       <td>string</td>
       <td>defines the css class for paging drop-down (default - 'pgSlc')</td>
       <td></td>
-      <td><code>var tfConfig = { paging_slc_css_class: 'myClass' }</code></td>
+      <td>
+         <pre>
+var tfConfig = { 
+  paging: {
+    slc_css_class: 'myCssClass'
+  } 
+};
+        </pre>
+      </td>
     </tr>
     <tr> 
       <th>results_slc_css_class</th>
       <td>string</td>
-      <td>defines the css class of the results per page drop-down (default 
-        + 'rspg')</td>
+      <td>defines the css class of the results per page drop-down (default - 'rspg')</td>
       <td></td>
-      <td><code>var tfConfig = { results_slc_css_class: 'myClass' }</code></td>
+      <td>
+         <pre>
+var tfConfig = { 
+  paging: {
+    results_slc_css_class: 'myCssClass'
+  } 
+};
+        </pre>
+      </td>
     </tr>
     <tr> 
       <th>results_span_css_class</th>
       <td>string</td>
-      <td>defines the css class for the label preceding the results per 
-        page select (default - 'rspgSpan')</td>
+      <td>defines the css class for the label preceding the results per page select (default - 'rspgSpan')</td>
       <td></td>
-      <td><code>var tfConfig = { results_span_css_class: 'myClass' }</code></td>
+      <td>
+         <pre>
+var tfConfig = { 
+  paging: {
+    results_span_css_class: 'myCssClass'
+  } 
+};
+        </pre>
+      </td>
     </tr>
     <tr> 
-      <th>paging_btn_css_class</th>
+      <th>btn_css_class</th>
       <td>string</td>
-      <td>defines the css class for paging buttons (previous,next,etc.) 
-        (default - 'pgInp')</td>
+      <td>defines the css class for paging buttons (previous, next, etc.) (default - 'pgInp')</td>
       <td></td>
-      <td><code>var tfConfig = { paging_btn_css_class: 'myClass' }</code></td>
+      <td>
+         <pre>
+var tfConfig = { 
+  paging: {
+    btn_css_class: 'myCssClass'
+  } 
+};
+        </pre>
+      </td>
     </tr>
     <tr> 
       <th>nb_pages_css_class</th>
       <td>string</td>
-      <td>defines the css class fo css class for the total nb of pages 
-        label (default - 'nbpg')</td>
+      <td>defines the css class fo css class for the total nb of pages label (default - 'nbpg')</td>
       <td></td>
-      <td><code>var tfConfig = { nb_pages_css_class: 'myClass' }</code></td>
+      <td>
+         <pre>
+var tfConfig = { 
+  paging: {
+    nb_pages_css_class: 'myCssClass'
+  } 
+};
+        </pre>
+      </td>
     </tr>
   </tbody>
 </table>
@@ -230,11 +380,21 @@
       <td>
         note that 2 parameters are passed to the callback function:
         <ul>
-            <li>o is the current TableFilter instance</li>
+            <li>tf is the current TableFilter instance</li>
             <li>index of the page that will be displayed</li>
         </ul>
       </td>
-      <td><code>var tfConfig = { on_before_change_page: function(o,i){ alert(o.id+' - page index: '+i); }; }</code></td>
+      <td>
+         <pre>
+var tfConfig = { 
+  paging: {
+    on_before_change_page: function(tf, i) { 
+      console.log(tf.id, 'page index: ' + i);
+    }
+  } 
+};
+        </pre>
+      </td>
     </tr>
     <tr> 
       <th>on_after_change_page</th>
@@ -243,11 +403,21 @@
       <td>
         note that 2 parameters are passed to the callback function:
         <ul>
-            <li>o is the current TableFilter instance</li>
+            <li>tf is the current TableFilter instance</li>
             <li>index of the page that will be displayed</li>
         </ul>
       </td>
-      <td><code>var tfConfig = { on_after_change_page: function(o,i){ alert(o.id+' - page index: '+i); }; }</code></td>
+      <td>
+         <pre>
+var tfConfig = { 
+  paging: {
+    on_after_change_page: function(tf, i) { 
+      console.log(tf.id, 'page index: ' + i);
+    }
+  } 
+};
+        </pre>
+      </td>
     </tr>
   </tbody>
 </table>
@@ -284,7 +454,7 @@ var tf = new TableFilter('my-table-id');
       </td>
       <td>
         <pre>
-	tf.emitter.on(['row-paged'], function(tf, rowIdx, validRowIdx, rowDisplayed){ 
+	tf.emitter.on(['row-paged'], function(tf, rowIdx, validRowIdx, rowDisplayed) { 
 	  console.log(tf, rowIdx, validRowIdx, rowDisplayed);
 	});
         </pre>
@@ -302,7 +472,7 @@ var tf = new TableFilter('my-table-id');
       </td>
       <td>
         <pre>
-	tf.emitter.on(['grouped-by-page'], function(tf, paging){ 
+	tf.emitter.on(['grouped-by-page'], function(tf, paging) { 
 	  console.log(tf, paging);
 	});
         </pre>
@@ -320,7 +490,7 @@ var tf = new TableFilter('my-table-id');
       </td>
       <td>
         <pre>
-	tf.emitter.on(['before-page-change'], function(tf, pageIndex){ 
+	tf.emitter.on(['before-page-change'], function(tf, pageIndex) { 
 	  console.log(tf, pageIndex);
 	});
         </pre>
@@ -338,7 +508,7 @@ var tf = new TableFilter('my-table-id');
       </td>
       <td>
         <pre>
-	tf.emitter.on(['after-page-change'], function(tf, pageIndex){ 
+	tf.emitter.on(['after-page-change'], function(tf, pageIndex) { 
 	  console.log(tf, pageIndex);
 	});
         </pre>
@@ -355,7 +525,7 @@ var tf = new TableFilter('my-table-id');
       </td>
       <td>
         <pre>
-	tf.emitter.on(['before-page-length-change'], function(tf){ 
+	tf.emitter.on(['before-page-length-change'], function(tf) { 
 	  console.log(tf);
 	});
         </pre>
@@ -373,7 +543,7 @@ var tf = new TableFilter('my-table-id');
       </td>
       <td>
         <pre>
-	tf.emitter.on(['after-page-length-change'], function(tf, pageLength){ 
+	tf.emitter.on(['after-page-length-change'], function(tf, pageLength) { 
 	  console.log(tf, pageLength);
 	});
         </pre>
@@ -390,7 +560,7 @@ var tf = new TableFilter('my-table-id');
       </td>
       <td>
         <pre>
-	tf.emitter.on(['before-reset-page'], function(tf){ 
+	tf.emitter.on(['before-reset-page'], function(tf) { 
 	  console.log(tf);
 	});
         </pre>
@@ -408,7 +578,7 @@ var tf = new TableFilter('my-table-id');
       </td>
       <td>
         <pre>
-	tf.emitter.on(['after-reset-page'], function(tf, pageNumber){ 
+	tf.emitter.on(['after-reset-page'], function(tf, pageNumber) { 
 	  console.log(tf, pageNumber);
 	});
         </pre>
@@ -425,7 +595,7 @@ var tf = new TableFilter('my-table-id');
       </td>
       <td>
         <pre>
-	tf.emitter.on(['before-reset-page-length'], function(tf){ 
+	tf.emitter.on(['before-reset-page-length'], function(tf) { 
 	  console.log(tf);
 	});
         </pre>
@@ -443,7 +613,7 @@ var tf = new TableFilter('my-table-id');
       </td>
       <td>
         <pre>
-	tf.emitter.on(['after-reset-page-length'], function(tf, pageLength){ 
+	tf.emitter.on(['after-reset-page-length'], function(tf, pageLength) { 
 	  console.log(tf, pageLength);
 	});
         </pre>