Implement the bootstrap table server to implement the pagination demo, the specific content is as follows
front page
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<link rel="stylesheet" href="/assets/css/" rel="external nofollow" />
<link rel="stylesheet" href="/assets/css/" rel="external nofollow" >
<script src="/assets/js/jquery-2.1."></script>
<script src="/assets/js/"></script>
<script src="/assets/js/"></script>
<script src="/assets/js/"></script>
<script src="/assets/js/"></script>
</head>
<body>
<!--Query form-->
<div class="widget-content">
<form method="post" class="form-horizontal" >
<input type="text" class="span2" name="seqNo" placeholder="serial number">
<input type="text" class="span3" name="name" placeholder="Name">
<input type="button" class="btn btn-default span1" value="Query">
</form>
</div>
<div class="widget-content">
<!--Toolbar-->
<div >
<button class="btn btn-success btn-xs" data-toggle="modal" data-target="#add">Add Event</button> </div>
<table ></table>
</div>
</body>
</html>
$(function() {
// Initialize the table initTable();
// Search button triggers event $("#eventquery").click(function() {
$('#eventTable').bootstrapTable(('refresh')); // A very important step, refresh the url! // ("/program/area/findbyItem?offset="+0+"&"+$("#areaform").serialize())
$('#eventqueryform input[name=\'name\']').val('')
$('#eventqueryform input[name=\'seqNo\']').val('')
});
});
// Table initializationfunction initTable() {
$('#eventTable').bootstrapTable({
method : 'post', // Request method from the server contentType : "application/x-www-form-urlencoded", // If it is a post, it must be defined url : '/bootstrap_table_demo/findbyitem', // Request url cache : false, // Whether to use cache, the default is true, so in general, this property needs to be set (*) striped : true, // Interlaced color dataType : "json", // Data type pagination : true, // Whether to enable paging showPaginationSwitch : false, // Whether to display the data strip count selection box pageSize : 10, // Number of records per page (*) pageNumber : 1, // The number of pages displayed when table is initialized pageList: [5, 10, 15, 20], //The number of lines per page to choose from (*) search : false, // The search box is not displayed sidePagination : 'server', // Server pagination classes : 'table table-bordered', // Class style// showRefresh : true, // Show refresh button silent : true, // Refresh event must be set toolbar : '#toolbar', // Toolbar ID toolbarAlign : 'right', // Toolbar alignment queryParams : queryParams, // Request parameters, this is related to the subsequent asynchronous refresh used columns : [ {
field : 'seqNo',
title : 'serial number',
align : 'center'
}, {
field : 'name',
title : 'Name',
align : 'center'
}, {
field : 'sex',
title : 'gender',
align : 'center'
}, {
field : 'id',
title : 'operate',
align : 'center',
width : '280px',
formatter : function(value, row, index) {
// ((row));
}
} ],
});
}
// The page query parameters are set in the form of key-value pairsfunction queryParams(params) {
return {
name : $('#eventqueryform input[name=\'name\']').val(), // Parameters passed to the server during request seqNo : $('#eventqueryform input[name=\'seqNo\']').val(),
limit : , // Number of displayed per page offset : , // SQL statement offset }
}
Server servlet
/**
* Servlet implementation class
*/
public class UserFindByItemSetvlet extends HttpServlet {
private static final long serialVersionUID = 1L;
private IUserService service = new UserServiceImpl();
public UserFindByItemSetvlet() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
("utf-8");
("text/json; charset=UTF-8");
// Get form data int offset = (("offset").trim());
int limit = (("limit").trim());
String seqNo = ("seqNo").trim();
String name = ("name").trim();
// Call the business component to get the result PageBean<UserBean> pageBean;
try {
pageBean = (offset, limit, seqNo, name);
ObjectMapper oMapper = new ObjectMapper();
//The object is converted to json data and returns ((), pageBean);
} catch (Exception e) {
();
}
}
}
Pagination encapsulation class
/**
* Pagination entity class
*/
public class PageBean<T> {
/** Entity class */
private List<T> rows = new ArrayList<T>();
/** Total number of entries */
private int total;
public PageBean() {
super();
}
public List<T> getRows() {
return rows;
}
public void setRows(List<T> rows) {
= rows;
}
public int getTotal() {
return total;
}
public void setTotal(int total) {
= total;
}
}
Get user implementation class
public class UserServiceImpl implements IUserService{
/**
* sql query statement
*/
public PageBean<UserBean> findByItem(int offset, int limit, String seqNo, String name) {
PageBean<UserBean> cutBean = new PageBean<UserBean>();
// Basic SQL statements String sql = "SELECT * FROM c_userinfo where 1=1 ";
// SQL statements for dynamic conditions String itemSql = "";
if (seqNo != null && () != 0) {
itemSql += "and SeqNo like '%" + seqNo + "%' ";
}
if (name != null && () != 0) {
itemSql += "and Name like '%" + name + "%' ";
}
// Get SQL connection Connection con = ();
PreparedStatement ps = null;
ResultSet rs = null;
try {
ps = (sql + itemSql + "limit ?,?");
(1, offset);
(2, limit);
rs = ();
while (()) {
UserBean bean = new UserBean();
(("seqNo"));
(("name"));
(("sex"));
(("birth"));
().add(bean);
}
// Get the total number of records, note that dynamic conditions are also needed to be added ps = ("SELECT count(*) as c FROM c_userinfo where 1=1 " + itemSql);
rs = ();
if (()) {
(("c"));
}
} catch (SQLException e) {
();
} finally {
(con);
if (ps != null) {
try {
();
} catch (SQLException e) {
();
}
}
if (rs != null) {
try {
();
} catch (SQLException e) {
();
}
}
}
return cutBean;
}
}
Database Tools
/**
* Database tool class
*
* @author way
*
*/
public class DButil {
/**
* Connect to the database
*
*/
public static Connection connect() {
Properties pro = new Properties();
String driver = null;
String url = null;
String username = null;
String password = null;
try {
InputStream is = ()
.getResourceAsStream("");
(is);
driver = ("driver");
url = ("url");
username = ("username");
password = ("password");
(driver);
Connection conn = (url, username,
password);
return conn;
} catch (FileNotFoundException e) {
();
} catch (IOException e) {
();
} catch (ClassNotFoundException e) {
();
} catch (SQLException e) {
();
}
return null;
}
/**
* Close the database
*
* @param conn
*
*/
public static void close(Connection con) {
if (con != null) {
try {
();
} catch (SQLException e) {
();
}
}
}
document
driver= url=jdbc:mysql://localhost:3306/gov_social?useUnicode\=true&characterEncoding\=utf-8 username=root password=root
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.