正文
jquery排序,jquery排序图标的上下切换
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
jquery怎么实现正向排序反向排序
首先，我可以很负责的告诉你，jquery本身不带有排序功能，表格数据的排序则更做不到。
js中可以通过sort()函数针对ASCII进行排序，当然面对数字的时候也可以自定排序规则
sort(function(a,b){return a-b;});像这样
具体使用方法：array.sort(function(a,b){return a-b;});但是呢，像你这样的数据型表格就不行了，另外数字和中文组合的排序我也没试过
往往这种排序是通过数据库中查询语句（SQL）实现的。
就算是Jquery-easyUI的DataGrid控件也是需要通过跟后台服务器交互才能实现排序功能。
不过也不是完全不能实现，这个就要复杂一点了，思路大概是通过js获取每个格内的数值然后以json嵌套的形式形成一个二维的数组数据。然后采用轮询遍历式的算法获取最大/小值然后重写表格，比较复杂需要上代码么？
jquery list对象排序
使用SORT进行排序。
示例如下：
body
div
sort()对数组排序，不开辟新的内存，对原有数组元素进行调换
/div
div id="showBox"
1、简单数组简单排序
script type="text/javascript"
var arrSimple=new Array(1,8,7,6);
arrSimple.sort();
document.writeln(arrSimple.join());
/script
/div
div
2、简单数组自定义排序
script type="text/javascript"
var arrSimple2=new Array(1,8,7,6);
arrSimple2.sort(function(a,b){
return b-a});
document.writeln(arrSimple2.join());
/script
解释：a,b表示数组中的任意两个元素，若return 0 b前a后；reutrn 0 a前b后；a=b时存在浏览器兼容
简化一下：a-b输出从小到大排序，b-a输出从大到小排序。
/div
div
3、简单对象List自定义属性排序
script type="text/javascript"
var objectList = new Array();
function Persion(name,age){
this.name=name;
this.age=age;
}
objectList.push(new Persion('jack',20));
objectList.push(new Persion('tony',25));
objectList.push(new Persion('stone',26));
objectList.push(new Persion('mandy',23));
//按年龄从小到大排序
objectList.sort(function(a,b){
return a.age-b.age});
for(var i=0;iobjectList.length;i++){
document.writeln('br /age:'+objectList[i].age+' name:'+objectList[i].name);
}
/script
/div
div
4、简单对象List对可编辑属性的排序
script type="text/javascript"
var objectList2 = new Array();
function WorkMate(name,age){
this.name=name;
var _age=age;
this.age=function(){
if(!arguments)
{
_age=arguments[0];}
else
{
return _age;}
}
}
objectList2.push(new WorkMate('jack',20));
objectList2.push(new WorkMate('tony',25));
objectList2.push(new WorkMate('stone',26));
objectList2.push(new WorkMate('mandy',23));
//按年龄从小到大排序
objectList2.sort(function(a,b){
return a.age()-b.age();
});
for(var i=0;iobjectList2.length;i++){
document.writeln('br /age:'+objectList2[i].age()+' name:'+objectList2[i].name);
}
/script
/div
/body
如何用jquery对列表进行排序？
思路：
1、利用jquery选择器获取li数组和ul节点
2、通过数组的sort方法对li进行排序
3、根据ul节点，清空原来li，再把排序后的li节点添加进去
代码:
script
function onTest(){
var arr = $('li');
arr.sort(function(a,b){
return a.innerHTMLb.innerHTML?1:-1;
});//对li进行排序，这里按照从小到大排序
$('ul').empty().append(arr);//清空原来内容添加排序后内容。
}
/script
/head
body
ul
lib/li
lia/li
lid/li
lic/li
/ul
a onclick="onTest();"按钮/a
/body
/html
使用jQuery实现列表排序功能
jquery拖拽排序，针对后台列表table进行拖拽排序（超实用！）
现在很多后台列表为了方便均使用拖拽排序的功能，对列表进行随意的排序。
话不多说 ，我在网上找了一些demo，经过对比，现在把方便实用的一个demo列出来，基于jqueryUI.js
先上html代码，很简单：
!DOCTYPE htmlhtml lang="en"head
meta charset="UTF-8"
titlejqueryUI拖动/title/headscript src="js/jquery-1.11.0.min.js"/scriptscript src="js/jquery-ui.min.js"/scriptstyle
tr{cursor: pointer;}/stylebodytable id="sort"
thead
tr
th class="index"序号/th
th年份/th
th标题/th
th作者/th
/tr
/thead
tbody
tr
td class="index"1/td
td2014/td
td这是第1个/td
td阿斯蒂芬阿斯蒂芬/td
/tr
tr
td class="index"2/td
td2015/td
td这是第2个/td
td阿萨德发射点发岁的/td
/tr
tr
td class="index"3/td
td2016/td
td这是第3个/td
td阿萨德发送地方/td
/tr
tr
td class="index"4/td
td2017/td
td这是第4个/td
td的说法大赛分/td
/tr
/tbody/table/body/html
除了要引入jquery.js 和jqueryUI.js外，还需要如下一段代码：
$(document).ready(function(){ var fixHelperModified = function(e, tr) { var $originals = tr.children(); var $helper = tr.clone();
$helper.children().each(function(index) {
$(this).width($originals.eq(index).width())
}); return $helper;
},
updateIndex = function(e, ui) {
$('td.index', ui.item.parent()).each(function (i) {
$(this).html(i + 1);
});
};
$("#sort tbody").sortable({
helper: fixHelperModified,
stop: updateIndex
}).disableSelection();
});
这是我发现的比较实用的一个拖动排序，还是比较方便的。
