js列表排序（用JS实现排序的功能）

本文目录

• 用JS实现排序的功能
• 使用jQuery实现列表排序功能
• JS,实现表格内容排序
• js几种常见的排序算法
• Js写一个表格ID排序，从小到达排序
• 用JS给查询出来的数据排序

用JS实现排序的功能

js常用排序实现，参考代码如下

《script》 
Array.prototype.swap = function(i, j) 
{ 
var temp = this; 
this; 
this = temp; 
} 
Array.prototype.bubbleSort = function() 
{ 
for (var i = this.length - 1; i 》 0; --i) 
{ 
for (var j = 0; j 《 i; ++j) 
{ 
if (this) this.swap(j, j + 1); 
} 
} 
} 
Array.prototype.selectionSort = function() 
{ 
for (var i = 0; i 《 this.length; ++i) 
{ 
var index = i; 
for (var j = i + 1; j 《 this.length; ++j) 
{ 
if (this) index = j; 
} 
this.swap(i, index); 
} 
} 
Array.prototype.insertionSort = function() 
{ 
for (var i = 1; i 《 this.length; ++i) 
{ 
var j = i, value = this; 
while (j 》 0 && this 》 value) 
{ 
this; 
--j; 
} 
this = value; 
} 
} 
Array.prototype.shellSort = function() 
{ 
for (var step = this.length 》》 1; step 》 0; step 》》= 1) 
{ 
for (var i = 0; i 《 step; ++i) 
{ 
for (var j = i + step; j 《 this.length; j += step) 
{ 
var k = j, value = this; 
while (k 》= step && this 》 value) 
{ 
this; 
k -= step; 
} 
this = value; 
} 
} 
} 
} 
Array.prototype.quickSort = function(s, e) 
{ 
if (s == null) s = 0; 
if (e == null) e = this.length - 1; 
if (s 》= e) return; 
this.swap((s + e) 》》 1, e); 
var index = s - 1; 
for (var i = s; i 《= e; ++i) 
{ 
if (this) this.swap(i, ++index); 
} 
this.quickSort(s, index - 1); 
this.quickSort(index + 1, e); 
} 
Array.prototype.stackQuickSort = function() 
{ 
var stack = ; 
while (stack.length 》 0) 
{ 
var e = stack.pop(), s = stack.pop(); 
if (s 》= e) continue; 
this.swap((s + e) 》》 1, e); 
var index = s - 1; 
for (var i = s; i 《= e; ++i) 
{ 
if (this) this.swap(i, ++index); 
} 
stack.push(s, index - 1, index + 1, e); 
} 
} 
Array.prototype.mergeSort = function(s, e, b) 
{ 
if (s == null) s = 0; 
if (e == null) e = this.length - 1; 
if (b == null) b = new Array(this.length); 
if (s 》= e) return; 
var m = (s + e) 》》 1; 
this.mergeSort(s, m, b); 
this.mergeSort(m + 1, e, b); 
for (var i = s, j = s, k = m + 1; i 《= e; ++i) 
{ 
b; 
} 
for (var i = s; i 《= e; ++i) this; 
} 
Array.prototype.heapSort = function() 
{ 
for (var i = 1; i 《 this.length; ++i) 
{ 
for (var j = i, k = (j - 1) 》》 1; k 》= 0; j = k, k = (k - 1) 》》 1) 
{ 
if (this) break; 
this.swap(j, k); 
} 
} 
for (var i = this.length - 1; i 》 0; --i) 
{ 
this.swap(0, i); 
for (var j = 0, k = (j + 1) 《《 1; k 《= i; j = k, k = (k + 1) 《《 1) 
{ 
if (k == i || this) --k; 
if (this) break; 
this.swap(j, k); 
} 
} 
} 
function generate() 
{ 
var max = parseInt(txtMax.value), count = parseInt(txtCount.value); 
if (isNaN(max) || isNaN(count)) 
{ 
alert("个数和最大值必须是一个整数"); 
return; 
} 
var array = ; 
for (var i = 0; i 《 count; ++i) array.push(Math.round(Math.random() * max)); 
txtInput.value = array.join("\n"); 
txtOutput.value = ""; 
} 
function demo(type) 
{ 
var array = txtInput.value == "" ?  : txtInput.value.replace().split("\n"); 
for (var i = 0; i 《 array.length; ++i) array); 
var t1 = new Date(); 
eval("array." + type + "Sort()"); 
var t2 = new Date(); 
lblTime.innerText = t2.valueOf() - t1.valueOf(); 
txtOutput.value = array.join("\n"); 
} 
《/script》 
《body onload=generate()》 
《table style="width:100%;height:100%;font-size:12px;font-family:宋体"》 
《tr》 
《td align=right》 
《textarea id=txtInput readonly style="width:100px;height:100%"》《/textarea》 
《/td》 
《td width=150 align=center》 
随机数个数《input id=txtCount value=500 style="width:50px"》《br》《br》 
最大随机数《input id=txtMax value=1000 style="width:50px"》《br》《br》 
《button onclick=generate()》重新生成《/button》《br》《br》《br》《br》 
耗时(毫秒)：《label id=lblTime》《/label》《br》《br》《br》《br》 
《button onclick=demo("bubble")》冒泡排序《/button》《br》《br》 
《button onclick=demo("selection")》选择排序《/button》《br》《br》 
《button onclick=demo("insertion")》插入排序《/button》《br》《br》 
《button onclick=demo("shell")》谢尔排序《/button》《br》《br》 
《button onclick=demo("quick")》快速排序(递归)《/button》《br》《br》 
《button onclick=demo("stackQuick")》快速排序(堆栈)《/button》《br》《br》 
《button onclick=demo("merge")》归并排序《/button》《br》《br》 
《button onclick=demo("heap")》堆排序《/button》《br》《br》 
《/td》 
《td align=left》 
《textarea id=txtOutput readonly style="width:100px;height:100%"》《/textarea》 
《/td》 
《/tr》 
《/table》 
《/body》

使用jQuery实现列表排序功能

jquery拖拽排序，针对后台列表table进行拖拽排序（超实用！）

现在很多后台列表为了方便均使用拖拽排序的功能，对列表进行随意的排序。

话不多说 ，我在网上找了一些demo，经过对比，现在把方便实用的一个demo列出来，基于jqueryUI.js

先上html代码，很简单：

《!DOCTYPE html》《html lang="en"》《head》
《meta charset="UTF-8"》
《title》jqueryUI拖动《/title》《/head》《script src="js/jquery-1.11.0.min.js"》《/script》《script src="js/jquery-ui.min.js"》《/script》《style》
tr{cursor: pointer;}《/style》《body》《table id="sort"》
《thead》
《tr》
《th class="index"》序号《/th》
《th》年份《/th》
《th》标题《/th》
《th》作者《/th》
《/tr》
《/thead》
《tbody》
《tr》
《td class="index"》1《/td》
《td》2014《/td》
《td》这是第1个《/td》
《td》阿斯蒂芬阿斯蒂芬《/td》
《/tr》
《tr》
《td class="index"》2《/td》
《td》2015《/td》
《td》这是第2个《/td》
《td》阿萨德发射点发岁的《/td》
《/tr》
《tr》
《td class="index"》3《/td》
《td》2016《/td》
《td》这是第3个《/td》
《td》阿萨德发送地方《/td》
《/tr》
《tr》
《td class="index"》4《/td》
《td》2017《/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();
});

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

JS,实现表格内容排序

《!DOCTYPE HTML》
《html》
《head》
《meta charset="UTF-8" /》
《title》main.html《/title》
《style type="text/css"》
table {
width: 300px; border : 1px solid black;
border-collapse: collapse;
border: 1px solid black;
}
td {
border: 1px solid black;
}
《/style》
《script type="text/javascript"》
function paiXu ()
{
var tabNode = document.getElementsByTagName ("table");
var trs = tabNode.rows;
var arr = new Array;
for ( var x = 0; x 《 trs.length; x++)
{
arr.push (trs);
}
sortt (arr);
for ( var x = 0; x 《 arr.length; x++)
{
tabNode.tBodies);
}
}
function sortt (arr)
{
for ( var x = 0; x 《 arr.length; x++)
{
for ( var y = x + 1; y 《 arr.length; y++)
{
if (parseInt (arr.nodeValue))
{
var tmp = arr;
arr;
arr = tmp;
}
}
}
}
《/script》
《/head》
《body》
《input type="button" value="排序" onclick="paiXu()"》
《table》
《tr》
《td》小明《/td》
《td》23《/td》
《td》《/td》
《td》《/td》
《td》《/td》
《/tr》
《tr》
《td》小花《/td》
《td》21《/td》
《td》《/td》
《td》《/td》
《td》《/td》
《/tr》
《tr》
《td》小高《/td》
《td》12《/td》
《td》《/td》
《td》《/td》
《td》《/td》
《/tr》
《tr》
《td》小林《/td》
《td》25《/td》
《td》《/td》
《td》《/td》
《td》《/td》
《/tr》
《tr》
《td》小王《/td》
《td》35《/td》
《td》《/td》
《td》《/td》
《td》《/td》
《/tr》
《/table》
《/body》
《/html》

js几种常见的排序算法

原理：比较两个相邻的元素，将值大的元素交换至右端。

思路：依次比较相邻的两个数，将小数放在前面，大数放在后面。即在第一趟：首先比较第1个和第2个数，将小数放前，大数放后。然后比较第2个数和第3个数，将小数放前，大数放后，如此继续，直至比较最后两个数，将小数放前，大数放后。重复第一趟步骤，直至全部排序完成。

N个数字要排序完成，总共进行N-1趟排序，每i趟的排序次数为(N-i)次，所以可以用双重循环语句，外层控制循环多少趟，内层控制每一趟的循环次数。

冒泡排序的优点：每进行一趟排序，就会少比较一次，因为每进行一趟排序都会找出一个较大值。如上例：第一趟比较之后，排在最后的一个数一定是最大的一个数，第二趟排序的时候，只需要比较除了最后一个数以外的其他的数，同样也能找出一个最大的数排在参与第二趟比较的数后面，第三趟比较的时候，只需要比较除了最后两个数以外的其他的数，以此类推……也就是说，没进行一趟比较，每一趟少比较一次，一定程度上减少了算法的量。

冒泡排序优化版：

一.选择排序原理

1.每一次从待排序的数据元素中选出最小（或最大）的一个元素，存放在序列的起始位置

2.再从剩余未排序元素中继续寻找最小（大）元素，然后放到刚才已排序序列的后面。

3.以此类推，直到全部待排序的数据元素排完。

选择排序是不稳定的排序方法。例如：序列3，3，2，1， 我们知道第一次遍历的时候，选择最后一个元素1和第一个元素3交换，那么原序列中2个3的相对前后顺序就和之前不一样了，所以选择排序不是一个稳定的排序算法。

二.选择排序时间复杂度

第一次循环比较 n - 1次，第二次循环比较 n - 2次，依次类推，最后一个元素不需要比较，因此共进行 n - 1次循环，最后一次循环比较1次。

因此一共比较1 + 2 + 3 + ... +（n - 2）+（n - 1）次，求和得n2/2 - n / 2 ，忽略系数，取最高指数项，该排序的时间复杂度为O(n2)

选择排序优化版：

插入排序：

Js写一个表格ID排序，从小到达排序

《!DOCTYPE html》
《html》
  《head》
***隐藏网址***
  
    《title》RunJS 演示代码《/title》
    《style》
            table{
                margin:0 auto;
                width:400px;
                border-collapse:collapse;
                border:1px solid black;
            }
            caption{
                text-align:left;
            }
            td,th{
                border:1px solid black;
            }
        《/style》
        《script》
                    var st = function(asc){
                        var tb = document.getElementsByTagName("table");
                        var trs = tb.tBodies.rows;
                        var arr = ;
                        for(var i=1;i《trs.length;i++){
                                arr.push(trs);
                        }
                        arr.sort(function(a,b){
                                var ida = a.cells.innerHTML * 1;
                                var idb = b.cells.innerHTML * 1;
                                if(ida 》 idb) return asc * 1;
                                else if(ida 《 idb) return asc * -1;
                                else return 0;
                        });
                        for(var i =0;i《arr.length;i++){
                            tb.tBodies);
                        }
                    };
        《/script》
  《/head》
《body》
    《table》
            《caption》《input type="button" value="排序" onclick="st(1)" /》《/caption》
            《tr》《th》ID《/th》《th》姓名《/th》《th》年龄《/th》《/tr》
            《tr》《td》4《/td》《td》张三《/td》《td》17《/td》《/tr》
            《tr》《td》1《/td》《td》吕一《/td》《td》19《/td》《/tr》
            《tr》《td》2《/td》《td》王二《/td》《td》18《/td》《/tr》
            《tr》《td》3《/td》《td》李武《/td》《td》16《/td》《/tr》
    《/table》
  《/body》
《/html》

用JS给查询出来的数据排序

1 首先，排序是需要根据某一个字段进行的,你首先需要确定你需要排序的字段.
2 然后在JS中,可以对你认定的排序字段进行ORDERBY操作的,JS也可以支持.
3 至于每页显示多少条数据，这个你可以自己写分页脚本控制.
只提供思想,希望有所帮助.