Easyui Datagrid+springmvc+json to handle paging __js

Use Springmvc+easyui to do pagination, pagination this question bothered me for a few days, so now I'm going to post the code.

Steps:

1. Add Easyui plugin (JS) on the page

2. Define a table, look at the data from the query into the inside

3. Define a JS, to write the processing of JS

Code:

JSP page code:

<table id= "tt" style= "Height:auto;width:auto" ></table>

<script type= "Text/javascript" src= "${basepath}/resources/easyui/jquery.easyui.min.js" ></script>
<script type= "Text/javascript" src= "${basepath}/resources/js/operate/prepayrecord.js" ></script>
<script type= "Text/javascript" src= "${basepath}/resources/easyui/locale/easyui-lang-zh_cn.js" ></script >
</body>
<script type= "Text/javascript" >
$ (function () {
Init (1,2, ' ${basepath} ');
})
</script>

Prepayrecord.js Code Main code

var basepath = ';
function init (comflag,usertype,serverpath) {
BasePath = Serverpath;
$ ("#tt"). DataGrid ({
Url:null,
Singleselect:true,/* Whether a line is selected * *
Width: ' Auto ',
pagination:true,/* whether or not to display the following paging menu * *

Border:false,
Rownumbers:true,
Columns: [[{
Field: ' TRADESN ',//This corresponds to the entity class class inside the attribute
Title: ' ID Number ',
Width: ' 160 ',
Align: ' center '
}, {
Field: ' ShortName ',
Title: ' Merchant Name ',
Width: ' 50 ',
Align: ' center '
}/* here omitted the other field*/.
]]/*,
Loadmsg: ' In data loading, please wait ... '
});

Paging
var pager=$ (' #tt '). DataGrid (' Getpager ');
Pager.pagination ({
total:0,
rows:0,
Pagenumber:1,
PageList: [10,20,30],//can set a list of the number of record bars per page
Onbeforerefresh:function () {
},
Onselectpage:function (pagenumber, pageSize) {//Paging trigger
Find (PageNumber, pageSize);
}
});
}

function Find (pagenumber, pageSize)
{
if (Validate ())
{
$ ("#tt"). DataGrid (' Getpager '). Pagination ({pagesize:pagesize, pagenumber:pagenumber});//Reset
$ ("#tt"). DataGrid ("Loading"); Plus shielding
$.ajax ({
Type: "POST",
DataType: "JSON",
url:basepath+ "/prepay/prepaypagelist.html",
Data: {
' Page ': pagenumber,
' Rows ': pageSize
},
Success:function (data) {
$ ("#tt"). DataGrid (' LoadData ', Pagedata (data.rows,data.total));//The Pagedata here is an object that I created myself to encapsulate the total number of bars, and the data, Data.rows is the name of the key of a map collection that I added to the controller.
var total =data.total;
$ ("#tt"). DataGrid ("Loaded"); Remove Mask
},
Error:function (Err) {
$.messager.alert (' Operation Hint ', ' Get information failed ... Please contact admin! ', ' error ');
$ ("#tt"). DataGrid ("Loaded"); Remove Mask
}
});
}
}

Functionpagedata (list,total) {
var obj=new Object ();
Obj.total=total;
Obj.rows=list;
return obj;
}

Controller:

     /**
     * Enquiry Order and Paging
     * @return
   &NB Sp * @throws parseexception
     */
     @RequestMapping ("/prepaypagelist")
     @ResponseBody You must return this here, otherwise you will not get the JSON data you returned
    public map<string, Object > searchprepaypage (httpservletrequest request,integer page,integer Rows,prepaytickettraderecord PR) {// The blue one is the data that you deliver at the time of Ajax submission
        //setting current page
         int intpage=page==null| | page<=0?1:page;
        //Set the number of display per page
        int intpagesize=rows ==null| | rows<=0?10:rows;;
  
        
        List< Prepaytickettraderecord> list=prepaytickettradeservice.queryprepaypagelist (PR, intPage,intPageSize); The page to be passed in is to be processed

if (list!=null) {
map<string, object> result = new hashmap<string, object> ();
Result.put ("Total", Prepaytickettradeservice.queryprepaycount (PR));
Result.put ("Rows", list);
Return result;//This is the data that you returned when Ajax was successful, and I did an object encapsulation over there.
}
return null;

}

Prepaytickettradeservice.queryprepaypagelist This method

@Override
Public list<prepaytickettraderecord> queryprepaypagelist (Prepaytickettraderecord prepay,Integer pageNo, Integer pageSize) {
if (pageno!=null&&pagesize!=null) {
PageNo = PageNo < 1? 1:pageno;//ternary expression, if the pageno is less than the 1,pageno value is 1, otherwise it is passed in the PageNo
PageSize = PageSize < 1? SystemConstant.PAGESIZE:pageSize; Three-dimensional expression if the pagesize is less than 1, to fetch the pagesize in the enumeration, otherwise it is passed in the PageSize
int firstrow = (pageNo-1) * pageSize;
if (prepay==null) {
Prepay=new Prepaytickettraderecord ();
}
Prepay.setfirstrow (FirstRow);
Prepay.setrowsize (pageSize);
}

Return Prepaytickettradedao.queryprepaypagelist (prepay);
}

MyBatis of Paging SQL

<!--Query the order information according to the condition, and also the paging processing-->
<select id= "queryprepaypagelist" resultmap= "Prepayrecord" parametertype= "Prepaytickettraderecord" >
Select
*
From Prepay P
ORDER BY p.create_time Desc
<if test= "FirstRow!= null and rowsize!= null" >
<! [cdata[Limit #{firstrow},#{rowsize}]]>//page-handling
</if>
</select>

There's also the need to configure JSON in SPRINGMVC.

<bean class= "Org.springframework.web.servlet.view.ContentNegotiatingViewResolver" >
<!--suppress Deprecatedclassusageinspection-->
<property name= "MediaTypes" >
<map>
<entry key= "html" value= "text/html"/>
<entry key= "JSON" value= "Application/json"/>
</map>
</property>
<property name= "Favorparameter" value= "true"/>
<property name= "Viewresolvers" >
<list>
<bean id= "Viewresolver"
class= "Org.springframework.web.servlet.view.InternalResourceViewResolver" >
<property name= "prefix" value= "/web-inf/jsp/"/>
<property name= "suffix" value= ". jsp"/>
</bean>
</list>
</property>
<property name= "Defaultcontenttype" value= "text/html"/>
</bean>