jquery排序,jquery排序图标的上下切换

jquery怎么实现正向排序反向排序

首先，我可以很负责的告诉你，jquery本身不带有排序功能，表格数据的排序则更做不到。

创新互联建站专注于企业营销型网站、网站重做改版、汕城网站定制设计、自适应品牌网站建设、H5技术、商城网站开发、集团公司官网建设、成都外贸网站建设公司、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为汕城等各大城市提供网站开发制作服务。

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();

});

这是我发现的比较实用的一个拖动排序，还是比较方便的。