Home>

When the page list contains a lot of content,We may need to sort the content in a certain way,For example, sort by alphabet or size.This article will use the sort plugin jsort to sort the page content.

The jsort plugin can sort any page content (tables, lists, div elements), is cross-browser compatible and very lightweight.

Operation effect diagram:

xhtml

First introduce the jquery library and jsort plugin in the head section.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/
jquery.min.js "></script>
<script type="text/javascript" src="jquery.jsort.0.4.js"></script>

Then add the following code directly to the body:

<ul>
   <li>by title ↑</li>
   <li>By title ↓</li>
</ul>
<div>
   <div>
     <img src="images/s1.jpg" />
     <h3>1. Beijing Libyan Embassy raises opposition flag</h3>
     <p>On August 22, the Libyan Embassy in Beijing,The national flag in front of the door has been replaced by the national flag of the opposition.
At around 11 am on the 22nd,The reporter interviewed by phone the Libyan Embassy in China.
A Chinese staff member told reporters,We haven't received any notifications of closing and work adjustment.
Embassy staff
Should go to work as usual.
</p>
     <p><a href="#">View details</a></p>
   </div>
   .... multiple divs
</div>

It can be seen that the html structure consists of two control buttons,And content rendering area div #divs.

cssUse css to beautify html pages.

#nav {width:100%;margin:10px auto;}
#nav li {float:left;width:80px;height:24px;line-height:24px;margin-right:10px;
border:1px solid #d3d3d3;background:#f7f7f7;text-align:center;cursor:pointer}
#divs div {height:180px;margin:10px 0px;padding:15px;background:#f7f7f7;
border-bottom:1px solid #ddd}
#divs div img {float:left;width:240px;height:160px;margin:10px}
#divs div h3 {line-height:24px;margin:10px 5px;font-size:16px;color:#456}
#divs div p {line-height:22px;margin:6px 5px}

jquery

When clicking the control button,Call the jsort plugin to sort the content,Please see the code:

$("#asc_btn"). click (function () {
  $("#divs"). jsort ({
    sort_by:"h3.title",    item:"div",    order:"asc"
  });
});

The jsort plugin provides several parameters that can be configured:

item:points to the html content element that needs to be sorted,The default is div, in this case sorting the content in the div.

sort_by:points to the element in the item that needs to be sorted,The default is p. In this example, h3.title is sorted.

order:Sort by,asc-order, desc-reverse, default is asc.

is_num:Whether to sort by number,The default is false.

sort_by_attr:Whether to sort by html element attributes,The default is false.

attr_name:Attribute name.If sort_by_attr is set to true, you can sort by the attribute of the corresponding element.If you need to sort Chinese strings,It is best to set the sorting based on attributes,The value of the attribute can be alphabetic or numeric.

  • Previous How to optimize MongoDB performance (five simple steps)
  • Next Several methods to perfectly solve browser cross-domain (summary)