Home > Developer > JavaScript
I found a table sorting on the Internet, but there is a problem in ascending and descending order, and the sorting time is incorrect. Therefore, I wrote a table sorting plug-in.
It can be sorted by any field. Because JavaScript sorting is used, it is refreshing and fast.
Default example:
<Script type = "text/javascript" src = "/static/js/jquery. min. js"> </script>
<Script type = "text/javascript" src = "/static/js/jquery. table. sort. js"> </script>
$ (Function (){
$ (". DataGrid"). sort ();
});
Example with parameters:
<Script type = "text/javascript" src = "/static/js/jquery. min. js"> </script>
<Script type = "text/javascript" src = "/static/js/jquery. table. sort. js"> </script>
$ (Function (){
$ (". DataGrid"). sort ({
'Ascimgurl': '/static/images/bullet_arrow_up.png ',
'Scimgurl': '/static/images/bullet_arrow_down.png ',
'Enable':-1,
'Isheaderth': true
});
});
Parameter Api details:
Parameter Name type description
AscImgUrl string ascending image address
DescImgUrl string descending image address
Last Row of endRow int (negative number indicates the last row)
Whether the title of isHeaderTh boolean header is th
Example with html:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> activity Editor </title>
<Link rel = "stylesheet" href = "css/editorBase.css" type = "text/css">
<Link rel = "stylesheet" href = "css/kickstart-buttons.css" type = "text/css"/>
<Script type = "text/javascript" src = "js/jquery. min. js"> </script>
<Script type = "text/javascript" src = "js/jquery. table. sort. js"> </script>
<Script type = "text/javascript" src = "js/artDialog. js? Skin = blue "> </script>
<Script type = "text/javascript">
$ (Function (){
$ (". DataGrid"). sort ({
'Ascimgurl': 'images/bullet_arrow_up.png ', // ascending Image
'Destimgurl': 'images/bullet_arrow_down.png ', // descending Image
'Endrow':-1 // the last row to be sorted.-1 indicates the last row.
});
// Select all
$ ("# CheckAll"). click (function (){
$ (": Checkbox"). attr ("checked", $ (this). attr ("checked "));
});
});
</Script>
</Head>
<Body>
<Form action = "/index. php? App = editor & m = Common & action = outputConfig "method =" post ">
<Font color = "red"> A new activity configuration table cannot be used directly for a new activity. You can only create or copy an activity. </font>
<Table class = "DataGrid" cellspacing = "0" width = "100%">
<Thead>
<Tr>
<Th colspan = "9"> activity list </th>
</Tr>
<Tr>
<Th> <input type = "checkbox" id = "checkAll"> </input> </th>
<Th sort = "true"> ID </th>
<Th sort = "true"> activity name </th>
<Th sort = "true"> Category </th>
<Th sort = "true"> Start time </th>
<Th sort = "true"> end time </th>
<Th width = "12%"> operation </th>
</Tr>
</Thead>
<Tbody>
<Input type = "hidden" name = "sortId []" value = "668"/>
<Tr class = "odd">
<Td align = "center"> <input name = "id []" class = "checkIds" type = "checkbox" value = 668> </input> </td>
<Td> 668 </td>
<Td>
Special Test
</Td>
<Td> special class </td>
<Td> 16:50:00 </td>
<Td> 16:50:00 </td>
<Td>
<A href = "/index. php? App = editor & m = Special & action = save & id = 668 "> <font color =" # FF0000 "> modify </font> </a>
| <A href = "/index. php? App = editor & m = Common & action = copy & id = 668 "> <font color =" # FF0000 "> copy </font> </a> </font> </a>
| <A href = "/index. php? App = editor & m = Common & action = delete & id = 668 "class =" delete "> delete </font> </a>
</Td>
</Tr>
<Input type = "hidden" name = "sortId []" value = "667"/>
<Tr>
<Td align = "center"> <input name = "id []" class = "checkIds" type = "checkbox" value = 667> </input> </td>
<Td> 667 </td>
<Td>
<Font color = red> test </font>
</Td>
<Td> ranking type </td>
<Td> 16:41:00 </td>
<Td> 16:41:00 </td>
<Td>
<A href = "/index. php? App = editor & m = Rank & action = save & id = 667 "> <font color =" # FF0000 "> modify </font> </a>
| <A href = "/index. php? App = editor & m = Common & action = copy & id = 667 "> <font color =" # FF0000 "> copy </font> </a> </font> </a>
| <A href = "/index. php? App = editor & m = Common & action = delete & id = 667 "class =" delete "> delete </font> </a>
</Td>
</Tr>
<Input type = "hidden" name = "sortId []" value = "666"/>
<Tr class = "odd">
<Td align = "center"> <input name = "id []" class = "checkIds" type = "checkbox" value = 666> </input> </td>
<Td> 666 </td>
<Td>
<Font color = gray> sadasd </font>
</Td>
<Td> ranking type </td>
<Td> 10:16:00 </td>
<Td> 10:16:00 </td>
<Td>
<A href = "/index. php? App = editor & m = Rank & action = save & id = 666 "> <font color =" # FF0000 "> modify </font> </a>
| <A href = "/index. php? App = editor & m = Common & action = copy & id = 666 "> <font color =" # FF0000 "> copy </font> </a> </font> </a>
| <A href = "/index. php? App = editor & m = Common & action = delete & id = 666 "class =" delete "> delete </font> </a>
</Td>
</Tr>
<Input type = "hidden" name = "sortId []" value = "665"/>
<Tr>
<Td align = "center"> <input name = "id []" class = "checkIds" type = "checkbox" value = 665> </input> </td>
<Td> 665 </td>
<Td>
<Font color = red> test </font>
</Td>
<Td> special class </td>
<Td> 17:56:00 </td>
<Td> 17:56:00 </td>
<Td>
<A href = "/index. php? App = editor & m = Special & action = save & id = 665 "> <font color =" # FF0000 "> modify </font> </a>
| <A href = "/index. php? App = editor & m = Common & action = copy & id = 665 "> <font color =" # FF0000 "> copy </font> </a> </font> </a>
| <A href = "/index. php? App = editor & m = Common & action = delete & id = 665 "class =" delete "> delete </font> </a>
</Td>
</Tr>
<Input type = "hidden" name = "sortId []" value = "664"/>
<Tr class = "odd">
<Td align = "center"> <input name = "id []" class = "checkIds" type = "checkbox" value = 664> </input> </td>
<Td> 664 </td>
<Td>
<Font color = red> test </font>
</Td>
<Td> special class </td>
<Td> 17:56:00 </td>
<Td> 17:56:00 </td>
<Td>
<A href = "/index. php? App = editor & m = Special & action = save & id = 664 "> <font color =" # FF0000 "> modify </font> </a>
| <A href = "/index. php? App = editor & m = Common & action = copy & id = 664 "> <font color =" # FF0000 "> copy </font> </a> </font> </a>
| <A href = "/index. php? App = editor & m = Common & action = delete & id = 664 "class =" delete "> delete </font> </a>
</Td>
</Tr>
</Tbody>
<Tfoot>
<Tr>
<Td> </td>
<Td colspan = "11"> <input type = "submit" id = "saveSort" value = "save"> </td>
</Tr>
</Tfoot>
</Table>
<Br/>
</Form>
</Body>
</Html>
Jquery. table. sort. js code:
/**
* Jquery table plugin
* @ Author ZouHao
* @ Param ascImgUrl: ascending image address
* @ Param descImgUrl: The image address in descending order.
* Example:
* 1: The default syntax is used.
* $ ("Table"). sort ();
* 2: Use the parameter syntax
* $ ("Table"). sort ({
* 'Ascimgurl': '/static/images/bullet_arrow_up.png ',
'Scimgurl': '/static/images/bullet_arrow_down.png ',
'Endrow': 0, // the last row
'Isheaderth': true // the header is th or td
*});
*/
; (Function ($ ){
$. Fn. sort = function (options ){
Var settings = $. extend ({
'Ascimgurl': '/static/images/bullet_arrow_up.png', // ascending Image
'Destimgurl': '/static/images/bullet_arrow_down.png', // picture in descending order
'Endrow': 0, // the last row
'Isheaderth': true // the header is th or td
}, Options );
Init (this );
Function init (p ){
// Initialize some variables
Var node = settings. isHeaderTh? 'Th': 'td ';
Var trList = $ (p). find ("tr" + node + "[sort = 'true']");
If (settings. endRow = 0 ){
Settings. endRow = $ (p). find ("tr"). size ();
} Else if (settings. endRow <0 ){
Settings. endRow = $ (p). find ("tr"). size () + settings. endRow;
} Else {
Settings. endRow = $ (p). find ("tr"). size ()-settings. endRow;
}
// Initialize the click table header event
TrList. click (function (){
// Obtain the current number of rows
Settings. startRow = $ (this). parent (). index ();
Settings. index = $ (this). index ();
If ($ (this). find ("img"). size () = 2 ){
AddImg (trList );
RemoveImg (this, 'asc ');
ChangeTableBody (p, 'asc ');
} Else {
If ($ (this). find ("img"). attr ("src") = settings. ascImgUrl ){
AddImg (trList );
RemoveImg (this, 'desc ');
ChangeTableBody (p, 'desc ');
} Else {
AddImg (trList );
RemoveImg (this, 'asc ');
ChangeTableBody (p, 'asc ');
}
}
});
// Initialize the header Image
AddImg (trList );
}
// Sort the data
Function changeTableBody (p, sort ){
Data = new Array ();
// Select the row
Var trBodyList = $ (p). find ("tr: lt (" + settings. endRow + "): gt (" + settings. startRow + ")");
TrBodyList. each (function (I ){
Data [I] = new Array ();
$ (This). find ("td"). each (function (j ){
Datacompute‑icompute‑registry.html ();
});
});
Data. sort (function (x, y ){
If (sort = 'asc '){
Return x [settings. index]. localeCompare (y [settings. index]);
} Else {
Return y [settings. index]. localeCompare (x [settings. index]);
}
});
TrBodyList. each (function (I ){
$ (This). find ("td"). each (function (j ){
Certificate (this).html (data [I] [j]);
});
});
}
/**
* Add images to the header of each table
*/
Function addImg (trList ){
TrList. find ("img"). remove ();
TrList. append (' ')
}
/**
* Remove the image from the list in ascending or descending order.
*/
Function removeImg (p, sort ){
Var imgUrl = sort = 'desc '? Settings. ascImgUrl: settings. descImgUrl;
$ (P). find ("img"). each (function (){
If ($ (this). attr ("src") = imgUrl ){
$ (This). remove ();
Return false;
}
});
}
};
}) (JQuery );
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
