jquery怎么實現(xiàn)正向排序反向排序

首先，我可以很負(fù)責(zé)的告訴你，jquery本身不帶有排序功能，表格數(shù)據(jù)的排序則更做不到。

創(chuàng)新互聯(lián)建站專注于企業(yè)營銷型網(wǎng)站、網(wǎng)站重做改版、汕城網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、H5技術(shù)、商城網(wǎng)站開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)公司、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為汕城等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

js中可以通過sort()函數(shù)針對ASCII進(jìn)行排序，當(dāng)然面對數(shù)字的時候也可以自定排序規(guī)則

sort(function(a,b){return a-b;});像這樣

具體使用方法：array.sort(function(a,b){return a-b;});但是呢，像你這樣的數(shù)據(jù)型表格就不行了，另外數(shù)字和中文組合的排序我也沒試過

往往這種排序是通過數(shù)據(jù)庫中查詢語句（SQL）實現(xiàn)的。

就算是Jquery-easyUI的DataGrid控件也是需要通過跟后臺服務(wù)器交互才能實現(xiàn)排序功能。

不過也不是完全不能實現(xiàn)，這個就要復(fù)雜一點了，思路大概是通過js獲取每個格內(nèi)的數(shù)值然后以json嵌套的形式形成一個二維的數(shù)組數(shù)據(jù)。然后采用輪詢遍歷式的算法獲取最大/小值然后重寫表格，比較復(fù)雜需要上代碼么？

jquery list對象排序

使用SORT進(jìn)行排序。

示例如下：

body

div

sort()對數(shù)組排序，不開辟新的內(nèi)存，對原有數(shù)組元素進(jìn)行調(diào)換

/div

div?id="showBox"

1、簡單數(shù)組簡單排序

script?type="text/javascript"

var?arrSimple=new?Array(1,8,7,6);

arrSimple.sort();

document.writeln(arrSimple.join());

/script

/div

div

2、簡單數(shù)組自定義排序

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表示數(shù)組中的任意兩個元素，若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對列表進(jìn)行排序？

思路：

1、利用jquery選擇器獲取li數(shù)組和ul節(jié)點

2、通過數(shù)組的sort方法對li進(jìn)行排序

3、根據(jù)ul節(jié)點，清空原來li，再把排序后的li節(jié)點添加進(jìn)去

代碼:

script

function?onTest(){

var?arr?=???$('li');

arr.sort(function(a,b){

return?a.innerHTMLb.innerHTML?1:-1;

});//對li進(jìn)行排序，這里按照從小到大排序

$('ul').empty().append(arr);//清空原來內(nèi)容添加排序后內(nèi)容。

}

/script

/head

body

ul

lib/li

lia/li

lid/li

lic/li

/ul

a??onclick="onTest();"按鈕/a

/body

/html

使用jQuery實現(xiàn)列表排序功能

jquery拖拽排序，針對后臺列表table進(jìn)行拖拽排序（超實用?。?/p>

現(xiàn)在很多后臺列表為了方便均使用拖拽排序的功能，對列表進(jìn)行隨意的排序。

話不多說 ，我在網(wǎng)上找了一些demo，經(jīng)過對比，現(xiàn)在把方便實用的一個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標(biāo)題/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阿薩德發(fā)射點發(fā)歲的/td

/tr

tr

td class="index"3/td

td2016/td

td這是第3個/td

td阿薩德發(fā)送地方/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();

});

這是我發(fā)現(xiàn)的比較實用的一個拖動排序，還是比較方便的。