思路:
创新互联建站专注于阿克苏企业网站建设,响应式网站,商城网站定制开发。阿克苏网站建设公司,为阿克苏等地区提供建站服务。全流程按需搭建网站,专业设计,全程项目跟踪,创新互联建站专业和态度为您提供的服务
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本身不带有排序功能,表格数据的排序则更做不到。
js中可以通过sort()函数针对ASCII进行排序,当然面对数字的时候也可以自定排序规则
sort(function(a,b){return a-b;});像这样
具体使用方法:array.sort(function(a,b){return a-b;});但是呢,像你这样的数据型表格就不行了,另外数字和中文组合的排序我也没试过
往往这种排序是通过数据库中查询语句(SQL)实现的。
就算是Jquery-easyUI的DataGrid控件也是需要通过跟后台服务器交互才能实现排序功能。
不过也不是完全不能实现,这个就要复杂一点了,思路大概是通过js获取每个格内的数值然后以json嵌套的形式形成一个二维的数组数据。然后采用轮询遍历式的算法获取最大/小值然后重写表格,比较复杂需要上代码么?
小伙子,不要太老实
先获取dom中三种语言,删除三个li,再与另三种语言组成数组,排好序之后,再forEach或者map方法组装成lispanXXX/span/li,最后再插入到ul中,是不是简单些
!DOCTYPE HTML
html
head
meta charset=UTF-8
meta name="keywords" content="白菜编辑部"
title白菜编辑部/title
style type="text/css"
/style
script type="text/javascript" src="jquery-1.8.0.min.js"/script
script type="text/javascript"
jQuery (function ($)
{
var p = $ ('div.icListul.aaa');
var array = p.children ('li');
array.sort (function ()
{
var rand = Math.random ();
if (rand 0.5)
{
return 1;
}
else
{
return -1;
}
});
array.each (function (i, dom)
{
p.append ($ (this));
});
});
/script
/head
body
div class="icList"
ul class="aaa"
li111111/li
li222222/li
li333333/li
li444444/li
li555555/li
li666666/li
/ul
/div
/body
/html
$(document).ready(function()
{
//插件的形式
jQuery.fn.alterRowColors = function()
{
$('tbody tr:odd', this).removeClass('even').addClass('odd');
$('tbody tr:even', this).removeClass('odd').addClass('even');
return this;
}
//1.此时的函数是作为jQuery.fn的一个新属性定义的,不是孤立的函数,这样就把该函数注册成了一个插件,
//2.使用关键字this,在一个插件内部,this表示的是调用该插件的jQuery对象,
//3.最后在函数的末尾返回this,返回这个值可以使这个新方法能够继续连缀其他的方法。
var $sortOrder = 0; //排序类型 1表示升序,0表示降序
var $table = $('table#shop');
$table.alterRowColors();
$('th', $table).each(function( column )
{
//处理三种有可能存在的排序字段,比较方法
var findSortKey;
if( $(this).is('.sort-title') || $(this).is('.sort-author') )
{
findSortKey = function( $cell )
{
return $cell.find('.sort-title').text().toUpperCase()+ '' +$cell.text().toUpperCase();
}
}
else if( $(this).is('.sort-date') )
{
findSortKey = function( $cell )
{
return Date.parse('1' + $cell.text());
}
}
else if( $(this).is('.sort-price') )
{
findSortKey = function( $cell )
{
var key = parseFloat($cell.text().replace(/^[^\d.]*/, ''))
return isNaN(key) ? 0 : key;
}
}
//排序
if( findSortKey )
{
$(this).addClass('clickable').hover(function()
{
$(this).addClass('hover');
var $title = $sortOrder == 0 ? '升序' : '降序';
$(this).attr('title', '按'+ $(this).html() + $title +'排列');
}, function()
{
$(this).removeClass('hover');
}).click(function()
{
$sortOrder = $sortOrder == 0 ? 1 : 0;
var rows = $table.find('tbody tr').get();
$.each( rows, function( index, row )
{
row.sortKey = findSortKey($(row).children('td').eq(column));
});
//排序方法
rows.sort(function( a, b )
{
if( $sortOrder == 1 )
{
//升序
if(a.sortKey b.sortKey) return -1;
if(a.sortKey b.sortKey) return 1;
return 0;
}
else
{
//降序
if(a.sortKey b.sortKey) return 1;
if(a.sortKey b.sortKey) return -1;
return 0;
}
});
//排序后的对象添加给$table
$.each( rows, function( index, row )
{
$table.children('tbody').append(row);
row.sortKey = null;
});
//显著标明是通过某一列排序的
$table.find('td').removeClass('sorted')
.filter(':nth-child('+ (column + 1) +')').addClass('sorted');
//重新赋予奇偶行的样式
$table.alterRowColors();
});
}
});
//分页效果
var currentPage = 0; //当前页
var pageSize = 10; //每页行数(不包括表头)
//绑定分页事件
$table.bind('repaginate', function()
{
$table.find('tbody tr').hide()
.slice(currentPage * pageSize, (currentPage + 1) * pageSize).show();
});
var numRows = $table.find('tbody tr').length; //记录宗条数
var numPages = Math.ceil(numRows/pageSize); //总页数
var $pager = $('div class="page"/div'); //分页div
for( var page = 0; page numPages; page++ )
{
//为分页标签加上链接
$('a href="#" span'+ (page+1) +'/span/a')
.bind("click", { "newPage": page }, function(event)
{
currentPage = event.data["newPage"];
$table.trigger("repaginate");
})
.appendTo($pager);
$pager.append(" ");
}
$pager.insertAfter($table); //分页div插入table
$table.trigger("repaginate"); //初始化
});
$(document).ready(function(){
var a=new Array();
$(".test").each(function(i){
a.push($(this).attr("name"));
});
a.sort(AscSort);
for(var i=0;ia.length-1;i++)
{
$(".test")find("name="+a[i]).insertBefore($(".test")find("name="+a[i+1]));
}
});
function AscSort(x, y) {
return x == y ? 0 : (x y ? 1 : -1);
}