bootstrapTable服务器分页

项目中经常会使用到表格,数据量大的时候还需要进行分页,项目设计阶段,我选择了bootstrapTable的js插件,个人觉得这个框架非常好用,支持服务器端分页,此篇主要写的主要是关于服务器分页。之前遇到的问题时服务器分页,在服务器端接收的参数为null。查了资料发现少了参数

主要引入js

<script type="text/javascript" src="<%=path%>/plugins/bootstrap-table/bootstrap-table.js"></script>
<script type="text/javascript" src="<%=path%>/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>

$('#bootstrap_table')
			.bootstrapTable(
					{
						method : 'post',
						url : basePath + "/XXXServlet",
						contentType : "application/x-www-form-urlencoded",//当为post请求时,此参数必选
						cache : false,
						striped : true,
						// height : 480,
						locale : 'zh-CN',
						sidePagination : 'server',
						pagination : true,
						clickToSelect : true, // 单击行即可以选中
						sortName : 'SENDTIME', // 设置默认排序为 SENDTIME
						sortOrder : 'desc', // 设置排序为反序 desc
						pageSize : 10,
						pageNumber : 1,
						pageList : [ 10, 20, 50, 100, 200, 500 ],
						queryParams : function(e) {
							var param = {
								userId : $("#userId").val(),
								type : "db",
								pageSize : e.limit,
								pageIndex : (e.offset / e.limit) + 1,
								filterlist : $("#oms_search_type").val()
							};
							return param;
						},
						search : false,
						showColumns : false,
						showRefresh : false,
						columns : [
								{
									field : "ID",
									title : "编号",
									align : "center",
									valign : "middle",
									sortable : "true"
								},
								{
									field : "NAME",
									title : "名称",
									align : "center",
									valign : "middle",
									sortable : "true"
								},
								{
									field : "AGE",
									title : "年龄",
									align : "center",
									valign : "middle",
									sortable : "true"
								},
								{
									title : "操作",
									field : "id",
									align : "center",
									formatter : function(value, row, index) {
										var e = '<a href="#" mce_href="#" οnclick="edit(\''
												+ row.id + '\')">编辑</a> ';
										var d = '<a href="#" mce_href="#" οnclick="del(\''
												+ row.id + '\')">删除</a> ';
										return e + d;
									}
								} ],
						onLoadSuccess : function(data) {
							initUserInfo(data.userInfo);
						},
						formatNoMatches : function() {
							return '无符合条件的记录';
						},
						onDblClickRow : function(row, $element) {
							
						}
					});

需要注意的是红色的部分。当时post请求是,需要注意
contentType : "application/x-www-form-urlencoded",
这个参数,必须要有,不然服务器获取不到参数。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Fee_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值