文档章节

js实现漂亮表格+分页排序功能

lgscofield
 lgscofield
发布于 2015/06/26 13:58
字数 271
阅读 19
收藏 0
点赞 0
评论 0

TinyTable JavaScript Table Sorter

This updated table sorter script is easy to use and feature packed at only 2.5KB. New features include column highlighting, optional pagination, support for links, and date/link parsing. A few other features are alternate row highlighting, header class toggling, auto data type recognition and selective column sorting. More updates will follow soon.

To initialize a table sorter follow the pattern below:

1
2
3
4
5
6
7
8
9
10
11
12
13
var sorter = new TINY.table.sorter( 'sorter' );
sorter.head = 'head' ; //header class name
sorter.asc = 'asc' ; //ascending header class name
sorter.desc = 'desc' ; //descending header class name
sorter.even = 'evenrow' ; //even row class name
sorter.odd = 'oddrow' ; //odd row class name
sorter.evensel = 'evenselected' ; //selected column even class
sorter.oddsel = 'oddselected' ; //selected column odd class
sorter.paginate = true ( false ); //toggle for pagination logic
sorter.pagesize = 15 (20); //toggle for pagination logic
sorter.currentid = 'currentpage' ; //current page id
sorter.limitid = 'pagelimit' ; //page limit id
sorter.init( 'table' ,1);

Before initialization, a new table sorter object must be created. The parameter taken by TINY.table.sorter is the variable name used for the object. The object.init function takes 2 parameters: the id of the table and the initially sorted column index (optional). If you want to exclude a column from sorting add class=”nosort” to the appropriate table header. Table styling is completely customizable via the CSS.

This script has been tested in all major browsers and is available free of charge for both personal or commercial projects under the creative commons license. Community support is available here. Paid support is also available, contact me for details.

本文转载自:http://lgscofield.iteye.com/blog/1676277

共有 人打赏支持
lgscofield

lgscofield

粉丝 20
博文 105
码字总数 63036
作品 0
南京
架构师
dataTables相关资料参考

https://www.cnblogs.com/sweeeper/p/6106320.html http://yuemeiqing2008-163-com.iteye.com/blog/2006942...

ahl123 ⋅ 昨天 ⋅ 0

企业级 JavaScript 数据网格 - ag-Grid

ag-Grid 是一个企业级的 JavaScript 数据网格。 ag-Grid 的目的是提供可用于构建企业级应用的表格,例如报告和数据分析,业务流程和数据输入的数据表格。ag-Grid 每一个功能的文档至少有一个...

匿名 ⋅ 2016/05/09 ⋅ 2

15款Django开发常用软件包

是一款高级的Python Web框架,可以帮助开发者快速创建web应用。我们这里整理了15款Django开发中常用的软件包,学会使用它们可以节省大量开发时间,提高开发效率。同时,也给出了它们的pip安装...

xiaoge2016 ⋅ 04/20 ⋅ 0

没有 Python,微软宣布 Excel 新增 JavaScript 支持

去年年底曾有外媒报道,由于社区用户的强烈要求,微软正考虑添加 Python 作为官方的一种 Excel 脚本语言。不过在昨天的 Build 2018 开发者大会上,微软没有透露有关 Python 支持的消息,而是...

王练 ⋅ 05/09 ⋅ 0

7款强大的Javascript网格插件推荐

表格一直是展示数据的最好方式。以微软的Excel为例,我们可以排序、整理、编辑,甚至几次点击轻松过滤数据。这次,我们看一看JavaScript网格插件,利用JS应用,它转换成普通表到“类Excel”布...

老枪 ⋅ 2011/03/31 ⋅ 8

JavaWeb03-HTML篇笔记(五)

1.1 案例四:使用JS完成后台数据展示的隔行换色的表格:1.1.1 需求: 在后台展示数据的页面上,通常使用表格标签进行数据的展示.没有背景的表格比较难看的,可以使用JS控制表格的隔行换色. 1...

我是小谷粒 ⋅ 05/04 ⋅ 0

asp.net 实现在线打印功能,jQuery打印插件PrintArea实现自动分页

使用的组件:jQuery打印插件PrintArea,有兴趣的可以研究一下。 使用方法略过,这里将介绍如何实现打印多页是可以分页。 现在提供两种方法思路: 1、根据特定的打印机型号和使用的纸张类型,...

easonjim ⋅ 2015/10/18 ⋅ 0

前端基础之JavaScript

一、JavaScript的历史 略 二、ECMAScript 注:ES6就是指ECMAScript 6。 尽管 ECMAScript 是一个重要的标准,但它并不是 JavaScript 唯一的部分,当然,也不是唯一被标准化的部分。实际上,一...

西鼠 ⋅ 05/09 ⋅ 0

iOS下JS与OC互相调用(六)--WKWebView + WebViewJavascriptBridge

iOS下JS与OC互相调用(六)--WKWebView + WebViewJavascriptBridge 转载:原地址 https://www.jianshu.com/p/e951af9e5e74 上一篇文章介绍了UIWebView 如何通过WebViewJavascriptBridge 来实现......

法斗斗 ⋅ 05/11 ⋅ 0

PHP学习路线图 最全PHP自学指南

对于广大零基础的PHP自学者,往往不知道如何系统的学习PHP,导致平白浪费了很多时间。本文将为大家带来最详细的php学习路线图,同时还会附上相应的权威教程,让广大PHP自学者少走许多弯路。 ...

W3Cschool小编 ⋅ 04/24 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Docker系列教程28-实战:使用Docker Compose运行ELK

原文:http://www.itmuch.com/docker/28-docker-compose-in-action-elk/,转载请说明出处。 ElasticSearch【存储】 Logtash【日志聚合器】 Kibana【界面】 答案: version: '2'services: ...

周立_ITMuch ⋅ 21分钟前 ⋅ 0

使用快嘉sdkg极速搭建接口模拟系统

在具体项目研发过程中,一旦前后端双方约定好接口,前端和app同事就会希望后台同事可以尽快提供可供对接的接口方便调试,而对后台同事来说定好接口还仅是个开始、设计流程,实现业务逻辑,编...

fastjrun ⋅ 47分钟前 ⋅ 0

PXE/KickStart 无人值守安装

导言 作为中小公司的运维,经常会遇到一些机械式的重复工作,例如:有时公司同时上线几十甚至上百台服务器,而且需要我们在短时间内完成系统安装。 常规的办法有什么? 光盘安装系统 ===> 一...

kangvcar ⋅ 昨天 ⋅ 0

使用Puppeteer撸一个爬虫

Puppeteer是什么 puppeteer是谷歌chrome团队官方开发的一个无界面(Headless)chrome工具。Chrome Headless将成为web应用自动化测试的行业标杆。所以我们很有必要来了解一下它。所谓的无头浏...

小草先森 ⋅ 昨天 ⋅ 0

Java Done Right

* 表示难度较大或理论性较强。 ** 表示难度更大或理论性更强。 【Java语言本身】 基础语法,面向对象,顺序编程,并发编程,网络编程,泛型,注解,lambda(Java8),module(Java9),var(...

风华神使 ⋅ 昨天 ⋅ 0

Linux系统日志

linux 系统日志 /var/log/messages /etc/logrotate.conf 日志切割配置文件 https://my.oschina.net/u/2000675/blog/908189 logrotate 使用详解 dmesg 命令 /var/log/dmesg 日志 last命令,调......

Linux学习笔记 ⋅ 昨天 ⋅ 0

MVC——统一报文格式的异常处理响应

在我们写controller层的时候,常常会有这样的困惑,如果需要返回一个数据是,可能为了统一回去构造一个类似下列的数据格式: { status:true, msg:"保存成功!", data:[]} 而且在写...

alexzhu592 ⋅ 昨天 ⋅ 0

[知乎]SSH框架

网上图书馆管理系统包括管理员管理和图书管理,图书借阅,查询模块等等,网上商城包括前台页面和后台管理页面,两个都是以前别人的实际项目,只是别人用的不是SSH,我把他们改用SSH了,除了S...

颖伙虫 ⋅ 昨天 ⋅ 0

android -------- 打开本地浏览器或指定浏览器加载,打电话,打开第三方app

开发中常常有打开本地浏览器加载url或者指定浏览器加载, 还有打开第三方app, 如 打开高德地图 百度地图等 在Android程序中我们可以通过发送隐式Intent来启动系统默认的浏览器。 如果手机本身...

切切歆语 ⋅ 昨天 ⋅ 0

linux 安装docker

通过以下命令下载安装docker wget -qO- https://get.docker.com | sh 执行以上命令后输出以下内容说明安装成功,注意红框中的内容,docker安装成功后默认只有root能使用,红框中给出的提示是...

haoyuehong ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部