html table表头升序 降序,jquery实现表格根据字段进行升序降序

例子:

蚂蚁部落

* {

margin: 0;

padding: 0;

}

body {

padding: 100px;

}

.select {

position: relative;

display: inline-block;

width: 200px;

height: 30px;

outline: none;

background: #f5fafe;

color: #555555;

font-size: 18px;

line-height: 30px;

border: 1px solid #cad9ea;

text-indent: 15px;

}

.select option {

text-indent: 15px;

}

.select option:hover {

background-color: #ff8800;

color: #fff;

}

table {

width: 100%;

font-size: 16px;

table-layout: fixed;

empty-cells: show;

border-collapse: collapse;

margin: 20px auto;

border: 1px solid #cad9ea;

color: #666;

}

th {

background: linear-gradient(#f3faff, #f5fafe);

height: 40px;

overflow: hidden;

}

td {

height: 30px;

text-align: center;

}

td, th {

border: 1px solid #cad9ea;

padding: 0 1em 0;

}

tr:nth-child(odd) {

background-color: #f5fafe;

}

nameagesexweight(kg)schoollookingjob

(function () {

var sortBy = function (list, attrName, order) {

console.log(attrName)

console.log(order)

return list

.slice()

.sort(function (left, right) {

var a = left[attrName];

var b = right[attrName];

if (a > b || a === void 0) return 1 * order;

if (a < b || b === void 0) return -1 * order;

return -1 * order;

});

};

var template = function (string, user) {

return string.replace('name', user.name)

.replace('age', user.age)

.replace('sex', user.sex)

.replace('weight', user.weight)

.replace('school', user.school)

.replace('looking', user.looking)

.replace('job', user.job);

};

var getSortedString = function (string, data, select) {

var str = '';

var order = parseInt($('#order').val(), 10);

if (select !== '-1') {

data = sortBy(data, select, order);

}

data.forEach(function (user) {

str += template(string, user);

});

return str;

};

window.getSortedString = getSortedString;

})();

$(function () {

var list = [{

name: 'div教程',

age: 25,

sex: '男',

weight: 60,

school: '蚂蚁部落',

looking: '标准',

job: '前端工程师'

}, {

name: 'css教程',

age: 24,

sex: '女',

weight: 56,

school: '蚂蚁部落',

looking: '上等',

job: '后台'

}, {

name: 'ajax教程',

age: 27,

sex: '男',

weight: 80,

school: '',

looking: '中下',

job: '前端工程师'

}, {

name: 'js教程',

age: 22,

sex: '女',

weight: 54,

school: '青岛科技大学',

looking: '美丽',

job: '前端工程师'

}, {

name: 'softwhy.com',

age: 20,

sex: '男',

weight: 70,

school: '青岛大学',

looking: '中等',

job: '后台开发'

}, {

name: 'css3教程',

age: 19,

sex: '女',

weight: 55,

school: '清华',

looking: '上等',

job: '美工'

}, {

name: 'json教程',

age: 28,

sex: '女',

weight: 65,

school: '海洋大学',

looking: '漂亮',

job: '美工'

}];

var fillData = function (select) {

var str = getSortedString(string, list, select);

console.log(str)

$('#table tr').not('.head').remove();

$('#table').append(str);

};

var string = $('#dataItem').html();

console.log(string)

$('#select').change(function () {

var select = $(this).val();

console.log(select)

fillData(select);

});

$("#order").change(function () {

$("#select").trigger("change");

});

fillData('-1');

});

请选择排序方式

姓名

年龄

性别

体重

学校

相貌

职业

升序

降序

姓名	年龄	性别	体重	学校	相貌	职业

关键代码

/**

*

* @param {ArrObj} list 当前的数组对象

* @param {string} attrName 需要排序的name 表格字段的key

* @param {int} order 升序还是降序 升序为1 降序为-1

*/

function tableSort(list,attrName,order){

return list

.slice()

.sort(function (left, right) {

var a = left[attrName];

var b = right[attrName];

if (a > b || a === void 0) return 1 * order;

if (a < b || b === void 0) return -1 * order;

return -1 * order;

});

}