`

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

阅读更多

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.

分享到:
评论

相关推荐

    jQuery动态表格数据分页检索排序代码

    总的来说,这个“jQuery动态表格数据分页检索排序代码”项目展示了如何利用jQuery的强大功能,实现前端数据管理的核心功能,为开发者提供了构建类似功能的参考。通过学习和理解这个项目,开发者可以更好地掌握前端...

    Js特效 表格分页排序

    4. 实现表格分页功能,可指定是否开启分页功能及每页行数; 5. 排序数据支持数据类型自动识别(这点很强大)。例如:整型数据、浮点型数据、字母、电话号码、日期、链接 6. 表格外观样式可通过CSS灵活定制 7. 所需要...

    JS实现table表格数据排序功能(可支持动态数据+分页效果)

    在JavaScript中实现表格数据排序和分页功能是Web开发中常见的需求,特别是在处理大量数据时。这个场景中,我们讨论的是如何用JavaScript实现一个表格的动态数据排序,并且支持分页,主要涉及到以下知识点: 1. **...

    js+xml表格,实现排序分页功能

    本教程将探讨如何使用JavaScript(js)和XML(eXtensible Markup Language)来创建动态表格,实现排序和分页功能,同时允许用户任意移动列。这种技术能够提升用户体验,使数据管理更加灵活和高效。 首先,我们需要...

    基于jquery的表格筛选,排序,分页js

    本主题关注的是如何利用jQuery实现表格的数据筛选、排序和分页功能,这些都是网页数据展示中常见的需求。 一、jQuery表格筛选 表格筛选功能允许用户通过输入关键词快速查找表格中的特定数据。在jQuery中,可以使用`...

    Bootstrap-表格模板(动态满屏)【筛选+分页+排序】

    而动态分页则需要JavaScript处理,可以结合DataTables插件或其他类似的库,如Paging.js,根据当前页码和每页显示数量来更新表格内容。 排序功能使得用户能够按需对表格数据进行升序或降序排列。在Bootstrap中,这...

    Bootstrap-表格模板(动态非满屏)【筛选+分页+排序】

    总结来说,这个Bootstrap表格模板整合了前端开发中常用的功能,如筛选、分页和排序,这些功能都是通过JavaScript和jQuery与Bootstrap的CSS样式相结合实现的。开发者可以直接应用这个模板,快速搭建具备强大交互性的...

    Bootstrap-表格模板(动态满屏)【筛选+分页+排序】.7z

    这个"Bootstrap-表格模板(动态满屏)【筛选+分页+排序】.7z"压缩包提供了一个完整的解决方案,适用于那些需要在网页中展示大量数据,并且希望实现动态满屏、数据筛选、分页和排序功能的开发者,特别是对于正在进行...

    TinyTable 简单实用的JS表格分页及排序插件

    2. 易于集成:只需要引入相关的JavaScript文件,然后简单配置即可实现表格分页和排序。 3. 自定义性:支持自定义分页样式和排序方式,可以灵活调整以适应不同项目需求。 4. 兼容性:兼容主流浏览器,包括Chrome、...

    表格可按列筛选排序的分页 JS+CSS+DIV

    "表格可按列筛选排序的分页 JS+CSS+DIV" 是一个基于 JavaScript、CSS 和 HTML(尤其是 DIV 元素)实现的功能强大的表格组件。这个组件允许用户对表格数据进行动态的列筛选和排序,同时具备分页功能,提高了用户体验...

    jquery tablesorter,表格排序带分页

    《jQuery TableSorter:实现高效表格排序与分页功能》 在网页开发中,数据的展示往往离不开表格,而对表格进行排序和分页则能极大地提升用户体验。jQuery TableSorter是一款强大的JavaScript插件,它使得表格排序和...

    jquery动态表格数据分页搜索排序代码.zip

    本示例项目"jquery动态表格数据分页搜索排序代码.zip"提供了使用jQuery实现动态表格数据展示、分页、搜索及排序的功能。下面将详细阐述这些功能的实现原理和步骤。 1. **动态表格数据**: 在网页上动态生成表格...

    jQuery表格分页排序插件.zip

    jQuery表格分页排序插件,如“SlimTable”,在网页开发中扮演着重要角色,尤其在处理大量数据展示时。这种插件能够有效地提升用户体验,因为它允许用户仅查看和操作他们关心的部分数据,而不是一次性加载所有信息。...

    bootstrap实现表格的分页排序搜索和鼠标拖动列宽示例

    在这个示例中,我们关注的是如何利用Bootstrap来增强表格的功能,包括分页、排序、搜索以及允许用户通过鼠标拖动调整列宽。这些功能大大提升了用户体验,使数据展示更加友好和高效。 首先,要实现表格的分页,...

    js实现漂亮的table表格

    - **Handsontable** 和 **ag-Grid**:专门的JavaScript表格库,提供丰富的功能,如拖放、单元格格式化、编辑器等,适用于复杂的表格需求。 4. **代码实践**: 提供的"JS实现漂亮的表格table特效代码"可能包含...

    jQuery实现的分页排序Table组件

    下面我们将深入探讨jQuery分页排序Table组件的核心功能、实现原理以及如何在实际项目中应用。 一、分页功能 分页是管理大量数据的关键,它将大表格分割成小块,每次只加载和显示一部分数据,提高页面加载速度和...

    JavaScript实现的动态排序分页

    总的来说,JavaScript实现的动态排序分页是通过监听用户交互,动态更新数据并重新渲染表格来达到目的。这一技术广泛应用于各种Web应用程序,尤其是在数据密集型的场景中,如报表、数据库查看器等。熟练掌握这部分...

    drag and drop js拖拽实现,分页排序tables

    在本文中,我们将深入探讨如何使用JavaScript实现拖放(Drag and Drop)功能,以及如何将这一特性应用到分页表格的排序中。首先,我们来看看拖放功能的基本原理。 拖放是网页交互的一种常见方式,它允许用户通过...

Global site tag (gtag.js) - Google Analytics