`

Jsp表格排序(使用Jquery)

阅读更多

jQuery 表格排序插件 Tablesorter 使用方式如下:

1.引入头文件(注意一定要把jQuery放在前面):

<script src="lib/jquery-1.8.3.min.js"></script>
<!--tablesorter-->
<link href="css/css_tablesorter_green/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="lib/jquery.tablesorter.js"></script>
<script type="text/javascript">
		$(document).ready(function(){
		$("#alltable").tablesorter();     
	}); 
</script>

 2.在需要使用排序的<Table>上无需做任何设定,很方便:

<table id="alltable" class="tablesorter"  width="584"> 
<thead> 
<tr> 
    <th>Last Name</th> 
    <th>First Name</th> 
    <th>Email</th> 
    <th>Due</th> 
    <th>Web Site</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
    <td>Smith</td> 
    <td>John</td> 
    <td>jsmith@gmail.com</td> 
    <td>$50.00</td> 
    <td>http://www.jsmith.com</td> 
</tr> 
<tr> 
    <td>Bach</td> 
    <td>Frank</td> 
    <td>fbach@yahoo.com</td> 
    <td>$50.00</td> 
    <td>http://www.frank.com</td> 
</tr> 
<tr> 
    <td>Doe</td> 
    <td>Jason</td> 
    <td>jdoe@hotmail.com</td> 
    <td>$100.00</td> 
    <td>http://www.jdoe.com</td> 
</tr> 
<tr> 
    <td>Conway</td> 
    <td>Tim</td> 
    <td>tconway@earthlink.net</td> 
    <td>$50.00</td> 
    <td>http://www.timconway.com</td> 
</tr> 
</tbody> 
</table> 

 

分享到:
评论

相关推荐

    HTML/PHP/ASP/ASP.NET/JSP... jQuery ui.ariaSorTable 支持排序、分页的表格

    HTML/PHP/ASP/ASP.NET/JSP... jQuery ui.ariaSorTable 支持排序、分页的表格 jQuery ui.ariaSorTable 支持分页的表格组件,想实现无刷新分页的朋友一定要看看这个jQuery ui插件,为你实现多功能表格提供有一份有力...

    tablesorter实现HTML表格点击表头排序

    `tablesorter`是一个非常实用的JavaScript库,它为HTML表格提供了强大的排序功能,不仅适用于纯HTML页面,也兼容JSP、PHP等服务器端渲染技术。 `tablesorter`的核心功能在于它能够监听表格的表头(thead)点击事件...

    jsp jquery

    本篇文章将深入探讨`JSP+jQuery`结合使用时实现增删改查(CRUD)操作的基本原理、流程以及它们各自的特性。 首先,`JSP`是Java的一种动态网页技术,它允许开发人员在HTML页面中嵌入Java代码,以实现服务器端的业务...

    实现表格按照列排序和拖拽行排序

    `jquery.tablesorter.js`则是一个强大的表格排序插件,支持多种排序方式,包括升序、降序以及自定义排序。用户可以通过点击表头来对表格数据进行排序。这个插件内部实现了复杂的排序算法,可以处理各种类型的数据,...

    使用jsp,jquery,easyUI,ssh,mysql框架完整的表格增删改,及页面布局的项目

    该项目是一个基于Java Web技术的完整应用,主要使用了JSP(JavaServer Pages)、jQuery、EasyUI、SSH(Spring、Struts2、Hibernate)框架以及MySQL数据库。以下是对这些技术及其在项目中的应用的详细说明: **JSP ...

    jquery flexigrid 支持前台排序

    **jQuery Flexigrid 前台排序实现详解** 在Web开发中,数据展示是一个重要的环节,而表格作为数据展示的常见形式,其排序功能尤为重要。jQuery Flexigrid是一款功能强大的表格插件,它提供了丰富的自定义选项和操作...

    jquery Table响应式表格插件.zip

    3. 调用插件:在文档加载完成后,使用jQuery选择器找到表格元素,并调用插件提供的方法,如`$.fn.responsiveTable()`。 4. 配置选项:根据需要,可以传递一个配置对象给插件,调整其行为和样式。 五、示例代码 ```...

    9种jquery纯页面分页排序

    jQuery提供了方便的数据排序插件,如`jquery.tablesorter`,它允许用户对表格数据进行点击列头进行升序或降序排序。`jquery.tablesorter`不仅可以处理基本的文本排序,还能处理日期、数字等复杂类型的排序。 2. **...

    基于 jsp + servlet + jquery + easy-ui + ajax 的学生成绩管理系统.zip

    在成绩管理系统中,jQuery用于优化前端用户体验,比如通过AJAX实现异步数据加载,避免页面刷新,或者实现诸如表格排序、筛选等交互功能。 4. **Easy-UI**:Easy-UI是一个基于jQuery的前端框架,提供了一系列预定义...

    Jquery Flexigrid jsp Demo

    - **Ajax调用**:Flexigrid使用Ajax请求向JSP发送请求,获取所需的数据,并自动填充到表格中。 - **HTML模板**:JSP页面可以创建一个包含Flexigrid初始化代码的HTML模板,包括定义列头、设置URL等。 - **Servlet...

    使用JSP+jqueryUI+java Servlet通过Apache POI实现Excel导入导出

    jQuery UI则是一个强大的JavaScript库,提供了丰富的用户交互组件,如对话框、表格排序等。在本项目中,我们可以利用它来创建一个友好的用户界面,例如一个文件上传的对话框,让用户选择要导入或导出的Excel文件。 ...

    jQuery柱状图饼状图

    通过结合使用jQuery和服务器端技术(如JSP或ASP),可以实现在客户端动态生成和展示报表,提供用户友好的交互体验。 在实际应用中,jQuery报表插件如DataTables、FlexGrid和jqGrid等提供了强大的数据网格功能,支持...

    js可编辑的网页表格,并可将填写单元格内容保存到MySQL数据库,再读取到另一表格中

    JavaScript库如jQuery或更专业的数据表库如Handsontable、Ag-Grid等,可以简化这一过程,提供丰富的功能,如单元格验证、排序、过滤等。不过,本项目可能采用了原生JavaScript来实现,这需要对DOM操作有深入理解,...

    java ee 表格的绘制

    可以使用JavaScript的DOM操作方法动态添加、删除或修改表格元素,jQuery库则提供了更方便的操作方式。例如,使用`$(table).DataTable()`插件可以快速创建带有高级功能的数据表。 5. JavaBeans和Model-View-...

    js 根据表头进行排序

    对于老版本的IE,可能需要额外的polyfill或者使用像jQuery这样的库来确保兼容性。 8. **JSP页面**: 如果项目是基于Java Server Pages (JSP) 的,那么前端逻辑可能会封装在JSP脚本或分离的JavaScript文件中。JSP...

    结合jquery官方demo自己修改的java+mysql的demo

    开发者可能使用了Servlets、JSP(JavaServer Pages)或者Spring MVC等框架来构建后端服务。 然后是MySQL,这是一个流行的开源关系型数据库管理系统。在这个demo中,MySQL用于存储和管理应用程序的数据。Java后端会...

    jquery ui 界面

    6. **可排序(Sortable)**:使列表或表格的行可拖动排序,适合于创建动态列表。 7. **可折叠(Accordion)和下拉(Dropdown)**:组织内容并节省空间,提高页面的可读性。 **CSS样式与主题** jQuery UI还包含...

    jquery easyui 结合jsp简单展现table数据示例

    本文主要介绍如何使用jQuery EasyUI结合JSP技术实现一个简单地在网页中展示表格数据的功能。知识点涵盖jQuery EasyUI的使用、JSP页面的基本编写、以及JSON数据格式的应用。通过实例代码的展示,讲解了如何创建一个...

    树形表格 treetable 完整版 带演示demo例子

    - 操作简便:与普通的表格相比,树形表格增加了展开、折叠、排序等交互功能,用户可以更直观地处理复杂数据。 - 数据绑定:支持动态加载子节点,减少一次性加载大量数据带来的性能问题。 - 自定义样式:允许...

Global site tag (gtag.js) - Google Analytics