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

实验八 表格插件的应用 【实验目的】 1、掌握表格排序的实现原理； 2、掌握表格分页的实现原理； 3、能够使用DataTables插件进行表格的设计。 【实验准备】 1、复习教材相关内容； 2、预习本次实验； 【实验内容】 1、对于如下表格中的数据，对name属性列升序排列（忽略姓名的字母大小写），效果如图8－1所示。 图8-1 tablesort.html !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=gb2312 / titlename属性列升序排列/title link rel=stylesheet type=text/css href=css/style.css/ script type=text/javascript src=js/jquery-1.4.2.js/script script type=text/javascript $(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 if (keyA keyB) { return 1; } else { return 0; } }); //循环遍历排序结果，依次添加到表格中 $.each(r