这几天,编写了一个根据传入数据对象,生成table列表的javascript方法,其实会涉及到对table的排序,在此记录一下实现过程。
首先,将整个table分为表头,表体、表尾三个部份,其中表头为列表的字段名,表体为这个table的实际内容数据,然后表尾为一些分页的标志(上下页等)。同时把这三个部份,分别存往放在三个不同的javascript变量中。当然这些javascript变量均为对象,分别以table的id为索引搜索各自的table表头、表体、表尾内容。
其次,将表体中的每一行即:tr存放在一个变量数组T中。
然后,将待排序的字段列数据也存放在一个数组A中,同时生成一个对应的键值对象B,键为待排序字段的每一个cell的内容,值为cell对应行的序号。
最后,将分别用三个数组统计数组A中的内容是数值或字符还是汉字,依次存储的数组为numArr(数值)、abcArr(字符)、worArr(汉字),再分别利用javascript的方法sort对数值用numArr = numArr.sort(function(a,b){return a-b;});对字符用abcArr= numArr.sort();
对汉字用worArr= worArr.sort(function(a,b){return a.localeCompare(b);});(拼音顺序)进行排序,分别排序完成后,再将这三个数组合并到A数组中,在重新生成整个table,此时table的表头,和表尾我的照搬过来,只是表体的内容,我们需要遍历数组T生成,遍历的顺序为排序好的A数组中值对应在B对象中的序号,根据序号再去T数组中一个一个的取出tr字符串进行表体的生成。
至此,我们可以用表头+表体(已排序)+表尾的形式将table重绘,实现排序。
分享到:
相关推荐
实现Table动态排序的方法通常涉及以下几种技术: 1. **JavaScript**:在网页应用中,JavaScript是最常用的实现动态排序的语言。库如jQuery、AngularJS、Vue.js等提供了方便的API来处理表格排序。例如,使用jQuery的...
在网页开发中,数据展示通常会使用表格(Table)元素,而为了使用户能更方便地浏览和理解数据,我们常常需要实现表头点击时自动排序的功能。这个功能的实现主要依赖于JavaScript,因为它提供了对DOM操作和事件监听的...
本篇文章将深入探讨“jQuery Table Sort”插件,这是一种专门用于在jQuery环境下对表格数据进行排序的工具。 首先,我们要理解jQuery Table Sort插件的基本工作原理。这个插件允许用户通过点击表格的表头来实现数据...
在网页开发中,JavaScript(简称JS)是一种必不可少的脚本语言,它被广泛用于实现页面交互和动态功能。本文将详细讲解如何使用JS对页面上的HTML表格数据进行排序,以便用户点击表头时能直接触发排序操作。 首先,...
在JavaScript中实现表格(Table)行排序是一种常见的需求,特别是在数据可视化和用户交互丰富的Web应用中。本资源“js 实现 table 行排序 TableOrder.rar”提供了一个实用的方法来实现这个功能。以下是对该实现的...
在本主题中,我们关注的是"bootstrap-table.css 表格拖拽排序",这是一种允许用户通过鼠标拖放操作来改变表格行顺序的功能。这个特性尤其适用于那些需要频繁调整数据顺序的场景,比如任务管理或者项目进度跟踪。 ...
"实现table表格可按行拖拽,按列排序,并可以保存排序后的结果"是一个常见的需求,尤其适用于数据展示和管理的场景。这里我们将详细探讨如何利用jQuery、jQuery.tablesorter和jQuery.tablednd_0_5这三个JavaScript库...
在网页开发中,JavaScript 是一种常用的编程语言,用于实现客户端的动态效果和交互。当我们需要在 HTML 表格(`<table>`)中实现行排序功能时,JavaScript 就派上了大用场。本篇文章将深入探讨如何使用 JavaScript ...
jQuery Tablesorter插件为实现这一功能提供了一种简单而有效的方法。通过该插件,开发者可以轻松地将静态HTML表格转换成具有动态排序能力的表格,极大地提升了用户体验。 #### 二、安装与引入 要使用jQuery ...
在网页开发中,HTML表格(`<table>`)是一种常用的数据展示方式,它允许开发者以结构化的方式组织和展示数据。然而,为了提供更好的用户体验,我们往往需要对表格中的数据进行排序,特别是在处理大量数据时。`html...
为了解决这个问题,一种常见的策略是将排序请求发送到服务器。当用户点击排序按钮时,前端向后端发送包含排序字段和排序方向的请求,后端根据这些信息对整个数据集进行排序,然后返回新的分页数据。这种方法确保了...
在IT领域,尤其是在Web开发中,表格(Table)是一种常用的数据展示方式,用户往往需要对表格中的数据进行排序,以便快速查找和分析信息。本文将深入探讨“table数据排序”的概念、实现方法以及相关的编程技术。 一...
Table,也就是表格,是一种直观、清晰地展示数据的方式。本篇将深入探讨table排序和分页的实现机制及其重要性。 一、Table排序 Table排序允许用户根据某一列的数据对整个表格进行升序或降序排列。这个功能对于数据...
在UiPath中,数据表通常以DataTable的形式存在,它是一种可以存储多行多列数据的数据结构。排序操作允许我们按照一列或多列的值对这些数据进行升序或降序排列,以便更好地分析或处理数据。 在UiPath Studio中,有...
在JavaScript的世界里,Table排序是一种常见的需求,尤其是在网页开发中,我们经常需要对HTML表格的数据进行动态排序,以便用户能够方便地浏览和分析信息。"SortTable.js"这个文件就是为了实现这一功能而设计的,它...
首先,**无限滚动**是提高用户体验的一种常见技术,特别是在处理大量数据时。在`el-table`中,我们可以利用`v-loading`指令配合`lazy`属性来实现。`lazy`属性使得表格在滚动到可视区域底部时才加载更多数据。你需要...
总的来说,掌握表格排序不仅可以提升Web应用的用户体验,也是对前端开发者基础技能的一种检验。通过实践这个源码,你可以深入了解JavaScript与DOM的交互,以及如何利用JavaScript实现动态效果,这对提升个人编程能力...
在IT行业中,JavaScript是一种广泛使用的前端编程语言,用于创建交互式的网页应用。在这个场景中,我们关注的是一个名为"Blue Table"的JavaScript表格插件,它提供了表格数据的排序功能,以及选择行的能力。这个插件...
一种优化方式是使用原地排序(in-place sorting),即在不改变数据源的情况下更新表格显示。另一种方法是使用虚拟DOM或Web组件来减少DOM操作。 ### 6. 注意事项 - 如果表格数据是动态加载的,确保在数据加载完成后...
ALV(Application List Viewer)Grid Control是一种在SAP中展示大量数据的有效方式,它可以动态生成表格,支持排序、过滤等功能,非常适合用于显示查询结果。 ### 4. SAP Query SAP Query是一种基于ABAP的工具,...