实验八 表格插件的应用.doc

实验八 表格插件的应用【实验目的】1、掌握表格排序的实现原理；2、掌握表格分页的实现原理；3、能够使用DataTables插件进行表格的设计。【实验准备】1、复习教材相关内容；2、预习本次实验；【实验内容】1、对于如下表格中的数据，对name属性列升序排列（忽略姓名的字母大小写），效果如图81所示。 图8-1tablesort.html name属性列升序排列 $(document).ready(function() /表格隔行变色 var altercol = function($table) $table.find(tbody tr:even).removeClass(odd).addClass(even); $table.find(tbody tr:odd).removeClass(even).addClass(odd); ; altercol($(table); /对于每一个标题，定义事件 $(table th).each(function(column) /如果是需要排序的标题列 if ($(this).is(.sort-alpha) /定义单击事件 $(this).click(function() /获取所有记录，存放到rows数组中 var rows = $(tbody tr).get(); /使用sort方法定义排序规则 rows.sort(function(a, b) var keyA = $(a).children(td).eq(column).text().toUpperCase(); var keyB = $(b).children(td).eq(column).text().toUpperCase(); if (keyA keyB) return 1; else return 0; ); /循环遍历排序结果，依次添加到表格中 $.each(rows, function(index, row) $(table).children(tbody).append(row); ); altercol($(table); ); ); ); idnamesexaddress 1Alice男浙江宁波 2Lily女浙江杭州 3Jack男湖南长沙 4Kitty男浙江温州 5Rain男浙江杭州 6MAXMAN女浙江杭州 2、对表格中的数据分页，分页索引通过jQuery代码动态添加。效果如图8-2所示。图8-2tablepage.html表格分页$(document).ready(function() /表格隔行变色 var altercol=function($table) $table.find(tbody tr:even).removeClass(odd).addClass(even); $table.find(tbody tr:odd).removeClass(even).addClass(odd); ; altercol($(table); var pagenate=function() var ltindex=pageSize*(currentPage-1); var gtindex=pageSize*currentPage; $(tbody tr).hide().slice(ltindex,gtindex).show(); ; var currentPage=1; var pageSize=5; var numRows=$(tbody tr).length; var numPages=Math.ceil(numRows/pageSize); var $div=$(); for(var page=1;page=numPages;page+) $(+page+).appendTo($div); $div.appendTo(body); pagenate(); $(.pager span).click(function() var pageindex=$(this).text(); currentPage=pageindex; pagenate(); ); ); idnamesexaddress1Alice男浙江宁波2Lily女浙江杭州3Jack男湖南长沙4Kitty男浙江温州5Rain男浙江杭州6MAXMAN女浙江杭州7Alice男浙江宁波8Lily女浙江杭州9Jack男湖南长沙10Kitty男浙江温州11Rain男浙江杭州12MAXMAN女浙江杭州13Alice男浙江宁波14Lily女浙江杭州 3.利用DataTables插件实现表格的排序和分页，效果如图8-3所示。要求：表格中的数据从数据库中读取。图8-3DataTables$(document).ready(function() $(#example).dataTable( bProcessing: true,sAjaxSource: getinfoServlet ); );区县名称小区名称楼层面积售价Servlet中关键代码：/定义编码格式response.setContentType(text/html);response.setCharacterEncoding(utf-8);/查询房屋信息GetHouseinfo getinfo=new GetHouseinfo();List result=getinfo.gethouseinfo();/定义Stringbuffer类型的对象，创建JSON字符串StringBuffer sb=new StringBuffer();sb.append(aaData: );/每一项for(int i=0;iresult.size();i+)houseinfobean info = new houseinfobean();info=(houseinfobean)result.get(i);sb.append(+info.getDistrictname()+,);sb.append(+info.getHousename()+,);sb.append(+info.getFloor()+,);sb.append(+info.getArea()+,);sb.append(+info.getPrice()+);sb.append();if(iresult.size()-1)sb.append(,);sb.append();System.out.println(sb.toString();/通过out对象输出结果PrintWriter out = res