Как сортировать по алфавиту (по возрастанию и по убыванию) в JavaScript - PullRequest
Новая
       34

Как сортировать по алфавиту (по возрастанию и по убыванию) в JavaScript

0 голосов
/ 25 сентября 2018

HTML: 

<section class="cd-gallery">
    <ul id="courses">
    </ul>
    <div class="cd-fail-message">No results found</div>
</section>

<ul>
    <li><input id="buttonaz" type="button" value="Course name(a-z)"/></li>
    <li><input id="buttonza" type="button" value="Course name(z-a)"/></li>
    <li><input id="buttonlu" type="button" value="Last updated"></li>
<ul>

JavaScript: 

var public_spreadsheet_url = 'https://docs.google.com/spreadsheets/..."

function init() {
    Tabletop.init( { key: public_spreadsheet_url,
                   callback: showInfo,
                   simpleSheet: true } );
}
window.addEventListener('DOMContentLoaded', init);

function sortAZ(a, b) {
    var x = a.Course.toLowerCase();
    var y = b.Course.toLowerCase();
    return ((x < y) ? -1 : ((x > y) ? 1 : 0));
}

function sortZA(a, b) {
    var x = a.Course.toLowerCase();
    var y = b.Course.toLowerCase();
    return ((x > y) ? -1 : ((x < y) ? 1 : 0));
}

function showInfo(data) {
    var bodyContent = '';
    var sheetUrlRoot = 'https://docs.google.com/spreadsheets/d/';
    var buttonaz = document.getElementById("buttonaz");
    var buttonza = document.getElementById("buttonza");
    console.log(data)

    for (var i = 0; i < data.length; i++) {
        var sheetUrl = sheetUrlRoot + data[i].ActionId;
        var c = data[i].Course;
        var courseName = '<div class=\"courseName\">' + c + '</div>';
        var designer = data[i]['Designer'].toLowerCase();
        var numHolds = data[i]['On Hold']

        if (numHolds > 0) {
            bodyContent += '<li class="color-2 course mix ' + designer + ' "style="background-color: #E89696";>' + courseName + statusList+ sheetLink+ '</li>';
        } else if (numHolds <= 0){
            bodyContent += '<li class="color-1 course mix ' + designer + ' "style="background-color: #C2D5BE";>' + courseName + statusList+ sheetLink+'</li>';
        }
    }
    document.getElementById('courses').innerHTML = bodyContent;
    document.getElementById('buttonaz').onclick = data.sort(sortAZ);
    document.getElementById('buttonaz').onclick = data.sort(sortZA);
}

Пользователи Hi Stack Overflow, я импортировал данные, используя tabletop.js, чтобы отобразить набор курсов, которые есть в моем университете.,Тем не менее, я не могу отобразить курсы, отсортированные по алфавиту от z, а также от za, когда нажаты кнопки «Название курса (az)» и «Название курса (za)».Данные отображаются при первой загрузке страницы, но ничего не делают, когда я нажимаю на кнопки сортировки.

Пожалуйста, помогите, и любой вклад будет оценен!

PS Я также фильтрую курсы по имени дизайнера, используя плагин mixitup jQuery.

Ответы [ 3 ]

0 голосов
/ 25 сентября 2018

Если вы хотите использовать библиотеку https://underscorejs.org/#

var stooges = [{name: 'moe', age: 40}, {name: 'larry', age: 50}, {name: 'curly', age: 60}];
_.sortBy(stooges, 'name');
0 голосов
/ 25 сентября 2018

Обратитесь к коду с двумя кнопками, одна для сортировки aZ, а другая для сортировки Za.Нажмите на кнопку «Развернуть фрагмент», вы увидите две кнопки, нажмите на них и наслаждайтесь сортировкой 

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Sort</h2>
<p>Click the buttons to sort the array alphabetically or numerically.</p>
<button onclick="myFunction1()">Sort Az</button>
<button onclick="myFunction2()">Sort zA</button>
<p id="demo"></p>
<script>
var points = ["z", "b", "d", "a"];
var data1=Array.prototype.slice.call(points);
console.log('Za Sort ',data1.sort().reverse());
document.getElementById("demo").innerHTML = points;    

function myFunction1() {
    points.sort();
    document.getElementById("demo").innerHTML = points;
}
function myFunction2() {
    
    document.getElementById("demo").innerHTML = data1.sort().reverse();
}
</script>
</body>
</html>

Если входящие данные являются массивом, используйте встроенную функцию сортировки javascript для сортировки данных 

var data = ["z", "b", "d", "a"];
data.sort();
console.log('Ascending order aZ ',data)
data.reverse();
console.log('Descending order zA',data);

output
Ascending order ["a", "b", "d", "z"]
Descending order["z", "d", "b", "a"]
0 голосов
/ 25 сентября 2018

это функция для сортировки некоторого массива в javascript, зависит от того, как вы примените его, принимая во внимание фрагмент: 

//Sort alphabetically and ascending:

var myarray=["Bob", "Bully", "Amy"];

myarray.sort();

// Array now becomes ["Amy", "Bob", "Bully"]

теперь давайте сделаем все наоборот:

// Сортировка по алфавиту и по убыванию:

var myarray = ["Bob", "Bully", "Amy"]

myarray.sort ()

myarray.reverse ()// Массив теперь становится ["Bully", "Bob", "Amy"]

...