本机浏览器中对的表格数据进行排序

在Web应用中,数据从服务器端返回到客户端,以表格形式表现出来。如果要对数据集按指定的列排序显示,常规做法都是向服务器发出请求,服务器端程序重新从数据库中取出按指定列排序的数据,返回给客户端,页面重新显示排序后数据。
采用这种方式有如下缺点:
1- 响应时间延迟,每次排序都要向服务器端发送请求,等待结果返回,同时增加网络负载。
2- 编程复杂,可维护性差,而且客户端和服务器端代码耦合度很高,客户端和服务器端都要处理排序涉及的列名、排序方式,如果有分页和查询条件,都需要在客户端页面中保留,排序请求时重新传递到服务器端,当参数数量很多时极易出错。
3- 重用度很低,针对不同表格,很难抽象出一个公共程序来共用,需要逐个编写代码实现,增加工作量。
现在换一个角度考虑,数据既然已下载到了客户端,在重新排序时没有必要再重服务器端获取,只要对浏览器中的数据重新排序显示就可以了。要实现该目标,需要做到以下几点:
1 - 获得表格中要排序的数据,将其放入一个2维数组中。
2 - 对2维数组排序。
3 - 用排序后的数据重新更新表格。
利用浏览器支持的DOM(Document Object Model)和JavaScript即可实现上述目标。
通常页面中会很多的
< table > ,要获得需要排序数据所在的table,需要在 < table > 中增加一个id属性,便于document对象用getElementById得到该表格对象,例如要排序的表格定义如下:
< table  id ="st"   >
     
< tr >
         
< td > 1 </ td >
         
< td > 2 </ td >
     
</ tr >
</ table >
在javascript中,用var objTable = document.getElementById("st")就可得到表格对象,该对象在DOM中定义为一个Element。
然后用 var objRows = objTable.getElementsByTagName("tr")得到该表格中全部的行对象,ObjRows.length返回该表格行数;var rowi = objRows[i].getElementsByTagName("td")得到第i行的全部
< td > 节点,i从0开始计数,rowi.item(j)则可得到第i行,第j列的节点,该节点的innerHTML为该节点 < td ></ td > 之间的内容。
获取表格数据到2维数组的代码见源代码,此处略。
下面说明在javascript中2维数组的构造和排序。
javascript不支持2维数组,因此需要用数组的数组来模拟一个2维数组,其方法是先定义一个1维数组,元素个数为2维数组的行数,然后对每个元素赋一个值,值为一个数组,其元素个数为2维数组的列数。构造代码如下:
var rows = new Array(R);   //R为行数
for(var i = 0; i 
<  rows .length; i++){
     rows[i] 
= new  Array(C);     //C为列数
}
利用javascript中的Array.sort(comparer)对rows中的元素排序,比较方式由重新定义的比较函数得到。要根据第j列元素的大小排序,只要定义如下函数即可:
function compareCol(a,b){
    
     if (a[j] < b[j])
         return -1;
     if (a[j] 
>  b[j])
         return 1;
    return 0;
}
因为compareCol只能有两个参数,因此j要定义为全局变量。
用rows.sort(compareCol)就可实现根据j列值的大小对行进行排序。根据javascript文档,字符串比较大小是按照其Unicode编码的大小来比较,对英文排序没有问题,对中文排序时就不是按通常的拼音排序,那需要javascript提供本地化支持,目前没有发现javascript此功能。该功能在java中可用java.text.Collator实现。
以上介绍了在本地对浏览器中的数据进行排序的主要思想,为方便使用,将这些功能进行了封装,以javascript函数的提供,存放在sorttable.js文件中,在需要的页面中用
< script  type =text/javascript  src ='sorttable.js' ></ script > 引入。
下面说明排序函数原型和使用方法。
函数1 function sortTable(tableId,sortCol,compareType)
对页面中指定表格中的数据进行排序,通常第一行为标题行,排序时从第二行开始,第一次调用为升序排列,第二次为降序排列,依次轮换。
tableId     为
< table  id ='' > 中id的值,在同一个页面中要唯一。
sortCol     排序时用来比较大小的数据所在的列,从1开始计数。
compareType 排序时比较大小的方式,s-按字符串比较大小,n-按数字比较大小。
函数2 function sortTableInRange(tableId,sortCol,compareType,startRow,endRow,startCol,endCol)
         对表格中指定的区域数据排序,有时数据第一列为流水号,最后一行为合计,这些数据不需要参与排序,可用此函数来对部分数据排序。
         
         tableId     为
< table  id ='' > 中id的值,在同一个页面中要唯一。
         sortCol     排序时用来比较大小的数据所在的列,从1开始计数。
         compareType 排序时比较大小的方式,s-按字符串比较大小,n-按数字比较大小。
         startRow,endRow 要排序区域开始和结束行号,从1开始计数。例如对第2行到第7行排序,startRow=2,endRow=7
         startCol,endCol   要排序区域开始和结束列号,从1开始计数。
  
存在的问题:
1- 中文不能按拼音排序。
要注意的问题:
要排序的table必须用ID标示,并要作为参数传给排序函数,表格中的数据应该是可以排序的,否则结果不可预知;要排序的表格不能有嵌套表,否则排序出错。
本函数已在IE6.0 ,FireFox1.01中运行通过。源代码和例子代码见后。
参考资料:
Danny Goodman with Michael Morrison    JavaScript Bible 5th   ,John Wiley and Sons   2004
David Flanagan   JavaScript The Definitive Guide 4th ,   O'Reilly   2001
附源代码:要运行例子,需要将javascript代码保存到sorttable.js文件中,html部分代码保存到同一目录下另一文件中即可。
sorttable.js
//=========================================================
//
//   在本机对浏览器页面表格中的数据行进行排序的javascript函数
//  
//   author William   QQ: 22967225 
//   create date 2005-12-2
//   version 1.0
//=========================================================

//column index for sort
var indexCol;
//比较函数,用于Array.sort()排序时比较用。
//本函数比较数组元素array1[indexCol]和元素array2[indexCol]Unicode值的大小
function arrayCompare(array1,array2){
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面是一个在浏览器使用vue-datatables的表格模板,包含了常用的功能: 首先,需要在html文件引入必要的依赖: ``` <!-- 引入Vue.js --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- 引入vue-datatables --> <script src="https://cdn.jsdelivr.net/npm/vue-data-tables/dist/data-tables.js"></script> <!-- 引入CSS文件 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue-data-tables/dist/vue-data-tables.css"> ``` 然后,在html文件添加表格模板: ``` <div id="app"> <data-tables :data="tableData" :columns="tableColumns" :options="tableOptions"></data-tables> </div> ``` 接着,在script标签定义Vue实例: ``` <script> new Vue({ el: '#app', data: { tableData: [{ id: 1, name: 'John Doe', age: 35, email: 'john.doe@example.com' },{ id: 2, name: 'Jane Smith', age: 27, email: 'jane.smith@example.com' }], tableColumns: [{ label: 'ID', field: 'id' },{ label: 'Name', field: 'name' },{ label: 'Age', field: 'age' },{ label: 'Email', field: 'email' }], tableOptions: { perPage: 10, perPageValues: [10, 25, 50, 100], pagination: { edge: true }, texts: { count: 'Showing {from} to {to} of {count} records|{count} records|One record', first: 'First', last: 'Last', filter: 'Filter:', filterPlaceholder: 'Search query', limit: 'Records:', page: 'Page:', noResults: 'No matching records', filterBy: 'Filter by {column}', loading: 'Loading...' } } } }); </script> ``` 在这个模板,我们定义了一个Vue实例,并且传入了三个属性: - `data`:表格数据,可以是数组或者一个函数,返回一个Promise。 - `columns`:表格列信息,包含每一列的标签和字段名。 - `options`:表格选项,可以设置每页显示的记录数、分页选项等。 这个模板表格包含了分页、排序、搜索等常用功能。当然,vue-data-tables还有很多其他的功能,你可以根据自己的需求进行配置和使用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值