<html>
<head>
<meta charset="UTF-8" />
<title>Sort Table</title>
<style type="text/css">
table {
margin: 0 auto;
border: 1px solid black;
border-collapse: collapse;
}
td {
border: 1px solid black;
}
</style>
<script type="text/javascript">
windowonload = function ()
{
var table = documentgetElementById ('table');
var tbody = tabletBodies[0];
var rows = tbodyrows;
var cells = rows[0]cells;
for ( var j = 0; j < cellslength; j++)
{
cells[j]onclick = function ()
{
var asc = thisasc = !!thisasc -thisasc : -1;
var array = [];
arrayindex = thiscellIndex;
for ( var i = 1; i < rowslength; i++)
{
arraypush (rows[i]);
}
arraysort (function (a, b)
{
var n1 = acells[arrayindex]firstChildnodeValue;
var n2 = bcells[arrayindex]firstChildnodeValue;
if (n1 > n2)
{
return asc;
}
else if (n1 < n2)
{
return -asc;
}
else
{
return 0;
}
});
for ( var i = 0; i < arraylength; i++)
{
tbodyappendChild (array[i]);
}
}
}
}
</script>
</head>
<body style="text-align: center;">
<table id="table">
<tr>
<td>编号</td>
<td>姓名</td>
</tr>
<tr>
<td>1</td>
<td>李勇</td>
</tr>
<tr>
<td>2</td>
<td>王博</td>
</tr>
<tr>
<td>3</td>
<td>刘海</td>
</tr>
<tr>
<td>4</td>
<td>陈锋</td>
</tr>
</table>
</body>
</html>jqgrid的排序要用到它的一个事件
onSortCol: function (index, iCol, sortorder) {
var oData = GetParams();
oDataOrderName = index;
oDataOrderType = sortorder;
RefreshGrid(oData);//重新加载表格
}
这个方法里面index表示排序的字段，sortorder表示是升序还是降序。这样你可以在后台得到这两个参数，来实现排序。
希望可以帮到你。<!DOCTYPE html>
<html xmlns=";
复制下来，自己运行
为jquerydatatables指定列可以排序默认的所有列是可以排序的,你可以手动关掉某些列的自动排序,在它数据生成的行间加: "bSort" : false, $('#data-list')dataTable({ columnDefs:[{ orderable:false,//禁用排序 targets:[0,4] //指定的列 }] }); 祝你愉快把下段代码加到后面：
<SCRIPT LANGUAGE="JavaScript">
objs=$("#li_zoo")nextAll()andSelf();
arr = $makeArray( objs);
arrsort(function(a,b){
if(ainnerText>binnerText)
return 1;
else if (ainnerText<binnerText)
return -1;
else return 0
});
$("ul")append(arr)
</SCRIPT>排序的话，如果是表格，看下面的例子：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>HelloWorld</title>
<style type="text/css">
table {
margin: 0 auto;
border: 1px solid black;
border-collapse: collapse;
}
td {
border: 1px solid black;
}
</style>
<script src="jquery-180minjs"></script>
<script type="text/javascript">
windowonload = function ()
{
var table = documentgetElementById ('table');
var tbody = tabletBodies[0];
var rows = tbodyrows;
var cells = rows[0]cells;
for ( var j = 0; j < cellslength; j++)
{
cells[j]onclick = function ()
{
var asc = thisasc = !!thisasc -thisasc : -1;
var array = [];
arrayindex = thiscellIndex;
for ( var i = 1; i < rowslength; i++)
{
arraypush (rows[i]);
}
arraysort (function (a, b)
{
var n1 = acells[arrayindex]firstChildnodeValue;
var n2 = bcells[arrayindex]firstChildnodeValue;
if (n1 > n2)
{
return asc;
}
else if (n1 < n2)
{
return -asc;
}
else
{
return 0;
}
});
for ( var i = 0; i < arraylength; i++)
{
tbodyappendChild (array[i]);
}
}
}
}
</script>
</head>
<body style="text-align: center;">
<table id="table">
<tr>
<td>编号</td>
<td>姓名</td>
</tr>
<tr>
<td>1</td>
<td>李勇</td>
</tr>
<tr>
<td>2</td>
<td>王博</td>
</tr>
<tr>
<td>3</td>
<td>刘海</td>
</tr>
<tr>
<td>4</td>
<td>陈锋</td>
</tr>
</table>
</body>
</html>在后台使用C#获取数据库中的菜单数据，生成一个包含菜单数据项的JSON数组(由于某种原因没有使用SQL中的ORDER BY)，如下：
view sourceprintvar menuData1=[
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）