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.
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:
|