http://www.cnblogs.com/linzheng/archive/2010/11/07/1871069.html //这里也有个学习例子
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>word-break</title> <link rel="stylesheet" type="text/css" href="css/pagination.css" /> <script type="text/javascript" src="js/jquery-1.4.2.js"></script> <script type="text/javascript" src="js/jquery.pagination.js"></script> <script type="text/javascript" src="js/data.js"></script> <script type="text/javascript"> //window onload event $(function(){ /* members.length 总长度 opt:默认配置属性 */ var optInit = getOptionsFromForm(); $("#Pagination").pagination(members.length, optInit); // Event Handler for for button $("#setoptions").click(function(){ var opt = getOptionsFromForm(); // Re-create pagination content with new parameters $("#Pagination").pagination(members.length, opt); }); }); /** page_index 表示每页索引 jq pagination容器(一个DOM元素) 回调函数 */ function pageselectCallback(page_index, jq){ //后台代码在这里写 // Get number of elements per pagionation page from form var items_per_page =10;// $('#items_per_page').val(); var max_elem = Math.min((page_index+1) * items_per_page, members.length); var newcontent = ''; // Iterate through a selection of the content and build an HTML string for(var i=page_index*items_per_page;i<max_elem;i++) { newcontent += '<dt>' + members[i][0] + '</dt>'; newcontent += '<dd class="state">' + members[i][2] + '</dd>'; newcontent += '<dd class="party">' + members[i][3] + '</dd>'; } // Replace old content with new content $('#search_result').html(newcontent); // Prevent click eventpropagation return false; } function getOptionsFromForm(){ var opt = { items_per_page:10, //每页显示的条目数 num_display_entries:2, //连续分页主体部分显示的分页条目数 current_page:5,//当前选中的页面,默人为0,表示第一页 num_edge_entries:3,//两侧显示的首尾分页的条目数 link_to:"javascript:void(0)",//分页的链接 prev_text:"上一页",//“前一页”分页按钮上显示的文字 next_text:"下一页",//“下一页”分页按钮上显示的文字 ellipse_text:".....",//省略的页数用什么文字表示 prev_show_always:true,//是否显示“前一页”分页按钮,可选参数,默认为true,即显示“前一页”按钮 next_show_always:true,//是否显示“下一页”分页按钮,是否显示“下一页”分页按钮 callback: pageselectCallback }; return opt; } </script> <style type="text/css"> </style> <body> <div id="search_result"></div><br/> <div id="Pagination" class="pagination"></div> </body> </html>