Javascript метод sort()

What’s new?

The latest news from the DataTables blog and around the web.


Excel export styling examples

21st May 2020

Button’s Excel export does over styling options, but it isn’t particularly trivial to use. Thankfully Paul Jones has put together an excellent resource to help with this though! It shows the code to use for a set of Excel export examples.

Card View

19th Feb 2020

Michael has been at it again (creating useful blog posts about DataTables!). This time discussing a technique originally suggested in the forum for using DataTables with a card view.

Search and order by `input` or `select` elements

19th Feb 2020

Another really useful article by Michael Ryvkin — this time describing how you can use a clever little renderer to search and order live DOM elements.

Server-side processing with CodeIgniter

14th Jan 2020

Samson Luvanda has created and documented a library to enable server-side processing in a CI environment.

SSP with .NET Core — complex filtering

13th Aug 2019

An update to Abdul Rahman’s .NET Core library for DataTables server-side processing has added support for complex filtering and sorting.

CodeIgniter with server-side processing

25th Jul 2019

Iftikhar has written a detailed tutorial on how to use DataTables’ server-side processing with CodeIgniter.

MongoDB server-side processing

13th Jun 2019

David Leon as written an article, and published the corresponding software, on how to use DataTables server-side processing with MongoDB in PHP.

SSP with .NET Core

10th Jun 2019

Abdul Rahman has created a new .NET Core library for server-side processing with DataTables — MIT licensed.

ThemeForest themes with DataTables

If you are looking for a quick way of creating stylish looking tables, integrated with the rest of your site, then there are a number of themes available on ThemeForest which use DataTables.

More From The Blog Around The Web

Функция сравнения

Цель функции сравнения — определить альтернативный порядок сортировки.

Функция сравнения должна возвращать отрицательное, нулевое или положительное значение в зависимости от аргументов:

function(a, b){return a — b}

Когда функция сравнивает два значения, она отправляет значения в функцию сравнения и сортирует значения в соответствии с возвращенным (отрицательным, нулевым, положительным) значением.

Если результат отрицательный, сортируется перед .

Если результат положительный, сортируется перед .

Если результат равен 0, никакие изменения не выполняются с порядком сортировки двух значений.

Пример:

Функция сравнения сравнивает все значения в массиве, два значения одновременно .


При сравнении 40 и 100 метод вызывает функцию сравнения (40, 100).

Функция вычисляет 40 — 100 , и поскольку результат отрицательный (-60), функция сортировки будет сортировать 40 как значение, меньшее 100.

Вы можете использовать этот фрагмент кода, чтобы поэкспериментировать с числовой и алфавитной сортировкой:

<button onclick=»myFunction1()»>Sort Alphabetically</button><button onclick=»myFunction2()»>Sort Numerically</button><p id=»demo»></p><script>var points = ; document.getElementById(«demo»).innerHTML = points;function myFunction1() {  points.sort();  document.getElementById(«demo»).innerHTML = points;}function myFunction2() {  points.sort(function(a, b){return a — b});  document.getElementById(«demo»).innerHTML = points;} </script>

События взаимодействия Sortable

Взаимодействие Sortable поддерживает все события, определенные для взаимодействия Draggable, которые были описаны в предыдущей статье. Кроме того, взаимодействие Sortable поддерживает ряд собственных событий, перечень которых приведен в таблице ниже:

События взаимодействия Sortable
Событие Описание
change Происходит при изменении позиции элемента в результате сортировки, выполненной пользователем
receive Происходит при перемещении элемента в данный сортируемый элемент-контейнер из другого связанного сортируемого элемента-контейнера
remove Происходит при перемещении элемента из данного сортируемого элемента-контейнера в другой связанный сортируемый элемент-контейнер
sort Происходит при каждом перемещении мыши в процессе сортировки
update Происходит при завершении перемещения элемента пользователем при условии, что порядок элементов был изменен

При наступлении каждого из этих событий jQuery UI предоставляет дополнительную информацию посредством передаваемого обработчику события в качестве аргумента объекта ui, свойства которого перечислены в таблице ниже:

Свойства объекта ui взаимодействия Sortable
Свойство Описание
helper Возвращает вспомогательный элемент
position Возвращает информацию о текущем местоположении вспомогательного элемента в виде объекта со свойствами top и left
item Возвращает объект jQuery, содержащий перемещаемый элемент
placeholder Возвращает объект jQuery, представляющий позицию, с которой был перемещен или куда будет перемещен сортируемый элемент
sender Возвращает объект jQuery, содержащий связанный сортируемый контейнерный элемент, в котором ранее находился перемещенный элемент (в отсутствие связанных сортируемых контейнеров значение этого свойства равно null)

Пример использования объекта ui вместе с событиями sort и change приведен ниже:

Здесь события используются для отображения информации о выполняемой операции сортировки. Функция—обработчик события sort считывает значение свойства ui.item и получает значение атрибута id перемещаемого элемента. Обработчик события change считывает значение свойства ui.placeholder и использует метод index для вычисления позиции заместителя элемента среди сортируемых элементов.

ИЗОБРАЖЕНИЯ

Слайд шоуГалерея слайд шоуМодальное изображениеЛайтбоксОтзывчивая сетка изображенийСетка изображенийГалерея вкладокЭффект наведения на изображениеНаложение слайда на изображениеНаложение на изображениеНаложение заголовка на изображениеНаложение иконки на изображениеЭффект к изображениюЧерно-белое изображениеТекст на изображенииИзображение с текстовым блокомИзображение c прозрачным текстомИзображение на всю страницуФорма на изображенииИзображение герояРазмытое фоновое изображениеФоновое изображениеВыравненные изображенияОкругленные изображенияИзображение аватарОтзывчивое изображениеИзображение по центруМинитюрное изображениеЗнакомство с командойЛипкое изображениеЗеркальное изображениеДрожание изображенияГалерея портфолиоПортфолио фильтрЗум изображенияЛупа изображенияПолзунок сравнения

Advanced tables, instantly

DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, built upon the foundations of progressive enhancement, that adds all of these advanced features to any HTML table.

Pagination Previous, next and page navigation.

Instant search Filter results by text search.

Multi-column ordering Sort data by multiple columns at once.

Use almost any data source DOM, Javascript, Ajax and server-side processing.

Easily theme-able DataTables theme creator, Bootstrap 3/, Foundation and Semantic UI.

Wide variety of extensions

Editor, Buttons, Responsive and more.

Mobile friendly Tables adapt to the viewport size.

Fully internationalisable Easily translate DataTables into multiple languages.

Free open source software MIT license! Commercial support.

Initialization Options

By default, to indicate a table should be sortable, add the attribute ‘data-sortable’ to the table container element. Multiple tables on a single page can be sortable.

An optional string representing a custom selector can be passed to the library when initialized. By default the library uses ‘table’.

sortablejs({ tableSelector'.custom-sortable-table-classname'});

Use these options to override the default targets for header cells and body rows. This is mostly useful for cases where you may be creating a table using atypical HTML elements.

sortablejs({    tableSelector'.fake-table',    headerRowSelector'.fake-table-header > div',    bodyRowsSelector'.fake-table-row',})

Currently, the library uses one generic sort function. It is possible to pass in custom sort functions. To do so you should do two things:

  1. Add the data-sortable-type attribute to the header cell of the column you wish to sort with a corresponding value matching the name of your custom sort function.

    <thdata-sortable-type="color">Colors</th>
  2. Add a corresponding sort function to the cusomSortFunctions object in the settings object.

    sortablejs({  tableSelector'table',  customSortFunctions{color()=>{},}})
  • IMPORTANT: If you pass a sort function that does not have a matching data-sortable-type on the table, the library will default to using the generic sort function

  • DOUBLE DOG IMPORTANT: Do not use a custom sort function with the name __default__ unless you’re the sort of person who likes starting off their JS programs with Object.prototype.hasOwnProperty = () => false;


Your custom sort function will be called with three arguments: the current value, the next value, and a boolean representing whether or not the current sort direction is up.

Your sort function should return an integer value representing the desired order of the current and next values. In the case of equality (returning 0), their order will be preserved.

A basic example of a numerical sort function:

constnumber=(a,b,sortUp)=>{return sortUp ? a -b b - a;}

An updated answer (October 2014)

I was really annoyed about this string natural sorting order so I took quite some time to investigate this issue. I hope this helps.

Bugs found in all the custom javascript «natural string sort order» implementations

There are quite a bunch of custom implementations out there, trying to do string comparison more precisely called «natural string sort order»

When «playing» with these implementations, I always noticed some strange «natural sorting order» choice, or rather mistakes (or omissions in the best cases).

Typically, special characters (space, dash, ampersand, brackets, and so on) are not processed correctly.

You will then find them appearing mixed up in different places, typically that could be:

  • some will be between the uppercase ‘Z’ and the lowercase ‘a’
  • some will be between the ‘9’ and the uppercase ‘A’
  • some will be after lowercase ‘z’

When one would have expected special characters to all be «grouped» together in one place, except for the space special character maybe (which would always be the first character). That is, either all before numbers, or all between numbers and letters (lowercase & uppercase being «together» one after another), or all after letters.

My conclusion is that they all fail to provide a consistent order when I start adding barely unusual characters (ie. characters with diacritics or charcters such as dash, exclamation mark and so on).

Research on the custom implementations:

  • https://github.com/litejs/natural-compare-lite : Fails at sorting consistently https://github.com/litejs/natural-compare-lite/issues/1 and http://jsbin.com/bevututodavi/1/edit?js,console , basic latin characters sorting http://jsbin.com/bevututodavi/5/edit?js,console
  • https://github.com/javve/natural-sort : Fails at sorting consistently, see issue https://github.com/javve/natural-sort/issues/7 and see basic latin characters sorting http://jsbin.com/cipimosedoqe/3/edit?js,console
  • https://github.com/overset/javascript-natural-sort : seems rather neglected since February 2012, Fails at sorting consistently, see issue https://github.com/overset/javascript-natural-sort/issues/16
  • http://www.davekoelle.com/files/alphanum.js , Fails at sorting consistently, see http://jsbin.com/tuminoxifuyo/1/edit?js,console

Browsers’ native «natural string sort order» implementations via

oldest implementation (without the locales and options arguments) is supported by IE6+, see http://msdn.microsoft.com/en-us/library/ie/s4esdbwz(v=vs.94).aspx (scroll down to localeCompare() method). The built-in method does a much better job at sorting, even international & special characters. The only problem using the method is that «the locale and sort order used are entirely implementation dependent». In other words, when using localeCompare such as stringOne.localeCompare(stringTwo): Firefox, Safari, Chrome & IE have a different sort order for Strings.

Research on the browser-native implementations:

  • http://jsbin.com/beboroyifomu/1/edit?js,console — basic latin characters comparison with localeCompare() http://jsbin.com/viyucavudela/2/ — basic latin characters comparison with localeCompare() for testing on IE8
  • http://jsbin.com/beboroyifomu/2/edit?js,console — basic latin characters in string comparison : consistency check in string vs when a character is alone
  • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare — IE11+ supports the new locales & options arguments

Difficulty of «string natural sorting order»

Implementing a solid algorithm (meaning: consistent but also covering a wide range of characters) is a very tough task. UTF8 contains more than 2000 characters & covers more than 120 scripts (languages). Finally, there are some specification for this tasks, it is called the «Unicode Collation Algorithm», which can be found at http://www.unicode.org/reports/tr10/ . You can find more information about this on this question I posted https://softwareengineering.stackexchange.com/questions/257286/is-there-any-language-agnostic-specification-for-string-natural-sorting-order

Basic Array Sorting

By default, the JavaScript function converts each element in the array that needs to be sorted into a string, and compares them in Unicode code point order.

You may be wondering why 32 comes before 5. Not logical, huh? Well, actually it is. This happens because each element in the array is first converted to a string, and comes before in Unicode order.

It’s also worth noting that unlike many other JavaScript array functions, actually changes, or mutates the array it sorts.

To avoid this, you can create a new instance of the array to be sorted and modify that instead. This is possible using an array method that returns a copy of the array. For example, Array.slice:

Or if you prefer a newer syntax, you can use the spread operator for the same effect:

The output is the same in both cases:

Try it out

See the Pen MWWqbKY by SitePoint (@SitePoint) on CodePen.

Using alone wouldn’t be very useful for sorting an array of objects. Thankfully, the function takes an optional parameter, which causes the array elements to be sorted according to the return value of the compare function.

Docs


Use method to create a sortable list:

sortable('.sortable');

Use CSS selectors to change the styles of the placeholder. You may change the class by setting the option in the config object.

sortable('.sortable',{  placeholderClass'my-placeholder fade'});

You can nest sortables inside each other. However, take care to add a wrapper around the items, a sortable-item can not at the same time be a .

<divclass="list"><divclass="item"> Item 1<divclass="sublist"><divclass="subitem">Subitem 1</div><divclass="subitem">Subitem 2</div></div></div><divclass="item"> Item 2 </div></div>

Сортировка таблицы по заголовкам

Щелкните заголовки, чтобы отсортировать таблицу.

Нажмите «Имя», чтобы отсортировать по имени «Страна», чтобы отсортировать по странам.

При первом щелчке направление сортировки будет возрастать (от A до Z).

Щелкните еще раз, и направление сортировки будет нисходящим (от Z до A):

Имя Страна
Berglunds snabbkop Швеция
North/South Великобритания
Alfreds Futterkiste Германия
Koniglich Essen Германия
Magazzini Alimentari Riuniti Италия
Париж specialites Франция
Island Trading Великобритания
Laughing Bacchus Winecellars Канада

Пример

<table id=»myTable2″><tr><!— При нажатии на заголовок запустите функцию sortTable с параметром,0 для сортировки по именам, 1 для сортировки по стране: —><th onclick=»sortTable(0)»>Имя</th><th onclick=»sortTable(1)»>Страна</th></tr>…<script>function sortTable(n) {  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;  table = document.getElementById(«myTable2»);  switching = true;  // Set the sorting direction to ascending:  dir = «asc»;   /* Сделайте цикл, который будет продолжаться до тех пор, пока  никакого переключения не было сделано: */  while (switching) {    // Начните с того, что скажите: переключение не выполняется:    switching = false;    rows = table.rows;    /* Цикл через все строки таблицы (за исключением    во-первых, который содержит заголовки таблиц): */    for (i = 1; i < (rows.length — 1); i++) {      // Начните с того, что не должно быть никакого переключения:      shouldSwitch = false;      /* Получите два элемента, которые вы хотите сравнить,      один из текущей строки и один из следующей: */      x = rows.getElementsByTagName(«TD»);      y = rows.getElementsByTagName(«TD»);      /* Проверьте, должны ли две строки поменяться местами,      основанный на направлении, asc или desc: */      if (dir == «asc») {        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {          // Если это так, отметьте как переключатель и разорвать цикл:          shouldSwitch = true;          break;        }      } else if (dir == «desc») {        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {          // Если это так, отметьте как переключатель и разорвать цикл:          shouldSwitch = true;          break;        }      }    }    if (shouldSwitch) {      /* Если переключатель был отмечен, сделайте переключатель      и отметьте, что переключатель был сделан: */      rows.parentNode.insertBefore(rows, rows);      switching = true;      // Каждый раз, когда выполняется переключение, увеличьте это число на 1:      switchcount ++;     } else {      /* Если переключение не было сделано и направление «asc»,      установите направление на «desc» и снова запустите цикл while. */      if (switchcount == 0 && dir == «asc») {        dir = «desc»;        switching = true;      }    }  }}</script>

Arguments

other arguments passed onto

swap

If , modifies the behaviour of to allow for items to be swapped with each other rather than sorted. Once dragging starts, the user can drag over other items and there will be no change in the elements. However, the item that the user drops on will be swapped with the originally dragged item. See also https://github.com/SortableJS/Sortable/tree/master/plugins/Swap

multiDrag

If , allows the selection of multiple items within a at once, and drag them as one item. Once placed, the items will unfold into their original order, but all beside each other at the new position. See also https://github.com/SortableJS/Sortable/wiki/Dragging-Multiple-Items-in-Sortable

group

To drag elements from one list into another, both lists must have the same group value. See

for more details. []

sort

Boolean that allows sorting inside a list. []

delay

Time in milliseconds to define when the sorting should start. []

disabled

Boolean that disables the if set to true. []

animation

Millisecond duration of the animation of items when sorting

handle

CSS selector used for the drag handle selector within list items. []

filter

CSS selector or JS function used for elements that cannot be dragged. []

draggable

CSS selector of which items inside the element should be draggable. []

swapThreshold

Percentage of the target that the swap zone will take up, as a number between and . []

invertSwap

Set to to set the swap zone to the sides of the target, for the effect of sorting «in between» items. []

direction

Direction of []

scrollSensitivity

Number of pixels the mouse needs to be to an edge to start scrolling. []

scrollSpeed

Number of pixels for the speed of scrolling. []

onStart, onEnd

JS function called when an element dragging starts or ends

onAdd

JS function called when an element is dropped into the list from another list

onUpdate

JS function called when the sorting is changed within a list

onSort

JS function called by any change to the list (add / update / remove)

onRemove

JS function called when an element is removed from the list into another list

onFilter

JS function called when an attempt is made to drag a filtered element

onMove

JS function called when an item is moved in a list or between lists

onLoad

JS function dispatched on the «next tick» after SortableJS has initialized

Menus

Icon BarMenu IconAccordionTabsVertical TabsTab HeadersFull Page TabsHover TabsTop NavigationResponsive TopnavNavbar with IconsSearch MenuSearch BarFixed SidebarSide NavigationResponsive SidebarFullscreen NavigationOff-Canvas MenuHover Sidenav ButtonsSidebar with IconsHorizontal Scroll MenuVertical MenuBottom NavigationResponsive Bottom NavBottom Border Nav LinksRight Aligned Menu LinksCentered Menu LinkEqual Width Menu LinksFixed MenuSlide Down Bar on ScrollHide Navbar on ScrollShrink Navbar on ScrollSticky NavbarNavbar on ImageHover DropdownsClick DropdownsDropdown in TopnavDropdown in SidenavResp Navbar DropdownSubnavigation MenuDropupMega MenuMobile MenuCurtain MenuCollapsed SidebarCollapsed SidepanelPaginationBreadcrumbsButton GroupVertical Button GroupSticky Social BarPill NavigationResponsive Header

Menus

Icon BarMenu IconAccordionTabsVertical TabsTab HeadersFull Page TabsHover TabsTop NavigationResponsive TopnavNavbar with IconsSearch MenuSearch BarFixed SidebarSide NavigationResponsive SidebarFullscreen NavigationOff-Canvas MenuHover Sidenav ButtonsSidebar with IconsHorizontal Scroll MenuVertical MenuBottom NavigationResponsive Bottom NavBottom Border Nav LinksRight Aligned Menu LinksCentered Menu LinkEqual Width Menu LinksFixed MenuSlide Down Bar on ScrollHide Navbar on ScrollShrink Navbar on ScrollSticky NavbarNavbar on ImageHover DropdownsClick DropdownsDropdown in TopnavDropdown in SidenavResp Navbar DropdownSubnavigation MenuDropupMega MenuMobile MenuCurtain MenuCollapsed SidebarCollapsed SidepanelPaginationBreadcrumbsButton GroupVertical Button GroupSticky Social BarPill NavigationResponsive Header

MIT LICENSE

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the «Software»), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED «AS IS», WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Table requirements:

Tables do not need to use table specific elements if a custom override is provided (see second example below)

<tabledata-sortable><thead><tr><th><th><th><th></tr></thead><tbody><tr><td><td><td><td></tr><tr><td><td><td><td></tr></tbody><tfoot><td><td></tfoot></table>
sortablejs()
<divclass="fake-table"><divclass="fake-table-header"><div><div><div><div><div><div></div><divclass="fake-table-row"><div><div><div><div><div><div></div><divclass="fake-table-row"><div><div><div><div><div><div></div></div>
sortablejs({    tableSelector'.fake-table',    headerRowSelector'.fake-table-header > div',    bodyRowsSelector'.fake-table-row',})

Sorting a bootstrap menu

  • Sort vertically
  • Define the nested containers differently
  • Exclude some items from being sortable

Heads Up! The should always match every sibling of any item. If you want to exclude some items, use the option. See the first example why this is a good idea.

$("ol.nav").sortable({
  group: 'nav',
  nested: false,
  vertical: false,
  exclude: '.divider-vertical',
  onDragStart: function($item, container, _super) {
    $item.find('ol.dropdown-menu').sortable('disable');
    _super($item, container);
  },
  onDrop: function($item, container, _super) {
    $item.find('ol.dropdown-menu').sortable('enable');
    _super($item, container);
  }
});

$("ol.dropdown-menu").sortable({
  group: 'nav'
});

Definition and Usage

The sort() method sorts the items of an array.

The sort order can be either alphabetic or numeric, and either ascending (up) or descending (down).

By default, the sort() method sorts the values as strings in alphabetical and ascending order.

This works well for strings («Apple» comes before «Banana»). However, if numbers are sorted as strings, «25» is bigger than «100», because «2» is bigger than «1».

Because of this, the sort() method will produce an incorrect result when sorting numbers.

You can fix this by providing a «compare function» (See «Parameter Values» below).

Note: This method changes the original array.

ФОРМЫ

Форма входаФорма регистрацииФорма оформления заказаКонтактная формаФорма входа в соц сетиРегистрацияФорма с иконкамиРассылка по почтеСложенная формаАдаптивная формаФорма всплывающаяФорма линейнаяОчистить поле вводаКопирование текста в буфер обменаАнимированный поискКнопка поискаПолноэкранный поискПоле ввода в менюФорма входа в менюПользовательский флажок/радиоПользовательский выборТумблер перключательУстановить флажокОпределить Caps LockКнопка запуска на EnterПроверка пароляПереключение видимости пароляМногоступенчатая формаФункция автозаполнения


С этим читают