Heim  >  Artikel  >  Web-Frontend  >  Eine kurze Diskussion über die beiden Möglichkeiten zur Implementierung von Tabellenpaging im Bootstrap (Frontend/Server)

Eine kurze Diskussion über die beiden Möglichkeiten zur Implementierung von Tabellenpaging im Bootstrap (Frontend/Server)

青灯夜游
青灯夜游nach vorne
2021-02-01 17:27:373701Durchsuche

In diesem Artikel werden Ihnen die beiden Front-End- und Back-End-Implementierungsmethoden für BootstrapTable-Paging vorgestellt. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Eine kurze Diskussion über die beiden Möglichkeiten zur Implementierung von Tabellenpaging im Bootstrap (Frontend/Server)

Verwandte Empfehlungen: „Bootstrap-Tutorial

Zwei Möglichkeiten zum Bootstrap-Tabellen-Paging:

Front-End-Paging: Fragen Sie alle Daten aus der Datenbank auf einmal ab und führen Sie das Paging im Front-End durch (Die Datenmenge ist gering. Wenn die Logikverarbeitung nicht kompliziert ist, können Sie Front-End-Paging verwenden)

Server-Paging: Fragen Sie jedes Mal nur die Daten ab, die für das Laden der aktuellen Seite erforderlich sind

Bootstrap-Download-Adresse: http: //www.bootcss.com/

Bootstrap-Table-Download-Adresse: http://bootstrap-table.wenzhixin.net.cn/

jquery-Download-Adresse: http://www.jq22.com/jquery-info122

Paginierungseffekt (bitte ignorieren Sie den Stil)

Erstens: Bereiten Sie JS, CSS und andere Dateien vor

▶ Legen Sie das heruntergeladene Dokument direkt in das Webapp-Verzeichnis ein.

▶Fügen Sie die erforderlichen JS- und CSS-Dateien ein Die Seite

<!-- 引入的css文件  -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="bootstrap-table/dist/bootstrap-table.min.css"
	rel="stylesheet">
<!-- 引入的js文件 -->
<script src="jquery/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="bootstrap-table/dist/bootstrap-table.min.js"></script>
<script src="bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js"></script>

two: HTML-Seiten-Tag-Inhalt

<div class="panel panel-default">
    <div class="panel-heading">
        查询条件
    </div>
    <div class="panel-body form-group" style="margin-bottom:0px;">
        <label class="col-sm-1 control-label" style="text-align: right; margin-top:5px">姓名:</label>
        <div class="col-sm-2">
            <input type="text" class="form-control" name="Name" id="search_name"/>
        </div>
        <label class="col-sm-1 control-label" style="text-align: right; margin-top:5px">手机号:</label>
        <div class="col-sm-2">
            <input type="text" class="form-control" name="Name" id="search_tel"/>
        </div>
        <div class="col-sm-1 col-sm-offset-4">
            <button class="btn btn-primary" id="search_btn">查询</button>
        </div>
     </div>
</div>
<table id="mytab" class="table table-hover"></table>

drei: JS Paging Code

$(&#39;#mytab&#39;).bootstrapTable({
	method : &#39;get&#39;,
	url : "user/getUserListPage",//请求路径
	striped : true, //是否显示行间隔色
	pageNumber : 1, //初始化加载第一页
	pagination : true,//是否分页
	sidePagination : &#39;client&#39;,//server:服务器端分页|client:前端分页
	pageSize : 4,//单页记录数
	pageList : [ 5, 10, 20, 30 ],//可选择单页记录数
	showRefresh : true,//刷新按钮
	queryParams : function(params) {//上传服务器的参数
		var temp = {//如果是在服务器端实现分页,limit、offset这两个参数是必须的
			limit : params.limit, // 每页显示数量
			offset : params.offset, // SQL语句起始索引
			//page : (params.offset / params.limit) + 1, //当前页码 
 
			Name : $(&#39;#search_name&#39;).val(),
			Tel : $(&#39;#search_tel&#39;).val()
		};
		return temp;
	},
	columns : [ {
		title : &#39;登录名&#39;,
		field : &#39;loginName&#39;,
		sortable : true
	}, {
		title : &#39;姓名&#39;,
		field : &#39;name&#39;,
		sortable : true
	}, {
		title : &#39;手机号&#39;,
		field : &#39;tel&#39;,
	}, {
		title : &#39;性别&#39;,
		field : &#39;sex&#39;,
		formatter : formatSex,//对返回的数据进行处理再显示
	}, {
		title : &#39;操作&#39;,
		field : &#39;id&#39;,
		formatter : operation,//对资源进行操作
	} ]
})
 
//value代表该列的值,row代表当前对象
function formatSex(value, row, index) {
	return value == 1 ? "男" : "女";
	//或者 return row.sex == 1 ? "男" : "女";
}
 
//删除、编辑操作
function operation(value, row, index) {
	var htm = "<button>删除</button><button>修改</button>"
	return htm;
}
 
//查询按钮事件
$(&#39;#search_btn&#39;).click(function() {
	$(&#39;#mytab&#39;).bootstrapTable(&#39;refresh&#39;, {
		url : &#39;user/getUserListPage&#39;
	});
})

vier: Bootstrap-table implementiert Front-End Paging

🎜 🎜🎜🎜 🎜🎜🎜 ▶ 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 ändern 🎜
sidePagination:&#39;client&#39;,
queryParams : function (params) {
        var temp = {
            name:$(&#39;#search_name&#39;).val(),
            tel:$(&#39;#search_tel&#39;).val()
        };
        return temp;
    },
🎜▶ Benutzerobjekt definieren 🎜
package com.debo.common;

public class User {
	
	private Integer id;
	private String loginName;
	private String name;
	private String tel;
	private Integer sex;
	
        //省略Get/Set函数
}
🎜▶ Code der Server-Controller-Ebene 🎜
/**
*直接一次性查出所有的数据,返回给前端,bootstrap-table自行分页
*/
@RequestMapping("/getUserListPage")
@ResponseBody
public List<User> getUserListPage(User user,HttpServletRequest request){
	List<User> list = userService.getUserListPage(user);
	return list;
}
🎜▶ Mabatis-Anweisung🎜
<select id="getUserListPage" resultType="com.debo.common.User">
	SELECT * FROM user WHERE 1 = 1
	<if test="name!=null and name !=&#39;&#39;">
		AND name LIKE CONCAT(&#39;%&#39;,#{name},&#39;%&#39;)
	</if>
	<if test="tel!=null and tel !=&#39;&#39;">
		AND tel = #{tel}
	</if>
</select>
🎜🎜Fünf: Bootstrap-Table implementiert serverseitiges Paging🎜🎜🎜▶ Legt bestimmte Attribute im JS-Paging-Code fest🎜
sidePagination:&#39;server&#39;,
queryParams : function (params) {
    var temp = {
        limit : params.limit, // 每页显示数量
        offset : params.offset, // SQL语句起始索引
        page: (params.offset / params.limit) + 1,   //当前页码
            
        Name:$(&#39;#search_name&#39;).val(),
        Tel:$(&#39;#search_tel&#39;).val()
    };
    return temp;
},
🎜▶ Kapselt das öffentliche Seitenobjekt und lässt das Benutzerobjekt das Seitenobjekt erben. Löschen oder Ändern von Vorgängen🎜🎜
package com.debo.common;

public class Page {
	//每页显示数量
	private int limit;
	//页码
	private int page;
	//sql语句起始索引
	private int offset;
	public int getLimit() {
		return limit;
	}
	public void setLimit(int limit) {
		this.limit = limit;
	}
	public int getPage() {
		return page;
	}
	public void setPage(int page) {
		this.page = page;
	}
	public int getOffset() {
		return offset;
	}
	public void setOffset(int offset) {
		this.offset = offset;
	}

}
🎜Weitere Kenntnisse zur Computerprogrammierung finden Sie unter: 🎜Programmiervideo🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion über die beiden Möglichkeiten zur Implementierung von Tabellenpaging im Bootstrap (Frontend/Server). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Dieser Artikel ist reproduziert unter:csdn.net. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen