• GridManager is a powerful software that can use minimalist code to implement polymorphic tables, and it is open source and free.
• GridManager has a Table component with flexible configuration and convenient use. It instantiates the Table tag quickly and flexibly, making the Table tag full of vitality.
• The paging function is a highlight, which greatly saves the programmer's development time, and the tables are concise and beautiful.
• Let's take a look at how pagination and advanced query are implemented~

Analysis of implementation ideas:

    1. First, for paging, the GridManager will send two parameters to the background while requesting the page, and we can receive them.

    2. The parameters are pageSizeKey (number of keys displayed per page in the request parameter, the default is pSize) and currentPageKey (key value of current page in the request parameter, the default is cPage).

    3. As we all know, in a project, the paging function will probably be reused in many places, so we can package these two parameters into a tool class to receive them.

    4. For advanced query, we also need to receive parameters to the background database for query and return data, and advanced query will also be used in many places in a project, so we continue to encapsulate the query condition entity class to inherit the paging tool class for different query conditions, so that we can obtain all parameters and query at the back end, Return the corresponding data and display it on the table.

 

Some of the implementation code is shown below

Encapsulate the parameters returned by GridManager into a tool class.

package cn.itsource.query;
/**
 * 
* @Title: BaseQuery.java
* @Package:cn.itsource.query
* @Description:Parameters returned by the foreground
* @author:Linxiaoxing
* @date:2021 May 14
* @version:V1.0
 */
public class BaseQuery {
	//Page number
	private Integer pagenum;
	//Show several pieces of data
	private Integer pageshownum;	
	public BaseQuery(Integer pagenum, Integer pageshownum) {
		super();
		this.pagenum = pagenum;
		this.pageshownum = pageshownum;
	}

	public BaseQuery() {
		super();
		// TODO Auto-generated constructor stub
	}

	public Integer getPagenum() {
		return pagenum;
	}

	public void setPagenum(Integer pagenum) {
		this.pagenum = pagenum;
	}

	public  Integer getPageshownum() {
		return pageshownum;
	}

	public void setPageshownum(Integer pageshownum) {
		this.pageshownum = pageshownum;
	}
	
	public Integer getFirst(){
		return (this.pagenum-1)*pageshownum;
	}

	@Override
	public String toString() {
		return "BaseQuery [pagenum=" + pagenum + ", pageshownum=" + pageshownum + "]";
	}
	
	
}

Encapsulate the parameters returned by the advanced query of each module, and inherit the table tool class

package cn.itsource.query;

public class QuestionQuery extends BaseQuery {
	private String title;
	private Boolean enable;
	public QuestionQuery(Integer pagenum, Integer pageshownum, String title, Boolean enable) {
		super(pagenum, pageshownum);
		this.title = title;
		this.enable = enable;
	}
	public QuestionQuery() {
		super();
		// TODO Auto-generated constructor stub
	}
	public String getTitle() {
		return title;
	}
	public void setTitle(String title) {
		this.title = title;
	}
	public Boolean getEnable() {
		return enable;
	}
	public void setEnable(Boolean enable) {
		this.enable = enable;
	}
	@Override
	public String toString() {
		return "QuestionQuery [title=" + title + ", enable=" + enable + "]";
	}
}

So as to receive all the data ~, query and return the query data.

package cn.itsource.service.impl;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import cn.itsource.domain.Question;
import cn.itsource.mapper.QuestionMapper;
import cn.itsource.query.QuestionQuery;
import cn.itsource.service.IQuestionService;
@Service
public class QuestionServiceImpl implements IQuestionService {
	@Autowired
	private QuestionMapper mapper;
	@Override
	public List<Question> findAll(QuestionQuery query) {
		List<Question> list = mapper.findAll(query);
		return list;
	}
	@Override
	public List<Question> find() {
		
		return mapper.find();
	}
	@Override
	public void save(Question que) {
		if(que.getId()==null){//Add operation
			mapper.insert(que);
		}else{//Modify operation
			mapper.update(que);
		}
	}
	@Override
	public void deleteById(Long id) {
		mapper.deleteById(id);
	}

}

When sending a request, the returned data and fields are displayed on the table respectively.

document.querySelector('#table-demo-ajaxPageCode').GM({
		        gridManagerName: 'demo-ajaxPageCode', //Random name
		       	ajaxData: '/system/question/findAll', //Request path absolute path
		        //ajaxData: 'https://www.lovejavascript.com/learnLinkManager/getLearnLinkList',
		        ajaxType: 'POST',//Request mode
		        supportAjaxPage: true,//Open paging
		        sizeData: [5,10,15,20,25],
		        pageSize: 5,
		        currentPageKey: 'pagenum',
		        pageSizeKey: 'pageshownum',
		        columnData: [
		            {
		                key: 'title',
		                text: 'title',
		                align: "center"
		            },{
		                key: 'content',
		                text: 'content',
		                align: "center",
		            },{
		                key: 'enable',
		                text: 'Enable',
		                align: "center",
		                template: function(cell, row, index, key){
		                	// console. debug(cell);  //  Cell: the specific value corresponding to the key
		                	// console.debug(row);  // row: current piece of data
		                	// console.debug(index); //  Indexes
		                	// console.debug(key); //  key:key this field
		                    return cell?"<font color='green'>Enable</font>":"<font color='red'>Disable</font>";
		                }
		            },{
		                key: 'id',
		                text: 'operation &nbsp;&nbsp;<a id="add" style="color:green;z-index:9999;" href="javascript:;">add to</a>',
		                align: "center",
		                template: function(cell, row, index, key){
		                	return '<a data-id="'+cell+'" style="color:red;" href="javascript:;">delete</a>'+
		                	"&nbsp;&nbsp;<a id='update' data-row='"+JSON.stringify(row)+"' style='color:blue;' href='javascript:;'>modify</a>";
		                }
		            }
		            
		        ]
		    });

At this point, the paging function and advanced query implementation are completed~

Do you have your own ideas?

I wish you all a happy day!