`
nesta13
  • 浏览: 113861 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

基于JQuery组件实现table排序功能

阅读更多

基于JQuery组件实现table排序功能

使用JQuery的好处:
1、3个JS文件都是经过压缩,总共不到50K,因此不会影响页面读取速度
2、导入jquery.js文件,可减少编写JS代码量

 

要实现table排序功能,需要包含以下3个文件
jquery-1.2.6.pack.js
jquery.tablesorter.min.js
jquery.tablesorter.pager.js 或 jquery.tablesorter.pager-1.1.js

jquery.tablesorter.min.js (仅共产品开发用)


实现对table排序,但没有分页功能

可实现功能包括:
1、只能基于table表格的排序实现;
1、可实现对table表格每个列或指定列进行排序;
2、可强制指定列排序;
3、可对table列自定义CSS样式;
4、DEBUG断点调试;
5、可实现多列复合排序;

 

优点:
1、可一次性读取所有记录,由JS实现分页,不再需要由分页类实现分页功能
2、不需要后台硬编码实现排序,直接由JS实现,无需重新编码
3、减轻服务器承受的压力
4、对table排序的绑定和卸载方便

 

缺点:
1、需学习JQuery编码模式和jquery.tablesorter组件
2、当数据量大时,如1000条以上记录,可能会出现页面加载后,有1-2秒页面停顿效果。
3、数据的实时性差

 

jquery.tablesorter.pager.js
可对jquery.tablesorter组件实现分页功能效果

 

实现功能:
1、在jquery.tablesorter.min.js基础上实现分页
2、支持上一页、下一页、首页、末页、页数和总页数同时显示、每页显示数据

 

改进的jquery.tablesorter.pager-1.1.js
增加功能:
1、支持单独显示页数,如:“第1页”
2、支持单独显示总页数,如:“共5页”
3、增加输入页码数进行页数转向

分享到:
评论
2 楼 usking 2009-06-20  
<select class="pagesize"><option></option>......</select>
去掉这行就不能分页了,请LZ解决下
1 楼 leo_dream 2009-01-19  
请问js生成的表格,tablesorter能排序吗

相关推荐

    jQuery实现的分页排序Table组件

    jQuery实现的分页排序Table组件

    基于jquery实现表格无刷新分页

    主要介绍了基于jquery实现表格无刷新分页,功能实现了前端排序功能,增加了前端搜索功能,感兴趣的小伙伴们可以参考一下

    jqTable:jqTable:一款集所有交互于一身的table组件

    jqTable:一款集所有交互于一身的table组件 功能包括: 动态表格数据,提供更新数据方法 表格头部固定,支持多级表头 左右列可选固定 复选框选择,批量处理 二级列表,可展开收起 宽度可固定,可自适应 排序 ...

    JS表格组件神器bootstrap table使用指南详解

    Bootstrap table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选、多选、排序、分页,以及编辑、导出、过滤(扩展)等等的功能。目前在github上已经有2600多个Star,可见...

    aTable:基于 Backbone.js 构建的快速、灵活的 Javascript 表格组件

    #一张桌子 建立在 Backbone.js 上的快速、交互式 Javascript 表格组件。 查看的项目页面,获取完整的 API 文档和示例以帮助您入门 ####特征 快速高效- 在表格滚动时添加和删除行,即使对于非常大的数据集,a...

    实现超用户体验 table排序javascript实现代码

    其实实现这种效果有很多方法,当然如果你的JS不好,可以用JQuery的组件,但是我想要是自己能写出来总是好的。因此我抽了点时间来实现它。当我实现后,发现要实现这种效果是很简单的,几行JS代码就搞定了,关键就是...

    mdtable:简单的表格组件。Simple table widget

    欢迎大家提出指正###功能远程/本地请求数据排序搜索行/列渲染分页(非完全开发)###已知问题分页组件只做了简单实现,没有做首页和尾页以及页数较多时的处理如果排序的2行数据相同,可能会出现不同的排序结果###使用...

    sortable+element 实现表格行拖拽的方法示例

    1、vue项目中的表格需要实现行拖拽功能 2、表格使用element组件库中el-table 方案介绍 Sortable.js 介绍:Sortable.js是一款轻量级的拖放排序列表的js插件 引用自官方文档:No jQuery required. Supports Meteor, ...

    jQuery表格排序组件-tablesorter使用示例

    – 引入以下样式则表头出现排序图标,同时引入图片 –&gt; &lt;link href=”css/style.css” rel=”stylesheet” type=”text/css” &gt; 效果如图: 二、标准的HTML表格,必须包括thead和tbody标签 代码如下: &lt;...

    bootstrap-table formatter 使用vue组件的方法

     Bootstrap table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选、多选、排序、分页,以及编辑、导出、过滤(扩展)等等的功能。目前在github上已经有2600多个Star,...

    原生systable表格插件(支持API接口)

    SYSTABLE version1.2 table表格插件,是本人独立开发的后台通用系统SYSUI的...支持排序,checkbox全选,表格列宽拖拽,按钮操作,分页等table表格功能操作。 支持表格直接修改信息,支持checkbox单选框选择, 文本修改。

    动态表:动态表jQuery插件-可以对表进行排序,过滤和编辑的方法,类似于常见的电子表格应用程序

    产品特点电子表格的感觉通过AJAX加载数据分页滚动(轻松处理成千上万行) 筛选和排序可编辑字段精选活动基于jQuery UI先决条件jQuery的jQuery UI moment.js-这是可选的,以便更好地呈现日期。 但是,您必须确保它在...

    jQuery EasyUI 1.3 API 中文教程

    数据表格添加查询功能 数据表格添加工具条 数据表格设置冻结列 动态改变数据表格列 格式化数据表格列 数据表格设置排序 数据表格自定义排序 数据表格添加复选框 数据表格自定分页工具栏 数据表格...

    python入门到高级全栈工程师培训 第3期 附课件代码

    07 recv与recvfrom的区别及基于udp实现ntp服务 08 基于tcp实现远程执行命令 09 基于tcp实现远程执行命令测试结果 10 粘包现象 11 粘包解决方法 第31章 01 上节课复习 02 socketserver实现并发 03 socketserver模块...

    Jquery Datatables的使用详解

    使用Datatables可以很灵活的从服务端通过ajax更新表格数据,实现排序、分页等功能。 一、安装 登录官网下载,可以看到有一个选择的表单让你自定义下载包的内容,可以选择样式、扩展组件、Jquery库等,这个可以根据...

    GridManager:表格组件GridManager

    实现功能 功能 描述 宽度调整 表格的列宽度可进行拖拽式调整 位置更换 表格的列位置进行拖拽式调整 配置列 可通过配置对列进行显示隐藏转换 表头吸顶 在表存在可视区域的情况下,表头将一直存在于顶部 列固定 指定某...

    jQuery-Datatables-Server-Side-Processing:用于jQuery数据表的服务器端处理的插件

    ASP NET组件,为著名的jQuery表插件添加了自动服务器端处理功能。 它使用IQueryable接口来构造查询表达式到您的数据集合,可以由诸如实体框架的ORM处理。 支持: 分页; 搜索; 排序; 自定义过滤条件:小于,...

    java开源包3

    GWT Advanced Table 是一个基于 GWT 框架的网页表格组件,可实现分页数据显示、数据排序和过滤等功能! Google Tag Library 该标记库和 Google 有关。使用该标记库,利用 Google 为你的网站提供网站查询,并且可以...

    java开源包4

    GWT Advanced Table 是一个基于 GWT 框架的网页表格组件,可实现分页数据显示、数据排序和过滤等功能! Google Tag Library 该标记库和 Google 有关。使用该标记库,利用 Google 为你的网站提供网站查询,并且可以...

Global site tag (gtag.js) - Google Analytics