首页 / JQUERY / 基于jquery的表格排序

基于jquery的表格排序

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了基于jquery的表格排序，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含13590字，纯文字阅读大概需要20分钟。

内容图文

很多高手也位jquery写了专门的排序库，因为自己也想尝试一下，
当然运行速度实在不能接受，但是我会慢慢的把他改进的。
注：这里只是拿出了一部分代码来，查看演示demo
文档载入后给'th'添加click事件。
1.
$('th').click(function(){
var date1=(new Date()).getTime()
var dataType=$(this).attr('dataType');
找到点击对象的自定义属性dataType，当然这个不符合W3C的标准是无法通过检验的，也可以用ID或者class来定义，但是我觉得这样直观点在Transitional模式下也可以正常解读.
2.
var index=$('th').index(this)+1;
找到被点击对象在文档中的位置加上1,加1是为了给所对应的列的td添加样式才做的。
因为用:eq()只能得到td的全文档位置，而用：nth-child()的话得到的是每个td在自己的父元素里面的序列位置。
3.
var row=$('tbody tr');
将tbody里所有tr存到变量row.
4.
$.each(row,function(i){ arr[i]=row[i] })
遍历所有行讲它插入arr数组.

5.if($(this).hasClass('select')){arr.reverse()}
如果这个'th'被点击过那么它将会被添加select样式，如果是这样直接将原来的arr数组反向。
6.
else {
arr.sort(sortStr(index,dataType))
$('.select').removeClass();
$('td:nth-child('+index+')').addClass('select');
$(this).addClass('select')
}
否则，将arr用sort()方法进行排序sort()方式可以接受1个函数，这个函数接受2个参数作为需要比较的数据，我在这里定义为
sortStr();
它有两个参数:
代码如下:


function sortStr(index,dataType){ 
return function(a,b){ 
var aText=$(a).find('td:nth-child('+index+')').text(); 
var bText=$(b).find('td:nth-child('+index+')').text(); 

if(dataType!='roomType'){ 
aText=Parse(aText,dataType) 
bText=Parse(bText,dataType) 
return aText>;bText?-1:bText>;aText?1:0; 

} 
else return aText.localeCompare(bText) 
} 
} 
 

第一个是index，它是在click事件中获得的变量，这个变量包含了被点击的那个'th'的在文档中的位置是一个数字， 
jquert的index()方法获得对象的位置，这个位置从0算起，这个例子中有6个'th'； 

第二个参数是dataType,他包含每个'th'的属性值。 

sortStr()里面包含了一个比较的函数，这个函数是匿名函数，它有2个参数每个参数代表着一个'tbody tr'，（在这里a和b代表需要比较的tr）这两个参数是在包含他的函数环境中获取的，sort()方法里面的参数，在这是一个函数，这个函数都会获得数组对象的元素， 
这个匿名函数返回对操作数组的引用。 
arr里面包含的一个数组，每个数组的值包含对tbody里面的tr的引用，排序函数按照返回的值对原有数组里面的元素直接进行位置的改变， 

var aText=$(a).find('td:nth-child('+index+')').text(); 
获取需要比较的行里面其中一个td里面包含的文本这个就是需要比较的值， 
click事件中得到的index变量成为参数传递到这里就是为了得到th所对应的td的位置； 
 代码如下:
if(dataType!='roomType'){ 
aText=Parse(aText,dataType) 
bText=Parse(bText,dataType) 
return aText>;bText?-1:bText>;aText?1:0; 
} 
 
如果需要排序的类型是不包含了数字和字母的话，（因为拥有roomType值的元素所包含了数字和字母），将获得的td里面的文本值和dataType传递到 
Parse()里面进行转换， 
 代码如下:
function Parse(data,dataType){ 
switch(dataType){ 
case 'num': 
return parseFloat(data)||0 
case 'date': 
return Date.parse(data)||0 
default : 
return splitStr(data) 
} 
} 
 
如果是数字类型直接转换为浮点数， 

return parseFloat(data)||0 
要是出现了布恩那个转换的对象字符串那么返回0；因为这个文档里面有一个NaN这个是无法转换的，所以返回的是0； 

如果是日期类型可以用Date.parse直接转换为数字，这个转换是从1970年到转换参数的时间， 
这个时间转换我试了试可以精确到秒的，比如说1971/01/2 18:12:20、01/2/1970 18:12:20写法都可以转换; 
之后 

return aText>;bText?-1:bText>;aText?1:0; 
返回比较值aText比bText大返回一个小于0的任何数字都可以，相反返回一个正数，如果都不是的话返回0；如果不是日期也不是数字（在这个文档中目前只能转换3中数据：1.日期。2.数字。3.字符串和数字一起的）, 
default : 
return splitStr(data) 
我把他放到splitStr()里面进行转换 

splitStr()的内容如下： 
 代码如下:
function splitStr(data){ 
var re=/^[\$a-zA-z\u4e00-\u9fa5 ]*(.*?)[a-zA-z\u4e00-\u9fa5 ]*$/ 
data=data.replace(re,'$1') 
return parseFloat(data) 
} 
 
正则表达式：分为三部分 1部分^[a-zA-Z ]*;中间部分(.*?);结尾部分[a-zA-Z ]*$ 
可以这样看/ /是包含块 ， 
第一部分 ^表示目标字符串开头，[]之间表示A-Z无论大小写都被忽略掉，里面还有个空格，*表示它左边[]里面的内容可以出现任意次数; 
中间部分 ()是个分组 ，分组内容会被放置到RegExp的第一项中'$1′，'.'匹配所有（除了空格）*?懒惰方式; 
最后部分 []之间与后面的*和第一部分是一样的都是去掉字母，$表示结尾部分； 
\$表示匹配$号 
 代码如下:
function sortStr(index,dataType){ 
return function(a,b){ 
var aText=$(a).find('td:nth-child('+index+')').text(); 
var bText=$(b).find('td:nth-child('+index+')').text(); 
if(dataType!='roomType'){ 
aText=Parse(aText,dataType) 
bText=Parse(bText,dataType) 
return aText>;bText?-1:bText>;aText?1:0; 
} 
else return aText.localeCompare(bText) 
} 
} 
 
否则 直接使用localeCompare进行比较，这个是专门对字符串进行比较的方法，如:字符串'a'比字符串'b'排在26的单词的前面;返回的依然是大于0的数，负数和0； 

代码最开头部分的 new Date和结束部分的new Date是计算表格排序时间的，这个时间会在最中间那个'th'的'span'标记里面显示出来，这样是为了测试整个表格排序从排序开始到排序结束所花费的时间。 

完整的代码:
 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>表格排序</title> 
<script src="../jquery1.2.6.min.js"></script> 
<script language="javascript" type="text/javascript"> 

$(function(){ 
$('th').click(function(){ 
var date1=(new Date()).getTime() 
var dataType=$(this).attr('dataType'); 
var index=$('th').index(this)+1; 
var arr=[]; 
var row=$('tbody tr'); 
$.each(row,function(i){ arr[i]=row[i] }) 
if($(this).hasClass('select')){ 
arr.reverse() 
} 
else { 
arr.sort(sortStr(index,dataType)) 
$('.select').removeClass(); 
$('td:nth-child('+index+')').addClass('select'); 
$(this).addClass('select') 
} 
var fragment=document.createDocumentFragment() 
$.each(arr,function(i){ 
fragment.appendChild(arr[i]) 
}) 
// $('tbody').remove(); 
//$('table').append('<tbody></tbody>') 
//Each(arr,function(o){fragment.appendChild(o)}) 
$('tbody').append(fragment) 
var date2=(new Date()).getTime() 
$('th span').text(date2-date1) 
}) 
}) 

function sortStr(index,dataType){ 
return function(a,b){ 
var aText=$(a).find('td:nth-child('+index+')').text(); 
var bText=$(b).find('td:nth-child('+index+')').text(); 

if(dataType!='roomType'){ 
aText=Parse(aText,dataType) 
bText=Parse(bText,dataType) 
return aText>bText?-1:bText>aText?1:0; 
} 
else return aText.localeCompare(bText) 
} 
} 
function Parse(data,dataType){ 
switch(dataType){ 
case 'num': 
return parseFloat(data)||0 
case 'date': 
return Date.parse(data)||0 
default : 
return splitStr(data) 
} 
} 
function splitStr(data){ 
var re=/^[\$a-zA-z\u4e00-\u9fa5 ]*(.*?)[a-zA-z\u4e00-\u9fa5 ]*$/ 
data=data.replace(re,'$1') 
return parseFloat(data) 
} 

//web开发交流blog 文档来源 www.mymickey.org 作者 mickey 
//转载请注明来源 
</script> 
<style type="text/css"> 
table { 
text-align:center; 
border:1px #ccc solid; 
border-collapse:collapse; 
width:700px; 
font-size:12px; 
font-family:Arial, Helvetica, sans-serif; 
color:#666; 
} 
tr { 
border-bottom:1px #ccc solid; 
} 
td { 
padding:.3em 0 .3em 0; 
} 
th { 
cursor:pointer; 
background:url(room-bg.gif) 0 -13px repeat-x; 
height:30px; 
color:#009; 
} 
td.select { 
color:#000; 
} 
th.select { 
background-image:none; 
background-color:#C4D5D9; 
} 
span { 
} 
</style> 
</head> 
<body> 
<a href="http://www.mymickey.org" style="font-size:14px; color:#F60">返回文章</a> 

<table> 
<thead> 
<tr> 
<th dataType="roomNum">房号</th> 
<th dataType="date">日期</th> 
<th dataType="roomType">房间类型<span></span></th> 
<th dataType="num">床位</th> 
<th dataType="container">容量</th> 
<th dataType="Float">价格/晚</th> 
<th dataType="Float">合计</th> 
</tr> 
</thead> 
<tbody> 
<tr > 
<td>u0628</td> 
<td >9/14/2008</td> 
<td >Std Hotel Room 2 Double (27 left)</td> 
<td >2</td> 
<td >4 人</td> 
<td >$109.00</td> 
<td>$436.00</td> 
</tr> 
<tr > 
<td>u0631</td> 
<td >10/4/2008</td> 
<td >Lodge Rm/Shared Bath Q (4 left)</td> 
<td >1</td> 
<td >2 人</td> 
<td >$109.00</td> 
<td>$436.00</td> 
</tr> 
<tr > 
<td >u0636</td> 
<td >9/18/2008</td> 
<td >Std Hotel Room Q (34 left)</td> 
<td >1</td> 
<td >2 人</td> 
<td >$117.00</td> 
<td >$466.00</td> 
</tr> 
<tr > 
<td>u0638</td> 
<td >9/19/2008</td> 
<td >Std Hotel Room 2 Q (28 left)</td> 
<td >2</td> 
<td >4 人</td> 
<td >$117.00</td> 
<td>$466.00</td> 
</tr> 
<tr > 
<td>u0612</td> 
<td >9/1/2008</td> 
<td >Studio Condo (10 left)</td> 
<td >1</td> 
<td >4 人</td> 
<td >$149.00</td> 
<td>$596.00</td> 
</tr> 
<tr > 
<td>u0626</td> 
<td >9/13/2008</td> 
<td >Hotel Jr Suite K (4 left)</td> 
<td >1</td> 
<td >2 人</td> 
<td >$149.00</td> 
<td>$596.00</td> 
</tr> 
<tr > 
<td>u0641</td> 
<td >9/22/2008</td> 
<td >Hotel Superior K (26 left)</td> 
<td >1</td> 
<td >2 人</td> 
<td >$149.00</td> 
<td>$596.00</td> 
</tr> 
<tr > 
<td>u0602</td> 
<td >8/31/2008</td> 
<td >1 Bdrm Condo K (96 left)</td> 
<td >1</td> 
<td >4 人</td> 
<td >$169.00</td> 
<td>$676.00</td> 
</tr> 
<tr > 
<td>u0616</td> 
<td >10/8/2008</td> 
<td >Studio Condo Murphy (5 left)</td> 
<td >NaN</td> 
<td >4 人</td> 
<td >$169.00</td> 
<td>$676.00</td> 
</tr> 
<tr > 
<td>u0623</td> 
<td >10/2/2008</td> 
<td >Studio Cabin Q (6 left)</td> 
<td >1</td> 
<td >2 人</td> 
<td >$169.00</td> 
<td>$676.00</td> 
</tr> 
<tr > 
<td>u0633</td> 
<td >9/16/2008</td> 
<td >Studio Q/Murphy (6 left)</td> 
<td >2</td> 
<td >4 人</td> 
<td >$169.00</td> 
<td>$676.00</td> 
</tr> 
<tr > 
<td>u0637</td> 
<td >10/5/2008</td> 
<td >Lodge Room Q (4 left)</td> 
<td >1</td> 
<td >2 人</td> 
<td >$169.00</td> 
<td>$676.00</td> 
</tr> 
<tr > 
<td>u0622</td> 
<td >9/11/2008</td> 
<td >Hotel Loft Ste K/Q (3 left)</td> 
<td >2</td> 
<td >4 人</td> 
<td >$179.00</td> 
<td>$716.00</td> 
</tr> 
<tr > 
<td>u0629</td> 
<td >10/10/2008</td> 
<td >1 Bdrm Condo K (76 left)</td> 
<td >1</td> 
<td >4 人</td> 
<td >$179.00</td> 
<td>$716.00</td> 
</tr> 
<tr > 
<td>u0603</td> 
<td >9/8/2008</td> 
<td >Hotel Loft K/Q (16 left)</td> 
<td >2</td> 
<td >4 人</td> 
<td >$189.00</td> 
<td>$756.00</td> 
</tr> 
<tr > 
<td>u0632</td> 
<td >9/15/2008</td> 
<td >Hotel Loft K/2T (15 left)</td> 
<td >3</td> 
<td >4 人</td> 
<td >$189.00</td> 
<td>$756.00</td> 
</tr> 
<tr > 
<td>u0619</td> 
<td >10/1/2008</td> 
<td >Studio Cabin Firepl K (6 left)</td> 
<td >1</td> 
<td >2 人</td> 
<td >$209.00</td> 
<td>$836.00</td> 
</tr> 
<tr > 
<td>u0608</td> 
<td >10/7/2008</td> 
<td >1 Bdrm Condo with Den K (1 left)</td> 
<td >1</td> 
<td >6 人</td> 
<td >$222.00</td> 
<td>$886.00</td> 
</tr> 
<tr > 
<td>u0620</td> 
<td >9/5/2008</td> 
<td >2 Bdrm Condo K/K (25 left)</td> 
<td >2</td> 
<td >6 人</td> 
<td >$229.00</td> 
<td>$916.00</td> 
</tr> 
<tr > 
<td>u0630</td> 
<td >9/7/2008</td> 
<td >2 Bdrm Condo K/2T (57 left)</td> 
<td >3</td> 
<td >6 人</td> 
<td >$229.00</td> 
<td>$916.00</td> 
</tr> 
<tr > 
<td>u0634</td> 
<td >10/11/2008</td> 
<td >2 Bdrm Condo K/Q (88 left)</td> 
<td>2</td> 
<td>6 人</td> 
<td>$229.00</td> 
<td>$916.00</td> 
</tr> 
<tr > 
<td>u0639</td> 
<td >9/20/2008</td> 
<td >1 Bdrm K/Murphy (19 left)</td> 
<td >2</td> 
<td >4 人</td> 
<td >$229.00</td> 
<td>$916.00</td> 
</tr> 
<tr > 
<td>u0614</td> 
<td >9/2/2008</td> 
<td >2 Bdrm Townhome (7 left)</td> 
<td >2</td> 
<td >4 人</td> 
<td >$239.00</td> 
<td>$956.00</td> 
</tr> 
<tr > 
<td>u0610</td> 
<td >9/10/2008</td> 
<td >1 Bdrm Loft K/Q+2T/Murphy (5 left)</td> 
<td >5</td> 
<td >8 人</td> 
<td >$269.00</td> 
<td>$1076.00</td> 
</tr> 
<tr > 
<td>u0625</td> 
<td >9/12/2008</td> 
<td >2 Bdrm K/Q/Murphy (6 left)</td> 
<td >3</td> 
<td >6 人</td> 
<td >$269.00</td> 
<td>$1076.00</td> 
</tr> 
<tr > 
<td>u0640</td> 
<td >9/21/2008</td> 
<td >Exec. 2 Bdrm K/2Q/Murphy (2 left)</td> 
<td >4</td> 
<td >8 人</td> 
<td >$269.00</td> 
<td>$1076.00</td> 
</tr> 
<tr > 
<td>u0606</td> 
<td >9/26/2008</td> 
<td >2 Bdrm Cabin K/Q+T (2 left)</td> 
<td >3</td> 
<td >5 人</td> 
<td >$279.00</td> 
<td>$1116.00</td> 
</tr> 
<tr > 
<td>u0613</td> 
<td >9/29/2008</td> 
<td >Lodge 2 Bdrm Suite Q/Q (1 left)</td> 
<td >2</td> 
<td >4 人</td> 
<td >$279.00</td> 
<td>$1116.00</td> 
</tr> 
<tr > 
<td>u0624</td> 
<td >10/3/2008</td> 
<td >1 Bdrm Cabin Firepl K (3 left)</td> 
<td >1</td> 
<td >4 人</td> 
<td >$279.00</td> 
<td>$1116.00</td> 
</tr> 
<tr > 
<td>u0618</td> 
<td >9/4/2008</td> 
<td >2 Bdrm Condo w/Den Custom (1 left)</td> 
<td >2</td> 
<td >6 人</td> 
<td >$329.00</td> 
<td>$1316.00</td> 
</tr> 
<tr > 
<td>u0627</td> 
<td >10/9/2008</td> 
<td >3 Bdrm Condo K/Q/Q (6 left)</td> 
<td >3</td> 
<td >8 人</td> 
<td >$339.00</td> 
<td>$1356.00</td> 
</tr> 
<tr > 
<td>u0642</td> 
<td >9/23/2008</td> 
<td >2 Bdrm Cabin Firepl K/Q+T (1 left)</td> 
<td >3</td> 
<td >7 人</td> 
<td >$339.00</td> 
<td>$1356.00</td> 
</tr> 
<tr > 
<td>u0615</td> 
<td >9/3/2008</td> 
<td >3 Bdrm Condo K/Q/2T (2 left)</td> 
<td >4</td> 
<td >8 人</td> 
<td >$379.00</td> 
<td>$1516.00</td> 
</tr> 
<tr > 
<td>u0607</td> 
<td >9/9/2008</td> 
<td >2 Bdrm. Loft K/Q/Q,3T/SS (9 left)</td> 
<td >6</td> 
<td >11 人</td> 
<td >$389.00</td> 
<td>$1556.00</td> 
</tr> 
<tr > 
<td>u0609</td> 
<td >9/27/2008</td> 
<td >Dlx 1 Bdrm Cabin Firepl K (3 left)</td> 
<td >1</td> 
<td >4 人</td> 
<td >$389.00</td> 
<td>$1556.00</td> 
</tr> 
<tr > 
<td>u0635</td> 
<td >9/17/2008</td> 
<td >Exec 2 Bdrm Lft K/K/2Q/SS (1 left)</td> 
<td >4</td> 
<td >10 人</td> 
<td >$399.00</td> 
<td>$1596.00</td> 
</tr> 
<tr > 
<td>u0621</td> 
<td >9/6/2008</td> 
<td >3 Bdrm Townhome (3 left)</td> 
<td >3</td> 
<td >6 人</td> 
<td >$409.00</td> 
<td>$1636.00</td> 
</tr> 
<tr > 
<td>u0601</td> 
<td >9/24/2008</td> 
<td >3 Bdrm Cabin K/Q+T/2T (1 left)</td> 
<td >5</td> 
<td >9 人</td> 
<td >$469.00</td> 
<td>$1876.00</td> 
</tr> 
<tr > 
<td>u0605</td> 
<td >9/25/2008</td> 
<td >Dlx 1Bd Loft,K,Q/T firepl (1 left)</td> 
<td >3</td> 
<td >6 人</td> 
<td >$469.00</td> 
<td>$1876.00</td> 
</tr> 
<tr > 
<td>u0611</td> 
<td >9/28/2008</td> 
<td >Dlx 2 Bdm Cbn Firepl K/2T (3 left)</td> 
<td >2</td> 
<td >6 人</td> 
<td >$469.00</td> 
<td>$1876.00</td> 
</tr> 
<tr > 
<td>u0604</td> 
<td >10/6/2008</td> 
<td >Deluxe 3 Bdrm Condo K/Q/Q (2 left)</td> 
<td >3</td> 
<td >8 人</td> 
<td >$499.00</td> 
<td>$1996.00</td> 
</tr> 
<tr > 
<td>u0617</td> 
<td >9/30/2008</td> 
<td >Dlx3Bdm/2Bth/FP/K/QT/QT (1 left)</td> 
<td >5</td> 
<td >8 人</td> 
<td >$549.00</td> 
<td>$2196.00</td> 
</tr> 
</tbody> 
</table> 
</body> 
</html>

内容总结

以上是互联网集市为您收集整理的基于jquery的表格排序全部内容，希望文章能够帮你解决基于jquery的表格排序所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/370524.html

来源：【匿名】

【上一篇】(jQuery,mootools,dojo)使用适合自己的编程别名命名【下一篇】学习php+jQuery+Ajax实现点赞效果的方法

更多 ►

【基于jquery的表格排序】教程文章相关的互联网学习教程文章

[jQuery编程挑战]004 针对选择框词典式排序【代码】

<!DOCTYPE html><html lang="zh"><head><meta charset="utf-8"/><title>针对选择框词典式排序</title><script type="text/javascript" src="../js/jquery-1.11.0.js"></script><script type="text/javascript">$(function() {/*$(‘button‘).click(function() {var options = $(‘option‘);for (var i = 1; i < options.length; i++) {for (var j = 0; j < i; j++) {var currOption = $(options.get(i)),loopOption = $(options....

js一个区域拖拽到另一个区域，拖拽后还可以排序。知识点：js插件Jquery-UI：拖拽组件draggable，放置组件droppable，排序组件sortable【代码】【图】

技术点：js插件Jquery-UI：拖拽组件draggable，放置组件droppable，排序组件sortable。所以得引入相关的文件，我这就不写了。　　　　拖拽组件draggable知识点可以参考：https://www.cnblogs.com/goforf/p/4244149.html　　　　放置组件droppable知识点可以参考：https://blog.csdn.net/weixin_33795806/article/details/91765375　　　　放置组件sortable知识点可以参考：https://www.cnblogs.com/neil120/p/6094618.html思路：通...

jQuery对Table一个字段排序【代码】【图】

最近做一个机票的系统，要对航班信息进行排序，所以整理了一下，把排序的方法写下来。首先table的结构大概如下最后显示的样式为首先在每一个tr上加一个自定义属性：data-sort-field-ftime，对应的值就是起飞时间去掉":"后的一个字符串这样，我们在排序的时候，只要将每个tr的data-sort-field-ftime的值，parseInt后，然后冒泡排序，就可以实现我要的效果。给排序按钮加一个自定义属性：data-sort-type，值为"none"、"asc"、"desc"3...

JQuery Option 排序【代码】

jQuery图片列表拖拽排序布局【图】

在线演示本地下载原文：https://www.cnblogs.com/qixidi/p/10058035.html

javascript-jQuery可排序问题=未捕获的TypeError：未定义不是函数【代码】

(现在更具体地重写问题) 创建手动“ li”项目时,我有一个可排序的列表,可以很好地工作.然后,我停止手动创建项目,因为它们应该来自服务器端.但是,一旦我开始通过jquery填充li项目,排序功能便停止工作.<section><div class="taskcontainer"><h1>alpha</h1><ul id="sortable1" class="connected sortable list"> </ul></div> </section><script> $('.so...

关于PHP+jQuery-ui拖动浮动层排序并保存到数据库实例【代码】【图】

PHP+jQuery-ui实现的拖动浮动层排序布局并将拖动后的浮动层位置排序结果保存到数据库实例。首先引入jQuery库和jquery-ui.min.js,接着放置一个拖动时的加载图片，和从数据库读取出来的多个模块拖动层.modules，及#orderlist用于记录模块的排序值。<script type="text/javascript" src="jquery.js"></script> <script type=text/javascript src=js/jquery-ui.min.js></script> <div id="loader"></div> <div id="module_list"> ...

jQuery表格排序插件Tablesorter，请问没有效果的原因是什么？

Last Name First Name Email Due Web Site Smith John jsmith@gmail.com $50.00 http://www.jsmith.com Bach Frank fbach@yahoo.com $50.00 http://www.frank.com Doe Jason jdoe@hotmail.com $100.00 http://www.jdoe.com Conway ...

jQuery实现自由拖拽与排序元素的代码【图】

通过元素的上下移动虽然能够实现排序，但是不够灵活，比较僵硬，不能够快速达到我们想要排序的目的。下面我们讲解想如何实现快速的拖拽到自己想要的排序的位置。首先我们要引入一款插件gridly.js，用来实现元素拖拽。 <script src="js/jquery.min.js" type="text/javascript"></script><script src="js/jquery.gridly.js" type="text/javascript"></script><link href="css/jquery.gridly.css" rel="stylesheet" type="text/css" ...

jQuery+ajax读取json并排序

这次给大家带来jQuery+ajax读取json并排序，jQuery+ajax读取json并排序的注意事项有哪些，下面就是实战案例，一起来看一下。<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title></title><script src="jquery-1.9.1.js"></script><script>$.ajax({url: data.json,//获取本地json数据，在同文件夹下type: "get",success: function(resp) {console.log(resp); //原始数据var data = resp;//原生javascript sort() 方法data.d...

jQuery+ajax读取json数据并按照价格排序示例

这篇文章主要介绍了jQuery+ajax读取json数据并按照价格排序,涉及jQuery基于ajax动态获取json文件数据并进行数据遍历与排序的相关操作技巧,需要的朋友可以参考下本文实例讲述了jQuery+ajax读取json数据并按照价格排序。分享给大家供大家参考，具体如下：<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title></title><script src="jquery-1.9.1.js"></script><script>$.ajax({url: data.json,//获取本地json数据，在同文件夹...

jQuery+ajax读取json并排序方法详解

这次给大家带来jQuery+ajax读取json并排序方法详解，jQuery+ajax读取json并排序的注意事项有哪些，下面就是实战案例，一起来看一下。<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title></title><script src="jquery-1.9.1.js"></script><script>$.ajax({url: data.json,//获取本地json数据，在同文件夹下type: "get",success: function(resp) {console.log(resp); //原始数据var data = resp;//原生javascript sort() 方...

jQuery读取json数据并排序

这次给大家带来jQuery读取json数据并排序，jQuery读取json数据并排序的注意事项有哪些，下面就是实战案例，一起来看一下。<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title></title><script src="jquery-1.9.1.js"></script><script>$.ajax({url: data.json,//获取本地json数据，在同文件夹下type: "get",success: function(resp) {console.log(resp); //原始数据var data = resp;//原生javascript sort() 方法data.dat...

jQuery实现某门户网站导航页图片拖动排序【图】

这次给大家带来jQuery实现某门户网站导航页图片拖动排序，jQuery实现某门户网站导航页图片拖动排序的注意事项有哪些，下面就是实战案例，一起来看一下。小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。为大家分享的360导航页图标拖动排序效果代码如下<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/199...

jquery实现表格分页与排序【图】

这次给大家带来jquery实现表格分页与排序，jquery实现表格分页与排序的注意事项有哪些，下面就是实战案例，一起来看一下。用jQuery的扩展来实现的表格分页和排序，使用这个扩展必须加上表头<thead>和<tbody>标签，因为我是通过<tbody>来进行分页的，要是不加thead，那么表头也要作为分页计算时的一个行了。<script language=" javascript " type="text/javascript"> $("#myTable").tablePaging({ pageSize: 5, sorting: true, so...

JQUERY - 技术教程分类

jQuery 教程 jQuery 简介 jQuery 安装 jQuery 语法 jQuery 选择器 jQuery 事件 jQuery 隐藏/显示 jQuery 淡入淡出 jQuery 滑动 jQuery 动画 jQuery 停止动画 jQuery Callback jQuery 链 jQuery 捕获 jQuery 设置 jQuery 添加元素 jQuery 删除元素 jQuery CSS 类 jQuery css() 方法 jQuery 尺寸 jQuery 遍历 jQuery 祖先 jQuery 后代 jQuery 同胞 jQuery 过滤 jQuery AJAX 简介 jQuery load() 方法 jQuery get()/post() 方法 jQuery noConflict() 方法 jQuery JSONP jQuery 实例 jQuery 选择器 jQuery 事件方法 jQuery 效果方法 jQuery HTML / CSS 方法 jQuery 遍历方法 jQuery AJAX 方法 jQuery 杂项方法 jQuery 属性 jQuery Validate jQuery Cookie jQuery Accordion jQuery Autocomplete jQuery Growl jQuery 密码验证 jQuery Tooltip jQuery Treeview jquery 全部

JQUERY - 最热教程

javascript中html字符串转化为jquerydo...js批量设置元素样式和封装似于jquery的...使用jquery获取url及url参数的方法 jQuery取消ajax请求的方法 jquery中根据获取元素的6种方法总结如何通过jQuery添加新的内容 jQuery和ajax实现鼠标单击修改内容的方...基于JSON格式数据的简单jQuery幻灯片插...jquery设置内联样式css()js调用iframe实现打印页面内容的方法_j...

首页 / JQUERY / 基于jquery的表格排序

基于jquery的表格排序

内容导读

内容图文

内容总结

内容备注

内容手机端

【基于jquery的表格排序】教程文章相关的互联网学习教程文章

[jQuery编程挑战]004 针对选择框词典式排序【代码】

js一个区域拖拽到另一个区域，拖拽后还可以排序。知识点：js插件Jquery-UI：拖拽组件draggable，放置组件droppable，排序组件sortable【代码】【图】

jQuery对Table一个字段排序【代码】【图】

JQuery Option 排序【代码】

jQuery图片列表拖拽排序布局【图】

javascript-jQuery可排序问题=未捕获的TypeError：未定义不是函数【代码】

关于PHP+jQuery-ui拖动浮动层排序并保存到数据库实例【代码】【图】

jQuery表格排序插件Tablesorter，请问没有效果的原因是什么？

jQuery实现自由拖拽与排序元素的代码【图】

jQuery+ajax读取json并排序

jQuery+ajax读取json数据并按照价格排序示例

jQuery+ajax读取json并排序方法详解

jQuery读取json数据并排序

jQuery实现某门户网站导航页图片拖动排序【图】

jquery实现表格分页与排序【图】

JQUERY - 相关标签

JQUERY - 技术教程分类

JQUERY - 最新教程

JQUERY - 最热教程