Code of the local sorting instance for JSP front-end data and the jsp front-end sorting instance

Code of the local sorting instance for JSP front-end data and the jsp front-end sorting instance

In front-end, we often need to sort the data. First, write and introduce the js we have written.

$ (Function ($) {$ ('# sclazzid '). val ($ ('# void '). val (); document. getElementsByName ('nameup') [0]. style. display = "none"; document. getElementsByName ('nameup') [1]. style. display = "none"; document. getElementsByName ('nameup') [2]. style. display = "none"; document. getElementsByName ('nameup') [3]. style. display = "none"; var tabobj = document. getElementById ("tbValue");/** for (var I = 2; I <tabobj. rows. lengt H; I ++) {** if (tabobj. rows [I]. cells [1]. innerHTML = code) {** tabobj. rows [I]. style. backgroundColor = "red"; ** break;} */}); function OnChange (code) {// alert (document. getElementById ("drpIndustry "). value + "_" + code + ". html "); window. location. href = document. getElementById ("drpIndustry "). value + "_" + code + ". html ";} // converter, which converts the field type of the column to the sortable type: String, int, floatfunction convert (sValue, sDataType) {Switch (sDataType) {case "int": if (sValue! = "--") Return parseInt (sValue); else return-10000000000000; case "float": if (sValue! = "--") Return parseFloat (sValue); else return-10000000000000.0; case "date": if (sValue! = "--") Return new Date (Date. parse (sValue); else return "1900-01-01"; default: return sValue. toString () ;}// sorting function generator. iCol indicates the column index. sDataType indicates the Data Type of the column. function generateCompareTRs (iCol, sDataType) {return function compareTRs (oTR1, oTR2) {var vValue1 = convert (oTR1.cells [iCol]. firstChild. nodeValue, sDataType); var vValue2 = convert (oTR2.cells [iCol]. firstChild. nodeValue, sDataType); if (vValue1 <vValue 2) {return-1;} else if (vValue1> vValue2) {return 1;} else {return 0 ;};}// sorting method function sortTable (sTableID, iCol, sDataType) {if (document. getElementsByName ('nameup') [parseInt (iCol)-1]. style. display = 'None') {document. getElementsByName ('nameup') [parseInt (iCol)-1]. style. display = 'block'; document. getElementsByName ('namelow') [parseInt (iCol)-1]. style. display = 'none';} else {d Ocument. getElementsByName ('nameup') [parseInt (iCol)-1]. style. display = 'none'; document. getElementsByName ('namelow') [parseInt (iCol)-1]. style. display = 'block';} var oTable = document. getElementById (sTableID); var oTBody = oTable. tBodies [0]; var colDataRows = oTBody. rows; var aTRs = new Array; // put all columns in the Array for (var I = 0; I <colDataRows. length; I ++) {aTRs [I] = colDataRows [I];} // determines whether the last sorted column is No is the same as the column to be sorted now. if yes, use reverse () reverse order if (oTable. sortCol = iCol) {aTRs. reverse ();} else {// use the sort method of the array and upload it to the sorting function aTRs. sort (generateCompareTRs (iCol, sDataType);} var oFragment = document. createDocumentFragment (); for (var I = 0; I <aTRs. length; I ++) {aTRs [I]. cells [0]. innerHTML = I + 1; oFragment. appendChild (aTRs [I]);} oTBody. appendChild (oFragment); // record the column index oTable For The Last sorting. sortCol = iCol;} function DetatilWork (id) {alert (id); $. post ("", {id: id}, function () {});} function reflash () {window. location. reload (true);} function openSearch () {var name = $ ('# sname '). val (); var clazzId = $ ('# sclazzid '). val (); window. location. href = "assistantWork. action? Name = "+ name +" & clazzId = "+ clazzId;} function lastPage (page) {var name = $ ('# sname '). val (); var clazzId = $ ('# sclazzid '). val (); page = (page-1 <0 )? 0: (page-1); window. location. href = "assistantWork. action? Page = "+ page +" & name = "+ name +" & clazzId = "+ clazzId;} function selPage (page) {var name = $ ('# sname '). val (); var clazzId = $ ('# sclazzid '). val (); window. location. href = "assistantWork. action? Page = "+ page +" & name = "+ name +" & clazzId = "+ clazzId;} function nextPage (page, pages) {var name = $ ('# sname '). val (); var clazzId = $ ('# sclazzid '). val (); page = (page + 1> pages )? Pages: (page + 1); window. location. href = "assistantWork. action? Page = "+ page +" & name = "+ name +" & clazzId = "+ clazzId;} function detail (id, type) {$. ajax ({url: 'selectonework. action? Id = '+ id, async: false, // synchronous request error: function () {alert ("failed") ;}, success: function (data) {data = eval ("(" + data + ")"); $ ('# workid '). val (data. id); $ ('# cname '). val (data. name); $ ('# sclazzidm '). val (data. clazzId); $ ('# cdescription '). val (data. description) ;},}, 'json'); if (type = 1) {// you need to change it to setDisabled ();} else if (type = 2) {cleanDisabled () ;}} function add () {cleanDisabled () ;}function setDisabled () {$ ('# cname '). attr ("disabled", true); $ ('# sclazzidm '). attr ("disabled", true); $ ('# cdescription '). attr ("disabled", true); $ ('# submitwork '). attr ("disabled", true);} function cleanDisabled () {$ ('# cname '). attr ("disabled", false); $ ('# sclazzidm '). attr ("disabled", false); $ ('# cdescription '). attr ("disabled", false); $ ('# submitwork '). attr ("disabled", false );}

On the jsp page, we only need to embed the two divs in the field to achieve visual ascending or descending order. What truly achieves sorting is the click event on the field, the event execution method has been written in the above script. In this simple way, You can implement local sorting of table data, greatly reducing the number of accesses to the server.

1. in addition, in our jsp, we sometimes do not need the format of database data. In this case, we need to convert the format of data, there are many conversion methods. We can process the data format in the background, but this is not very efficient. We have such a label in jsp.

In this way, we implement date formatting. It is worth noting that the fmt here can only use the layout on my page and cannot be formatted using tools, processing will affect our local sorting, so we can only use my format

Thank you for reading this article. I hope it will help you. Thank you for your support for this site!