基于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、增加输入页码数进行页数转向
分享到:
相关推荐
jQuery实现的分页排序Table组件
主要介绍了基于jquery实现表格无刷新分页,功能实现了前端排序功能,增加了前端搜索功能,感兴趣的小伙伴们可以参考一下
jqTable:一款集所有交互于一身的table组件 功能包括: 动态表格数据,提供更新数据方法 表格头部固定,支持多级表头 左右列可选固定 复选框选择,批量处理 二级列表,可展开收起 宽度可固定,可自适应 排序 ...
Bootstrap table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选、多选、排序、分页,以及编辑、导出、过滤(扩展)等等的功能。目前在github上已经有2600多个Star,可见...
#一张桌子 建立在 Backbone.js 上的快速、交互式 Javascript 表格组件。 查看的项目页面,获取完整的 API 文档和示例以帮助您入门 ####特征 快速高效- 在表格滚动时添加和删除行,即使对于非常大的数据集,a...
其实实现这种效果有很多方法,当然如果你的JS不好,可以用JQuery的组件,但是我想要是自己能写出来总是好的。因此我抽了点时间来实现它。当我实现后,发现要实现这种效果是很简单的,几行JS代码就搞定了,关键就是...
欢迎大家提出指正###功能远程/本地请求数据排序搜索行/列渲染分页(非完全开发)###已知问题分页组件只做了简单实现,没有做首页和尾页以及页数较多时的处理如果排序的2行数据相同,可能会出现不同的排序结果###使用...
1、vue项目中的表格需要实现行拖拽功能 2、表格使用element组件库中el-table 方案介绍 Sortable.js 介绍:Sortable.js是一款轻量级的拖放排序列表的js插件 引用自官方文档:No jQuery required. Supports Meteor, ...
– 引入以下样式则表头出现排序图标,同时引入图片 –> <link href=”css/style.css” rel=”stylesheet” type=”text/css” > 效果如图: 二、标准的HTML表格,必须包括thead和tbody标签 代码如下: <...
Bootstrap table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选、多选、排序、分页,以及编辑、导出、过滤(扩展)等等的功能。目前在github上已经有2600多个Star,...
SYSTABLE version1.2 table表格插件,是本人独立开发的后台通用系统SYSUI的...支持排序,checkbox全选,表格列宽拖拽,按钮操作,分页等table表格功能操作。 支持表格直接修改信息,支持checkbox单选框选择, 文本修改。
产品特点电子表格的感觉通过AJAX加载数据分页滚动(轻松处理成千上万行) 筛选和排序可编辑字段精选活动基于jQuery UI先决条件jQuery的jQuery UI moment.js-这是可选的,以便更好地呈现日期。 但是,您必须确保它在...
数据表格添加查询功能 数据表格添加工具条 数据表格设置冻结列 动态改变数据表格列 格式化数据表格列 数据表格设置排序 数据表格自定义排序 数据表格添加复选框 数据表格自定分页工具栏 数据表格...
07 recv与recvfrom的区别及基于udp实现ntp服务 08 基于tcp实现远程执行命令 09 基于tcp实现远程执行命令测试结果 10 粘包现象 11 粘包解决方法 第31章 01 上节课复习 02 socketserver实现并发 03 socketserver模块...
使用Datatables可以很灵活的从服务端通过ajax更新表格数据,实现排序、分页等功能。 一、安装 登录官网下载,可以看到有一个选择的表单让你自定义下载包的内容,可以选择样式、扩展组件、Jquery库等,这个可以根据...
实现功能 功能 描述 宽度调整 表格的列宽度可进行拖拽式调整 位置更换 表格的列位置进行拖拽式调整 配置列 可通过配置对列进行显示隐藏转换 表头吸顶 在表存在可视区域的情况下,表头将一直存在于顶部 列固定 指定某...
ASP NET组件,为著名的jQuery表插件添加了自动服务器端处理功能。 它使用IQueryable接口来构造查询表达式到您的数据集合,可以由诸如实体框架的ORM处理。 支持: 分页; 搜索; 排序; 自定义过滤条件:小于,...
GWT Advanced Table 是一个基于 GWT 框架的网页表格组件,可实现分页数据显示、数据排序和过滤等功能! Google Tag Library 该标记库和 Google 有关。使用该标记库,利用 Google 为你的网站提供网站查询,并且可以...
GWT Advanced Table 是一个基于 GWT 框架的网页表格组件,可实现分页数据显示、数据排序和过滤等功能! Google Tag Library 该标记库和 Google 有关。使用该标记库,利用 Google 为你的网站提供网站查询,并且可以...