Shulou(Shulou.com)06/03 Report--

This article mainly introduces "how to achieve the function of displaying paging data in Springboot". In daily operation, I believe that many people have doubts about how to display paging data in Springboot. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the question of "how to achieve the function of displaying paging data in Springboot". Next, please follow the editor to study!

Introduction to springboot

The purpose of the design is to speed up development and reduce the configuration of xml. If you don't want to write a configuration file, you just need to add the corresponding configuration to the configuration file to start the program quickly.

General mapp

General mapper only supports operations on a single table. For adding, deleting, modifying and querying a single table, there is no need to write the corresponding sql statement in mapper.xml, only we need to call the corresponding API.

Pagehelp

Pagehelper mainly makes a paging query on the queried data.

First, in the maven project, introduce mapper and pagehelper dependencies into pom.xml

Com.github.pagehelper pagehelper-spring-boot-starter 1.2.3 tk.mybatis mapper-spring-boot-starter 1.0.0

2 create a new mymapper.java file and inherit the mapper interface

Public interface MyMapper extends Mapper, MySqlMapper,ConditionMapper {/ / FIXME pay special attention to the fact that the interface cannot be scanned, otherwise an error will occur.

This java file cannot be placed with other mapper so as not to be scanned. Operations that get data from a single table call this method directly.

3 add later attribute fields to the configuration file

# jdbcspring.datasource.url=jdbc:mysql://127.0.0.1:3306/newsspring.datasource.username= database username spring.datasource.password= database password spring.datasource.driver-class-name=com.mysql.jdbc.Driverspring.freemarker.request-context-attribute=request#mapper mapper.mappers=com.imooc.springboot.mapper.util.MyMappermapper.not-empty=falsemapper.identity=MYSQL#pagehelperpagehelper.helper-dialect = mysqlpagehelper.reasonable = truepagehelper.support-methods-arguments = truepagehelper.params= count= countSql

The configuration mapper.mappers above is the path to the file in step 2.

4 after adding the controller file, the method in controller calls the method in server. Although there is a general mapper method, but every time you add a server method to add the corresponding mapper method, so the development is also more tedious, so we need a general server class, with this class to call the second step of the method on it.

Public interface BaseService {/ * query all * * @ return returns all data * / List findAll (); / * add * * @ param t entity * * @ return * / int save (T t) / * modify * * @ param t * entity * @ return * / int updateByPrimaryKey (T t) / * delete the * * @ param t primary key * * @ return * / int deleteByPrimaryKey (int t) according to the primary key / * query form list * @ param t paging parameters * @ return * / TableData getTableData (PageBean pageBean);}

The above is only a method to encapsulate basic additions, deletions, modifications and queries, and you can add your own methods later.

Then add the implementation class

Public abstract class BaseServiceImpl implements BaseService {@ Autowired protected MyMapper mapper; @ Override public List findAll () {return mapper.selectAll ();} @ Override public int save (T t) {return mapper.insert (t);} @ Override public int updateByPrimaryKey (T t) {return mapper.updateByPrimaryKey (t) } @ Override public int deleteByPrimaryKey (int t) {return mapper.deleteByPrimaryKey (t);} @ Override public TableData getTableData (PageBean bean) {int count = mapper.selectAll () .size () If (count > 0) {PageHelper.startPage ((bean.getOffset () / bean.getLimit ()) + 1, bean.getLimit ()); List list = this.findAll (); return TableData.bulid (count, list);} return TableData.empty ();}}

Note: the editor I use is eclipse. If I use the idea editor, abstract can be removed here.

Then add the corresponding interfaces and implementation classes to inherit the above interfaces and methods, such as adding a newsserver interface and a newsserverImpl class

Public interface NewsService extends BaseService {} @ Servicepublic class NewsServiceImpl extends BaseServiceImpl implements NewsService {}

5 in order to reduce the pressure on the database server, we usually use pagehelper for paging query when querying data. In order to display the data we display more clearly, use bootstrap table to display the data. There are two ways for bootstrap table to obtain data. One is the client mode, that is, after obtaining all the data, the front end is paged and displayed. Another kind, which is the server mode we will talk about next: the data information to be obtained, such as the data page number, the size of each page, can be sent to the backend by sending the above parameters to the backend. The backend gets the parameter information and returns the data.

6 after the introduction of bootstrap table-related js css files, I began to find some information on the Internet and found that many of them had to add the following tedious configuration to the front-end page

$('# mytable') .bootstrapTable ({/ / request method method: 'get', / / whether to display the line spacing color striped: true, / / whether to use cache. Default is true. So in general, you need to set this property (*) cache: false, / / whether to display paging (*) pagination: true, / / whether to enable sorting sortable: false, / / sort method sortOrder: "desc" / / initialize loading the first page I set this item by default on the first page, but it doesn't seem to work. And my default is 0 pageNumber:1-/ pageNumber:1, / / rows per page (*) pageSize: 10, / / rows per page available (*) pageList: [10,25,50,100] / / this API needs to handle the fixed parameters passed by bootstrap table and return json data in a specific format url: "${contextPath} / mapper/getTableData". / / the default value is' limit',. The parameters passed to the server are: limit, offset, search, sort, order Else / / queryParamsType:'' / query parameter, which is taken with each call. Customizable queryParams: queryParams: function (params) {var subcompany = $('# subcompany option:selected') .val () Var name = $('# name'). Val (); return {pageNumber: params.offset+1, pageSize: params.limit, companyId:subcompany, name:name} }, / / paging method: client client paging, server server paging (*) sidePagination: "server", / / whether to display search search: false, / / Enable the strict search. StrictSearch: true, / / Indicate which field is an identity field. IdField: "id", columns: [], pagination:true})

It is also cumbersome to add the above configuration information every time you add a page, but there is a default configuration in bootstrap-table.js, and only a few configurations need to be modified.

ContentType: 'application/json',//post request header application/x-www-form-urlencoded; charset=UTF-8' dataType:' json', sidePagination: 'server', / / change to server

When we click on the paging number of the table and get the page number that changes the display of each page, the front end will automatically call the queryParams () method, and we need to pass the data to the background.

Function queryParams (params) {var query= {}; query ["limit"] = params.limit;// starting query ["offset"] = params.offset;// data size return query;}

6 with the front-end paging in the previous step, we need to use the pagehelp plug-in. Similarly, we put this paging method on the generic server class.

Public TableData getTableData (PageBean bean) {int count = mapper.selectAll (). Size (); if (count > 0) {PageHelper.startPage ((bean.getOffset () / bean.getLimit ()) + 1, bean.getLimit ()); List list = this.findAll (); return TableData.bulid (count, list);} return TableData.empty ();}

The above pagehelper.startpage needs to make a little change, the front end is to show the number of data, but the first parameter of the startpage method is to display the first page of the data, so do a conversion pageoffset/limit + 1, and then query the data, it should be noted that the startpage method must query the first line of the data statement, not blank lines, or line breaks.

At this point, the study on "how to achieve the function of displaying paged data in Springboot" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.