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

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

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

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

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

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

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

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

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

jquery list對(duì)象排序

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

示例如下：

body

div

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

/div

div?id="showBox"

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

script?type="text/javascript"

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

arrSimple.sort();

document.writeln(arrSimple.join());

/script

/div

div

2、簡(jiǎn)單數(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ù)組中的任意兩個(gè)元素，若return??0?b前a后；reutrn??0?a前b后；a=b時(shí)存在瀏覽器兼容

簡(jiǎn)化一下：a-b輸出從小到大排序，b-a輸出從大到小排序。

/div

div

3、簡(jiǎn)單對(duì)象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、簡(jiǎn)單對(duì)象List對(duì)可編輯屬性的排序

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對(duì)列表進(jìn)行排序？

思路：

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

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

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

代碼:

script

function?onTest(){

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

arr.sort(function(a,b){

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

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

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

}

/script

/head

body

ul

lib/li

lia/li

lid/li

lic/li

/ul

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

/body

/html

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

jquery拖拽排序，針對(duì)后臺(tái)列表table進(jìn)行拖拽排序（超實(shí)用！）

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

話不多說(shuō) ，我在網(wǎng)上找了一些demo，經(jīng)過(guò)對(duì)比，現(xiàn)在把方便實(shí)用的一個(gè)demo列出來(lái)，基于jqueryUI.js

先上html代碼，很簡(jiǎn)單：

!DOCTYPE htmlhtml lang="en"head

meta charset="UTF-8"

titlejqueryUI拖動(dòng)/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"序號(hào)/th

th年份/th

th標(biāo)題/th

th作者/th

/tr

/thead

tbody

tr

td class="index"1/td

td2014/td

td這是第1個(gè)/td

td阿斯蒂芬阿斯蒂芬/td

/tr

tr

td class="index"2/td

td2015/td

td這是第2個(gè)/td

td阿薩德發(fā)射點(diǎn)發(fā)歲的/td

/tr

tr

td class="index"3/td

td2016/td

td這是第3個(gè)/td

td阿薩德發(fā)送地方/td

/tr

tr

td class="index"4/td

td2017/td

td這是第4個(gè)/td

td的說(shuō)法大賽分/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)的比較實(shí)用的一個(gè)拖動(dòng)排序，還是比較方便的。

網(wǎng)頁(yè)題目：jquery排序,jquery排序圖標(biāo)的上下切換
網(wǎng)站URL：http://chinadenli.net/article48/dsgdihp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設(shè)、動(dòng)態(tài)網(wǎng)站、用戶體驗(yàn)、品牌網(wǎng)站設(shè)計(jì)、搜索引擎優(yōu)化、移動(dòng)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)