Oracle Database ajax paging Based on spring framework

I believe everyone is familiar with paging, and I have written it many times. it is only repeated every time, so I want to encapsulate it and simplify code writing in the future. first, I declare that the writing time is not long and the testing time is not long. if any bug occurs. please forgive me. you are welcome to contact us. this is for reference only. Do not laugh at it.
First, it encapsulates and uses jquery. If jquery is used, import the corresponding js in json transmission format, and the server uses Gson output json format.

Directly Add code

Js Code

/*************************************** ***************************** // AJAX paging /*** * Project name: SSE * Name: AJAXPage * class description: * created by: xuyw * Email: xyw10000@163.com * Creation Time: 10:27:55 * remarks: * version: 1.0 ** // -- call method/* var pagemedilobj = pageTool ({"url": "jsp/demo/pagetagdata. jsp ", -- Query url" formId ":" fm1 ", -- form ID" submitbtnId ":" submitbtn ", -- submit button ID" pagatelid ":" pagetool ", -- The display ID of the toolbar, that is, the next page of the previous page, and other options appear there. "pageRowsCo Unt ":", 20 ", -- how many" targetBody ":" pagetbody "are displayed on a page, -- the data display ID is where to traverse cyclically" columnsName ": ["ID", "CONTACT_NAME", "MOBILE", "ADDRESS", "DQ", "CREATE_USER"] -- display column name }); *//************************************* * *******************************/var pendpage = 1; // var pcurrentpage = 1 on the last page; // var pagerowscount = 10 on the current page; // The number of entries on the current page // idvar selectedId = "# pagetr0" on the selected row "; function selectClass (id) {$ (selectedId ). addC Lass ("selectObj"); $ (id). click (function () {// remove the class: selectedif (selectedId! = "") {$ (SelectedId ). removeClass ("selectObj");} // Add class: selected $ (this) to the current row ). addClass ("selectObj"); // update the last selected row selectedId = "#" + $ (this ). attr ("id") ;}); $ (id ). hover (function () {$ (this ). addClass ("hoverObj") ;}, function () {$ (this ). removeClass ("hoverObj") ;}) ;}function pageTool (config) {var object = new Object (); object. config = config; var url = config. url; // request address if (! Url) {alert ("Enter the request address"); return;} var formId = config. formId; // form IDif (! FormId) {alert ("Enter the Form ID"); return;} var pagemedilid = config. pagemedilid; // display the toolbar container IDif (! Pagemedilid) {alert ("Enter the toolbar container ID"); return;} var pageRowsCount = config. pageRowsCount; // how many if (! PageRowsCount) {pageRowsCount = "10, 12, 15, 18";} createTool (pagemedilid, pageRowsCount, 0, 0); var targetBody = config.tar getBody; var columnsName = config. columnsName; send (url, formId, targetBody, columnsName); // var endPage = config. data. endpage; // The total number of objects. gopage = function (cs) {send (url + "? CurrentPage = "+ cs, formId, targetBody, columnsName) ;}; var submitbtnId = config. submitbtnId; // how many if (submitbtnId) {$ ("#" + submitbtnId) are displayed on the page ). click (function () {gopage ('1') ;});} return object;} function createTool (id, pageRowsCount, totalpage, totalcount) {// create a paging toolbar var html2 = new Array (); html2.push ("per page"); Var pageOption = pageRowsCount. split (","); for (var I = 0; I <pageOption. length; I ++) {var temp = pageOption [I]; html2.push (""+ Temp +"");} Html2.push (""); Html2.push (" record | Total "+ totalpage +" "); html2.push (" Page/"+ totalcount +" record | "); html2.push ("first page"); html2.push ("Previous Page"); html2.push ("next page"); html2.push ("last page | nth"); html2.push ("PageGo"); $ (" # "+ Id ). append (html2.join ("");} function updateTool (totalcont, currentpage, endpage) {// update toolbar $ ("# ptotalpage" ).html (").html (endpage ); $ ("# ptotalcount" ).html ("" ).html (totalcont); var up = currentpage-1> 0? Currentpage-1: 1; var down = currentpage + 1> endpage? Endpage: currentpage + 1; $ ("# puppage "). attr ("href", "javascript: gopage ('" + up + "')"); $ ("# pdownpage "). attr ("href", "javascript: gopage ('" + down + "')"); $ ("# pendpage "). attr ("href", "javascript: gopage ('" + endpage + "')"); $ ("# pcurrentpage "). val (currentpage);} function send (url, formId, targetBody, columnsName) {$. post (url, $ ("#" + formId ). serialize (), function (data) {$ ("#" + targetBody + "tr "). remove (); var rowsdata = data. rowsdata; var html = new Array (); for (var I = 0; I <rowsdata. length; I ++) {html. push (""); Var trowsdata = rowsdata [I]; for (var j = 0; j <columnsName. length; j ++) {var tt = columnsName [j]; html. push (""+ Trowsdata [tt] +"");} Html. push ("") ;}$ (" # "+ TargetBody ). append (html. join (""); selectClass ("#" + targetBody + "tr"); pendpage = data. endpage; pcurrentpage = data. currentpage; pagerowscount = data. pagerowscount; updateTool (data. pagecount, pcurrentpage, pendpage) ;}function gopage (url) {if (url = 'btngopage') {url = $ ("# pcurrentpage "). val (); var reg1 =/^ \ d + $/; if (url. match (reg1) = null) {alert ("enter a valid page number"); $ ("# pcurrentpage "). focus (); return;} if (url * 1> pendpage) {alert ("Enter the page number"); $ ("# pcurrentpage "). focus (); return ;}}/* if (pagerowscount =unt ("# pagerowscount "). val () {if (pcurrentpage = url * 1) {alert ("current" + pcurrentpage + "Page, skip"); return ;}} */pagemedilobj. gopage (url );}

Css

/*------table----*/.table {width: 96%;margin-top: 0;margin-bottom: 0px;border: 1px solid #009170;border-top: 3px solid #009170;TABLE-LAYOUT: fixed}.table thead {background: #BEF4DD;color: #2A4705;}.table thead th {border-right: 1px solid #009170;border-top: 1px solid #009170;height: 25px;text-align: center;}.table tfoot {font-size: 12px;}.table tfoot tr {text-align: center;padding-right: 1em;}.table tfoot tr td {border-top: 1px solid #009170;text-align: right;background: #EEEEEE}.table tbody {font-size: 12px}.table tbody tr td {border: 1px solid #1A9C7E;text-align: center;padding: 2px;}.table tbody td .text {line-height: 1.5em;text-decoration: none}.table tbody td .text:link {line-height: 1.5em;text-decoration: none}.table tbody td .text:hover {color: red;text-decoration: underline;background: #f0eeee}.table tbody td .text:visited {color: red}.text {height: 18px;padding: 1px 2px 0px 2px;border: solid 1px #7F9DB9;}.selectObj {color: green;background-color: #FFee11;}.hoverObj {color: green;background-color: #FBEC88;}/*------table----*/#xuyw a {color: #3C6E31;text-decoration: none;}#xuyw a:hover {background-color: #3C6E31;color: white;}

Jsp code

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%><%@page isELIgnored="false"%><%String path = request.getContextPath();String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";%>My JSP 'pagetag.jsp' starting page
 
 
 
 
 
 
 <script type="text/javascript"src="<%=basePath%>/plug-in/easyui/jquery-1.8.0.min.js"></script><script type="text/javascript"src="<%=basePath%>js/ajaxpage/pagetool.js"></script><script type="text/javascript">var pageToolobj = pageTool({"url" : "jsp/demo/pagetagdata.jsp","formId" : "fm1","submitbtnId" : "submitbtn","pageToolId" : "pagetool","pageRowsCount" : "10,15,20","targetBody" : "pagetbody","columnsName" : [ "ID", "CONTACT_NAME", "MOBILE", "ADDRESS", "DQ","CREATE_USER" ]});</script>

Jsp processing is directly used in the background for ease of use

<% @ Page import = "com. xuyw. util. page. ajaxPageUtil "%> <% @ page import =" com. google. gson. gson "%> <% @ page language =" java "import =" java. util. * "pageEncoding =" UTF-8 "%> <% @ page import =" java. util. list "%> <% @ page import =" com. xuyw. util. spring. beanUtil "%> <% @ page import =" org. springframework. jdbc. core. jdbcTemplate "%> <% response. setContentType ("text/html; charset = gbk;"); request. setCharacterEncoding ("gbk"); String sj = re Quest. getParameter ("sj"); JdbcTemplate jdbc = (JdbcTemplate) BeanUtil. getBean ("ssejdbcTemplate", request. getSession (). getServletContext (); String SQL = "select * from CS_ADDRESS_BOOK where 1 = 1"; if (! "Null". equals (sj )&&! "". Equals (sj) & sj! = Null) {SQL = SQL + "and mobile like '%" + sj + "% '";} /********************** action to execute the following code ************ * ************/int pagerowscount = 10; // The number of entries displayed on one page int currentPage = 1; // the current page String tpage = request. getParameter ("currentPage"); String tpagecount = request. getParameter ("pagerowscount"); if (! "Tpage". equals (tpagecount) & tpage! = Null &&! "". Equals (tpage) {currentPage = Integer. parseInt (tpage);} if (! "Null". equals (tpagecount) & tpagecount! = Null &&! "". Equals (tpagecount) {pagerowscount = Integer. parseInt (tpagecount);} String sql2 = AjaxPageUtil. createPageSql (SQL, pagerowscount, currentPage); List list = jdbc. queryForList (sql2); response. setContentType ("application/json; charsets = UTF-8"); out. print (AjaxPageUtil. getJsonData (list, pagerowscount, currentPage )); /*************************************** * *********/%>

AjaxPageUtil

Package com. xuyw. util. page; import java. util. hashMap; import java. util. list; import java. util. map; import com. google. gson. gson;/*** Project name: SSE * Name: AjaxPageUtil * class description: * Creator: xuyw * Email: xyw10000@163.com * Creation Time: 10:27:55 * remarks: * version: 1.0 **/public class AjaxPageUtil {private static final Gson gson = new Gson (); /***** generate paging SQL * @ param SQL original query SQL * @ param pagerowscount how many lines are displayed on a page * @ param curre NtPage current page * @ return String */public static String createPageSql (String SQL, int pagerowscount, int currentPage) {int begin = 0; // rownum start int end = 0; // rownum end begin = (currentPage-1) * pagerowscount + 1; end = currentPage * pagerowscount; StringBuilder builder = new StringBuilder (); builder. append ("select * from (select. *, (select COUNT (*) "); builder. append ("from"); builder. append (" ("); Builder. append (SQL); builder. append (")"); builder. append ("pagecount, rownum row_num from ("); builder. append (SQL); builder. append (") a where rownum <=" + end + ") where row_num> =" + begin); return builder. toString ();} public static String getJsonData (List list, int pagerowscount, int currentPage) {int endpage = 0; // int pagecount = 0; // Total number of items if (list! = Null & list. size ()> 0) {Map map = (Map) list. get (0); pagecount = Integer. parseInt (map. get ("PAGECOUNT") + ""); endpage = pagecount % pagerowscount = 0? Pagecount/pagerowscount: pagecount/pagerowscount + 1;} Map data = new HashMap (); data. put ("endpage", endpage); data. put ("currentpage", currentPage); data. put ("pagecount", pagecount); data. put ("pagerowscount", pagerowscount); data. put ("rowsdata", list); return gson. toJson (data );}}

The effect is as follows: