JS实现table表格数据排序功能(可支持动态数据+分页效果)_layui动态添加、删除表单

html表格

194 浏览量更新于2023-03-16 评论 1 收藏 49KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

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

asp.net会经常遇到分页的效果,尤其是希望实现静态的html分页排序(html分页相信大家都已经有自己的解决方案.在这里就不多

说).我写了一个简单的Demo排序.

数据就是字母和数字两组.(汉字需要找到asc码) 原理就是利用数组自带的sort排序,进行表格重组.已在.net mvc 中测试过.支持

分页.(申明一点.只对当前页面数据排序无刷新,对所有页面排序的话,肯定需要刷新.这点我还在解决中.)希望有新想法的高手们,

给下指点.

下面把下面把html的代码贴出来的代码贴出来:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HEAD><TITLE>js操作刷新</TITLE>

</HEAD>

//--------------------- 排序

//需要在排序的table上加id="tableNeed",需在排序的列上加onclick="sortt('.?')",在此列所有<td>上加class="?"

function sortt(className){

var listName=new Array();

var listNameOld=new Array();

var listTr=new Array();

var listSort=new Array();

var i=1;

var b=false;

//取得原来的<tr>,并清空<table>

$("#tableNeed tr").each(function(){

listTr.push($(this).html());

});

//得到要排列的列的元素，并在末尾追加此刻的顺序（从1开始）

$(className).each(function(){

listName.push($(this).text()+i);

listNameOld.push($(this).text()+i);

i++;

});

//将要排序的元素排序

mySort(listName);

//判断排序后元素位置是否发生变化

for(var j=0;j<listName.length;j++){

if(listName[j].substring(listName[j].length-listNameOld[j].length)!=listNameOld[j]){

b=true;

break;

}

//排序后，根据先前追加的顺序得到此时<tr>的顺序

for(var j=0;j<listName.length;j++){

listSort.push(parseInt(listName[j].substring(listName[j].length-1)));

}

$("#tableNeed").html('');

//按顺序追加<tr>，若排序后元素顺序未变化，则倒序追加

$("#tableNeed").append("<tr class='header'>"+listTr[0]+"</tr>");

if(b){

for(var j=0;j<listSort.length;j++){

$("#tableNeed").append("<tr>"+listTr[listSort[j]]+"</tr>");

}

}else{

for(var j=listSort.length-1;j>=0;j--){

$("#tableNeed").append("<tr>"+listTr[listSort[j]]+"</tr>");

}

//首先按字符个数排序，然后按相对应的字符大小排序

function mySort(list){

var len=0;

var add="";

for(var i=0;i<list.length;i++){

var str=list[i];

if(str.length>len){

len=str.length;

}

for(var i=0;i<len;i++){

add+="0"

}

for(var i=0;i<list.length;i++){

var strOne=add+list[i];

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

weixin_38680625

粉丝: 3
资源: 969

会员权益专享

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

评论0

会员权益专享

最新资源

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

评论0

js 实现 动态改变表格的行顺序

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

js对表格进行排序

springboot+layui如何实现表格分页

element-ui中关于table表格的那些骚操作(小结

ajax加载数据后表格如何分页 使用 data-table.js

vue表格数据分析插件

LAYUI数据表格 查询

el-table怎么支持大数据量渲染

html 动态 table

element 实现动态表格代码

vxe-table+tree

bootstraptable

elementui 数据表格前端增删改查及实现方式

vxe-table前后端分离

layui 数据表格 编辑内容

vue中能实现表格字段连线关系映射的插件有哪些

bootstraptable 手册_bootstrap table表格使用方法详解

会员权益专享

最新资源

js 实现动态改变表格的行顺序

ajax加载数据后表格如何分页使用 data-table.js

LAYUI数据表格查询

layui 数据表格编辑内容