DQT.JSPaging

(c) 2006 Do Quang Tu (do_quang_tu#excite.com). All rights reserved.
Download Documentation SourceForge Summary

DQT.JSPaging is a advanced javascript paging system based on DHTML for IE6. It give you ability browsing between pages without refreshing/reloading. You can highly customize the interface with template snippets & variables. Making paging clones, choosing between dropdown or HTML interface, selecting "Jumping" or "Sliding" mode, attaching callback functions. DQT.JSPaging aims to ease development of dynamic web applications, especial for AJAX ones.

DQT.JSPaging Features:


Download and Setup


Documentation

Notice that the variable name & value are case-sensitive.

Include DQT.JSPaging in your HTML code

<script src="dqtjspaging_source.js"></script> OR <script src="dqtjspaging_compressed.js"></script>

Create DIVs for DQT.JSPaging generates pagination & its clones

<body>
...
<div id="pagingdiv_1"></div>
...
<div id="pagingdiv_2"></div>
...
</body>

Create DQT.JSPaging OBJECT

var Page_Obj = new DQTAppPaging();

Create DQT.JSPaging Configuration Array

var cfg = new Array();
cfg['idhtml'] = 'pagingdiv_1,pagingdiv_2';
cfg['mode'] = 'sliding'; // sliding or jumping . For more information, read at PEAR_PAGER manual.
cfg['l'] = new Array(true,true,true,true);

In `l (lowercase of L)` array, the 1st element stands for "FIRST" field. Set it to true/false to show/hide the field.
the 2nd element stands for "BACK" field.
the 3rt element stands for "NEXT" field.
the 4th element stands for "LAST" field.

cfg['lclass'] = new Array("navfield");

The CSS className for "First", "Back", "Next", "Last" fields

cfg['array'] = 7;

// Number of page numbers to display. It must be a odd number. If you provide a even number, DQT.JSPaging will automatically convert it to odd number.

cfg['fclass'] = 'fieldclass';
cfg['fclass_selected'] = 'fieldclass_selected';

// Name of CSS class used for number link (or OPTION in `DROPDOWN` mode) styling.
// Name of CSS class used for selected number link (or selected OPTION in `DROPDOWN` mode) styling.

cfg['ui'] = 'dropdown'; // dropdown or html mode
cfg['dropdownclass'] = 'select_tag_css'; //
Name of CSS class used for SELECT tag (Only used for DROPDOWN mode).
cfg['event_onpagingfield_click'] = 'clickme'; // Callback function is called when a number link / option is clicked (or selected). It's marked as a selected page.
cfg['event_onpagingfield_release'] = 'clickoff'; // Callback function is called when a number link / option is 'released'. It's marked as a unselected page.

// Two above callback functions will send you 2 parameters: HTML Object and Page Number that caused the event.
function clickme(object, page) {
     // an callback function example
}


cfg['callback'] = 'browsepage';

// Callback function is called when a number link / option is clicked (or selected). It's marked as a selected page. You'll use this callback to redirect page/request data. It will send you 2 parameters: Pagination Parameters Array and Registered Vars.
For more info about Pagination Parameters Array, please look at HTML TEMPLATE VARS.

function browsepage(page, vars) {
    // an callback function example
    // vars as ARRAY type
    // page as NUMBER type
   document.location.href = "browse.php?pageno=" + page["now_page"] + "&categoryid=" + vars["cat_id"];
}

cfg['obj'] = 'Page_Obj'; // Object Var of the Class. In this example, it's "Page_Obj"

Finally:

Page_Obj.factory(cfg); // config var
Page_Obj.regtpl('next_img', 'http://localhost/dana_%onoff%.gif');
Page_Obj.regtpl('next_text', '<img src="http://localhost/jsjs/nav_next.gif">');
Page_Obj.regtpl('back_text', '<input name="Back" type="button" value="Back">');
Page_Obj.regtpl('last_text', '<input name="Last" type="button" value="Last">');
Page_Obj.regtpl('first_text', 'First');
Page_Obj.regtpl('spacertpl', '|');
Page_Obj.regtpl('xpage', '<img src="http://localhost/jsjs/nav_page.gif"><br>%xpage%');
Page_Obj.reg_autoupdate_field('kiss.innerText', 'now_page', 0);
Page_Obj.reg_autoupdate_field('lang.innerText', 'total_records', 0);
Page_Obj.make(); // Only call for the first time.
Page_Obj.gotopage(1, 760, 20,true);

// Function gotopage(current_page, total_records, records_per_page, nogoto)
When you call function GOTOPAGE() for the very first time, you MUST SET THE 4TH PARAMETER TO TRUE.
In later uses, you don't need set 4th parameter.
If total_records and records_per_page changed from server-side, you could set the 2nd & 3rd params for DQT.JSPaging works exactly.Or you could pass them by. (DQT.JSPaging will use total_records, records_per_page vars you set when you call the function for the first time)
 

Page_Obj.show(); // Only call for the first time.

Using reg_autoupdate_field(html_field_div, tplvar, strtype)
PARAM strtype = 0 when PARAM html_field_div is like this: "textboxID.value" OR "window.frames[1].document.hiddenfield.value".
PARAM strtype = 1 when PARAM html_field_div is A CALLBACK FUNCTION, like this: "callerfunc" OR "window.alert".
For more info about tplvar, please look at HTML TEMPLATE VARS.

Using regvar(varname, varvalue)
Example:
  • regvar("catid",675);
  • regvar("htmlobject", oDiv.parentNode);
  • regvar("name", "Peter Jackson");
  • regvar("arr", new Array(1,2,3,4,5,6) );

HTML TEMPLATE VARS

  1 2 3 4 5  
GLOBAL TPL VARS

Changable
By RegTpl()

Can embed into
another TPLVARS?

Sent with
CALLBACK?

Can use
with
reg_autoupdate_field

Format  
             
%next_text% x       HTML/Text  
%back_text% x       HTML/Text  
%first_text% x       HTML/Text  
%last_text% x       HTML/Text  
%next_num_recs%   x x x    
%back_num_recs%   x x x    
%next_img% x       Image URL Use tplvar
%onoff%
in URL if you wanna use rollover images.
%back_img% x       Image URL
%now_page%   x x x    
%total_pages%   x x x    
%begin_recordnum%   x x x    
%end_recordnum%   x x x    
%total_records%   x x x    
%next_page_no%   x x x    
%back_page_no%   x x x    
%last_page_no%   x x x    
%first_page_no%   x x x    
%records_per_page%   x x x    
%spacertpl% x       HTML/Text  
TPL VARS for PAGING FIELDS            
%xpage% x       HTML/Text  
%xpage_no%   x x      
%xpage_begin_recordnum%   x        
%xpage_end_recordnum%   x        

Notice:

  • (x) means YES

  • GLOBAL TPL VARS can't embed TPL VARS for PAGING FIELDS
  • TPL VARS for PAGING FIELDS can embed GLOBAL TPL VARS (follow the rules in column #2 )
Example:
 
  • .regtpl('next_img', 'http://localhost/button_%onoff%.gif');
  • .regtpl('next_text', '%next_img%<br>Go Next!');]
  • .regtpl('last_text', '<input name="Last" type="button" value="Last">');
  • .regtpl('spacertpl', '|');
  • .regtpl('xpage', '<img src="http://localhost/jsjs/nav_page.gif"><br>%xpage_no%-%xpage_begin_recordnum%');

DEMO: