How to use the page content sorting plug-in jSort_jquery

When the page list has a lot of content, we may need to sort the content in a certain way, such as by alphabet or size. This article will use the sorting plug-in jSort to sort page content.
The jSort plug-in can sort any content on the page (tables, lists, div elements), is cross-browser compatible and is very lightweight.

Operation rendering:

XHTML
First introduce the jquery library and jSort plug-in in the head part.

<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 id="nav"> 
   <li id="asc_btn">按标题↑</li> 
   <li id="desc_btn">按标题↓</li> 
</ul> 
 
<div id="divs"> 
   <div> 
     <img src="/static/imghwm/default1.png"  data-src="images/s1.jpg"  class="lazy" alt="" /> 
     <h3 id="北京利比亚驻华大使馆升起反对派国旗">1.北京利比亚驻华大使馆升起反对派国旗</h3> 
     <p>8月22日，北京利比亚驻华大使馆，门前的国旗已经更换成了反对派的国旗。22日上午11点左右， 
记者电话采访了利比亚驻华使馆，一位中方工作人员告诉记者，目前未接到闭馆和工作调整的通知，使馆人员 
应该会照常上班。</p> 
     <p><a href="#">查看详情</a></p> 
   </div> 
   ....多个div 
</div> 

It can be seen that the HTML structure consists of two control buttons and the content rendering area div#divs.
CSS
Use 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 the control button is clicked, the jSort plug-in is called 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 configurable parameters:
item: points to the html content element that needs to be sorted. The default is div. In this example, the content in the div is sorted.
sort_by: points to the element within the item that needs to be sorted. The default is p. In this example, the element to be sorted is h3.title.
order: sorting method, asc-order, desc-reverse order, the default is asc.
is_num: Whether to sort by numerical size, the default is false.
sort_by_attr: Whether to sort according to html element attributes, the default is false.
attr_name: Attribute name. If sort_by_attr is set to true, you can sort according to the attributes of the corresponding elements. If you need to sort Chinese strings, it is best to sort by attributes. The value of the attribute can be letters or numbers.

This is the introduction to how to use the plug-in jSort, let’s try it out!