jQuery中实例代码分页实现代码

(1)页面代码：复制代码代码如下：DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' ' http://www .w3。org/TR/HTML 4/松散。DTD ' HTML头元http-equiv=' Content-Type ' Content=' text/HTML；charset=UTF-8 ' title在此插入标题/title link rel='样式表type=' text/CSS ' media=' screen ' href=' js/themes/basic/grid。CSS '/脚本类型=' text/JavaScript ' src=' http : js/jQuery。js /脚本脚本类型=' text/JAVAScript ' src=' http : js/jQuery。jqgrid。js /脚本类型=' text/JavaScript Ready(function(){ Jquery(' # MyTab ')).jqGrid({ datatype: 'json '，//将这里改为使用数据数据url:'DataServlet '，//这是行动的请求地址mtype: '开机自检'，高： 250,宽： 400,列名：['编号','姓名', '电话]，colModel:[ {name:'id '，index:'id '，width:60，sorttype:'int'}，{name:'name '，index:'name '，width:90}，{name:'phone '，index:'phone '，width:100} ]，pager: ' pager '，//分页工具栏imgpaths : ' js/themes/basic/images '，//图片存放路径rowNum:10，//每页显示记录数viewrecords: true，//是否显示行数罗琳：[10,20,30],//可调整每页显示的记录数多选：假，//是否支持多选标题： '信息显示' });});/script/head body table id=' myTab ' class=' roll '单元格填充=' 0 '单元格间距=' 0 '/table div id=' pager ' class=' roll '/div/body/html(2)后台的servlet，里面的数据是模拟的复制代码代码如下： /** * Servlet实现类DataServlet */公共类DataServlet扩展了HttpServlet {私有静态最终长串行版本id=1L；/* * * @请参见httpersvlet # Doget(httpersvletrequest请求，HttpServletResponse *响应)*/受保护的void Doget(HttpServletrequest请求，HttpServletResponse响应)引发ServletException，IOException { //TODO自动生成的方法存根}/* * * @请参见httpersvlet # Dopost(httpersvletrequest请求，HttpServletResponse *响应)*/受保护的void Dopost(HttpServletrequest请求，HttpServletrequest//取得当前页数，注意这是实例代码自身的参数字符串行=请求。GetParameter(' row ')；//取得每页显示行数，注意这是实例代码自身的参数int totalRecord=80//总记录数（应根据数据库取得，在此只是模拟)int total page=总记录% integer。parseint(行数)=0?total record/integer . parsent(行):总记录/整数。parseint(行)1;//计算总页数尝试{ int index=(整数。parsent(page)-1)*整数。parsent(行)；//开始记录数int pageSize=Integer.parseInt(行数);//以下模拟构造数据数据对象字符串JSON=' { total : ' total page '，page: ' page '，records: ' totalRecord '，row :['；for(int I=索引；我页面大小索引I totalRecordi){ JSON=' { cell :[' ID ' I ' '，' NAME ' i ' '，' PHONE ' I ' ']} '；如果（我！=页面大小索引- 1 i！=totalRecord - 1) { json='，'；} } JSON=']} '；response.getWriter().write(JSON)；//将数据数据返回页面} catch (Exception ex) { } } }目录结构

展现的效果

http://博客。csdn。net/北极星1119/archive/2010/01/04/5130974。aspx http://d。趴下。csdn。net/down/1142295/ctfzh 3358 hi。百度。com/方了_ life/blog/item/1076 b 6 fa 85 a9 ba 1c 6d 22 eb1e。html 3358博客。csdn。net/北极星1119/archive/2010