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:

It takes CURRENT PAGE, RECORDS PER PAGE, TOTAL RECORDS variables returned from server-side scripts and generates pagination on-the-fly without refreshing/reloading.
It builds pagination with 2 interface modes & 2 operating modes available: "Jumping" and "Sliding" window style.
Supports "Go to FIRST", "Go to LAST", "NEXT" and "BACK" fields.
Allows complete customization of the output through CSS, HTML Template vars.
Allows attaching callback functions to catch events.
Allows adding Auto-Update fields.
Making clones of a pagination: When you update main pagination, its clones also update automatically.
Simple setup & using.
Especially designed for AJAX applications (It also works with other applications).
Free and Open-Source (Lesser GPL). This means that you can incorporate (and even compile) it into your software applications royalty-free without asking the author's permission but you need include copyright in your release.

Download and Setup

Download from SourceForge
Requirements: Internet Explorer 5.5 or later. Planning to support Firefox, Mozilla & Opera in the forthcoming versions.
Installation: Unpack files into a directory. If you are a end-user, let's use compressed JavaScript file in the package.

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

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:

Google

DQT.JSPaging

HTML TEMPLATE VARS

Notice:

(x) means YES

DEMO: