BootstrapTable自定义ajax方法

最新推荐文章于 2024-06-02 10:47:03 发布
最新推荐文章于 2024-06-02 10:47:03 发布
阅读量2.2w 收藏 33
点赞数 12
分类专栏： 【BootstrapTable】 文章标签： bootstrapTable ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/csdnluolei/article/details/84191733
版权

bootstrapTable可以自定义ajax方法，通过ajax请求获得数据返回展示在bootstrapTable表格中，这种方式我自认为比较简单常用。本篇还加了简单增删改操作，获得表格选中的数据，以及按钮可用与否。这些比较常用。

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>bootstrap-table-demo</title>
		<!-- 引入bootstrap样式 -->
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<!-- 引入bootstrap-table样式 -->
		<link rel="stylesheet" href="css/plugins/bootstrap-table/bootstrap-table.min.css" />
		<!-- layer -->
		<link rel="stylesheet" href="js/plugins/layer/skin/layer.css" />
		<style type="text/css">
			.form-inline .form-group input[type=text], .form-inline .form-group select{
				width:120px;
			}
		</style>
	</head>
	<body style="width: 90%;margin: 0 auto;">
	
	<h2>bootstrap-table</h2>

	<form id="form1" action="" method="get" class="form-inline">
		<div class="form-group">
			<label class="control-label ">ID：</label>
			<input type="text" id="id" class="form-control" name="id" />
		</div>
		<div class="form-group">
			<label class="control-label ">Name：</label>
			<input type="text" id="name" class="form-control" name="name" />
		</div>
		<div class="form-group">
			<label class="control-label ">Price：</label>
			<!--<input type="text" id="price" class="form-control" name="price" />-->
			<select class="form-control" id="price" name="price">
				<option value="0">请选择</option>
				<option value="1">$1</option>
				<option value="2">$2</option>
				<option value="3">$3</option>
				<option value="4">$4</option>
			</select>
		</div>
		<input type="submit" class="btn btn-primary" value="搜索"/>
	</form>
	<br/>
	<div id="toolbar" class="btn-group">
		<button class="btn btn-success" id="add">新增</button>
		<button class="btn btn-warning" id="edit">编辑</button>
		<button class="btn btn-info" id="look">查看</button>
		<button class="btn btn-danger" id="delete">删除</button>
		<button class="btn btn-primary" id="refresh">刷新</button>
	</div>	
	
	<!--bootstrap-table表格-->
	<table id="table" 
		data-toolbar="#toolbar"
		data-toggle="table"  
		data-ajax="ajaxRequest"   
		data-search="false"     
		data-side-pagination="server" 
		data-pagination="true" 
		data-click-to-select="true" 
		data-single-select="true"
		data-page-size= "10"
		>
		<thead style="background:#efefef;">
			<tr>
				<th data-checkbox="true"></th>
				<th data-field="id">ID</th>
				<th data-field="name">Name</th>
				<th data-field="price">Price</th>
			</tr>
		</thead>
	</table>

	
	<!-- jquery -->
	<script type="text/javascript" src="js/jquery.min.js" ></script>
	<!-- bootstrap -->
	<script type="text/javascript" src="js/bootstrap.min.js" ></script>
	<!-- bootstrap-table -->
	<script type="text/javascript" src="js/plugins/bootstrap-table/bootstrap-table.min.js" ></script>
	<!-- 引入中文语言包 -->
	<script type="text/javascript" src="js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js" ></script>
	<!-- layer -->
	<script type="text/javascript" src="js/plugins/layer/layer.min.js" ></script>
	<script type="text/javascript">

		//自定义ajax方法
		function ajaxRequest(params){
			//debugger;
			$.ajax({
				url: "/bootstrap-table/data4.json",
				type: "POST",
				dataType: "json",
				success: function(rs){
					console.log(rs)
					var message = rs.array;
					
                      params.success({ //注意，必须返回参数 params
			            total: rs.total,
			            rows: message
			        });

					//debugger;
				},
				error: function(rs){
					console.log(rs)
				}
			});
		}
		
		var $table = $("#table"),
			$add = $("#add"),
			$edit = $("#edit"),
			$look = $("#look"),
			$delete = $("#delete"),
			$refresh = $("#refresh");
		//按钮可用与否
		$edit.prop('disabled', true);
		$look.prop('disabled', true);
		$delete.prop('disabled', true);
		$table.on('check.bs.table uncheck.bs.table ' +
			'check-all.bs.table uncheck-all.bs.table',
			function() {
				var bool = !($table.bootstrapTable('getSelections').length && $table.bootstrapTable('getSelections').length == 1);
				$edit.prop('disabled', bool);
				$look.prop('disabled', bool);
				$delete.prop('disabled', bool);
		});
		
		/**
		 * 获得选中的数据，为一个对象数组
		 */
		function getSelections() {
			return $.map($table.bootstrapTable('getSelections'), function(row) {
				return row; 
			});
		}
		//刷新
		$refresh.on('click', function(){
			$table.bootstrapTable('refresh');
		});
		//添加
		$add.on('click', function(){
			layer.open({
			type: 2,
			title: '添加商品',
			shadeClose: false,
			shade: 0.8,
			area: ['50%', '60%'],
			content: 'add.html'
			});
		});	
		//查看
		$look.on('click', function(){
			var row = getSelections()[0]; 
			var id = row.id; 
			var name = row.name;
			var price = row.price; //debugger;

			layer.open({
			type: 2,
			title: '查看商品',
			shadeClose: false,
			shade: 0.8,
			area: ['50%', '60%'],
			content: 'edit.html?id=' + id + '&name=' + name + '&price='+ price +'&type=look'
			});
		});
		//编辑
		$edit.on('click', function(){
			var row = getSelections()[0]; 
			var id = row.id; 
			var name = row.name;
			var price = row.price;
			
			layer.open({
			type: 2,
			title: '编辑商品',
			shadeClose: false,
			shade: 0.8,
			area: ['50%', '60%'],
			content: 'edit.html?id=' + id + '&name=' + name + '&price='+ price ,
			end: function () { //最后执行reload
                location.reload();
            	}
			});
		});
		//删除
		$delete.on('click', function(){
			var ids = getSelections();
			layer.confirm('您是否要删除当前 ' + ids.length + '条数据？', {
			btn: ['是', '否']
			}, function() {
				delServer(ids);
			});
		});
		//删除
		function delServer(ids){
			layer.msg('删除成功');
		}
	</script>
	
	</body>
</html>

data4.json

{
"code": 0,
"total": 1314,
"message": "success",
"array" :
[
{
"id": 0,
"name": "Item 0",
"price": "$1"
},
{
"id": 1,
"name": "Item 1",
"price": "$1"
},
{
"id": 2,
"name": "Item 2",
"price": "$2"
},
{
"id": 3,
"name": "Item 3",
"price": "$3"
},
{
"id": 4,
"name": "Item 4",
"price": "$1"
},
{
"id": 5,
"name": "Item 5",
"price": "$1"
},
{
"id": 6,
"name": "Item 6",
"price": "$1"
},
{
"id": 7,
"name": "Item 7",
"price": "$1"
},
{
"id": 8,
"name": "Item 8",
"price": "$1"
},
{
"id": 9,
"name": "Item 9",
"price": "$1"
}
]
}

edit.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>编辑</title>
		<!-- 引入bootstrap样式 -->
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<!-- 引入bootstrap-table样式 -->
		<link rel="stylesheet" href="css/plugins/bootstrap-table/bootstrap-table.min.css" />
		<!-- layer -->
		<link rel="stylesheet" href="js/plugins/layer/skin/layer.css" />
		<style type="text/css">
			.form-group{
				width:90%;
				margin: 15px auto;
			}
		</style>
	</head>
	<body>
	
	<div>
		<form id="form1" action="" method="get" class="">
		<div class="form-group">
			<label class="control-label ">ID：</label>
			<input type="text" id="id" class="form-control" name="id" />
		</div>
		<div class="form-group">
			<label class="control-label ">Name：</label>
			<input type="text" id="name" class="form-control" name="name" />
		</div>
		<div class="form-group">
			<label class="control-label ">Price：</label>
			<!--<input type="text" id="price" class="form-control" name="price" />-->
			<select class="form-control" id="price" name="price">
				<option value="$0">请选择</option>
				<option value="$1">$1</option>
				<option value="$2">$2</option>
				<option value="$3">$3</option>
				<option value="$4">$4</option>
			</select>
		</div>
		<div class="form-group">
			<input type="button" id="submit" class="btn btn-primary" style="width: 25%;" value="修改"/>
			<input type="button" id="close" class="btn btn-danger" style="width: 25%;" value="关闭"/>
		</div>
		
	</form>
	</div>	
	
	<!-- jquery -->
	<script type="text/javascript" src="js/jquery.min.js" ></script>
	<script type="text/javascript" src="js/jquery-1.11.3.min.js" ></script>
	<!-- layer -->
	<script type="text/javascript" src="js/plugins/layer/layer.min.js" ></script>
	
	<script type="text/javascript">
	//给jq扩展方法
	(function ($) {
        $.getUrlParam = function (name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]); return null;
        }
     })(jQuery);
	//alert($.getUrlParam('id'));
	
	var index = parent.layer.getFrameIndex(window.name);
	$("#close").on('click', function(){	
		parent.layer.close(index);
	});
	//
	var typelook = $.getUrlParam("type");

	//初始化数据
	initData();
	if(typelook){
		$("#submit").hide();
		$("input").attr('disabled',true);
		$("select").attr('disabled',true);
		$('#close').attr('disabled', false);
	}
	function initData(){
		var id = $.getUrlParam('id');
		var name = $.getUrlParam('name');
		var price = $.getUrlParam('price');
		$('#id').val(id);
		$('#name').val(name);
		$('#price').val(price);
	}

	$("#submit").click(function(){
		layer.msg("修改成功");
		setTimeout(function (){
			parent.layer.close(index);
		}, 1000);
	});
	</script>
	</body>
</html>

 

 

csdnluolei
关注
  • 12
    点赞
  • 踩
  • 33
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
bootstrap-table插件实现ajax服务端分页显示
never never land
03-24 1万+
利用bootstrap-table插件实现ajax服务端分页 1、引入bootstrap-table插件核心js、css以及中文语言文件 网上提供的在线cdn，如果加载时间过长，请下载插件到项目引入                                       2、初始化bootstrap-table插件 1.在html页面table中
Ajax的实例以及bootstrap的使用
weixin_67235801的博客
05-04 3590
省市联动与分页面板
BootstrapTable (前后端分页，表格 ajax 返回数据回调处理) 配置参数全说明
禅与计算机程序设计艺术
12-29 1万+
【代码】BootstrapTable (前后端分页，表格 ajax 返回数据回调处理) 配置参数全说明。
04_JavaWeb_Ajax请求、BootStrap
最新发布
weixin_45286894的博客
06-02 239
前端框架：插件的集合，把功能封装成现成的组件（对js封装 html封装 css封装）概念：用于快速开发web应用程序 和 网站的响应式前端框架。justify-content-* 类：用于水平对齐元素。align-items-* 类：用于垂直对齐元素。后端的框架：一堆jar包。
bootstrap table通过ajax获取后台数据展示在table
热门推荐
提笔写忧伤
08-26 4万+
1. 背景 bootstrap table 默认向后台发送语法的dataType为 json，但是为了解决跨域问题我们需要将dataType改为jsonp，这时就需要修改bootstrap table获取后台数据的方式，采用$('#table').bootstrapTable('load', data);方法。修改前和修改后代码分别如下所示。 2.修改前代码 <table id="t
使用Ajax实现省市联动&&Bootstrap的基本使用
weixin_65975275的博客
05-05 484
Ajax系列之省市联动&&bootstrap
ajax请求数据，生成Bootstrap-table
LaOngDaoxing的博客
11-07 2345
**_Menthod1.js $(function(){ var shebeiId="GPRS_TEST"; var startTime=$("#startTimePart").val() + ':00'; var endTime=$("#endTimePart").val() + ':00 '; oneJsTest.reqShebeiDataByShebeiAnd...
bootstrap-table真香系列-数据绑定+ajax请求数据进行数据渲染(不推荐)
种一棵树最好的时间是十年前，其次是现在。
11-17 3425
<!-- data-url 结合ajax的响应式表格方式 begin 数据格式无要求 分页未找到怎么用--> <div class="example"> <!-- <table data-toggle="table" id="WorkTable" data-height="246" data-pagination="true"> --> <table data-toggle="table" id="WorkTable" data-c.
bootstrap中table的使用
weixin_43487532的博客
07-24 3412
bootstrap、java实现数据表单展示
bootstrapTable+ajax加载数据 refresh更新数据
10-18
接下来，我们定义了 BootstrapTable 的配置对象，包括搜索、分页、每页显示的行数等选项，并设置了一个自定义的 AJAX 函数来获取数据： ```javascript var $dataTableHot = $("#dataTable table").bootstrapTable({...
bootstrap table ajax 示例
10-16
这可以通过jQuery的AJAX方法实现： ```javascript $(function() { $('#table').on('load-success.bs.table', function(data) { // 更新表格数据 var tableData = data.rows; //... }); }); ``` `load-success....
Bootstrap table的使用方法
10-21
$('#table').bootstrapTable({ columns: [ { field: 'id', title: 'ID' }, { field: 'name', title: 'Name' }, { field: 'price', title: 'Price' } ], url: 'your-data-source-url' }); }); ``` 在上面的...
基于javaweb 的bootstrap table使用案例源码下载
02-10
本案例提供了使用Bootstrap Table与Ajax进行交互的详细示例，旨在帮助开发者更好地理解和应用这一技术。 首先，Bootstrap Table是Twitter Bootstrap库的一个扩展，用于创建响应式、可操作的数据表格。它的主要优点...
Bootstrap Table表格一直加载(load)不了数据的快速解决方法
09-01
然而，这种方式可能不会工作，因为`bootstrapTable('load')`方法通常需要一个已经解析过的JSON对象，而不是一个包含数据请求的字符串。 解决这个问题的方法是使用异步的Ajax请求来获取数据，然后将返回的JSON数据...
ajax+bootstrap的常用小组件
ss123mlk的博客
06-05 205
200：正常 404:访问的资源不存在 （访问地址输入错误/真的资源没了） 403：没有请求权限 500:服务器代码错了 jquery的资源首先要导入 <script src="路径"/> -<input type=" " name=" " value=" " id=" " >name是可以和服务器代码对应 id是在jsp中被其他的调用 value是在页面显示的时候 $("#XX")获取指定id的对象 比如input标签等 alert("HTML: " + $("#test"
Bootstrap-Table表格内添加操作按钮的实现方法
HerryDong的博客
03-24 1万+
一般在利用Bootstrap-Table显示后台数据时，我们往往会在表格的最后一列添加操作按钮，以便对某条数据进行修改和删除操作，如下图所示： 当点击编辑按钮时，界面会弹出模态框供用户操作，点击修改后表格自动刷新，如下图所示： 测试数据 前端代码 <!DOCTYPE html> <html> <head> <meta charset="utf...
Bootstrap进度条与AJAX后端数据传递结合使用_bootstrap进度条怎么和后端交互的(1)
2401_83947353的博客
04-17 222
控制器Controller。
Bootstrap Table通过data-url及data-ajax后台分页
lgangui的博客
06-18 2325
使用data-url 后台分页 前台代码 <!-- Page Content --> <div class="col-sm-10" id="content"> {% csrf_token %} <title>Re-install</title> <div style="height: 50px"> <div class=
bootstrap+jquery+ajax跨域实现短信验证码登录
冷月心的博客
02-15 2827
bootstrap+jquery+ajax跨域实现短信验证码登录
bootstrap table ajax分页
09-03
Bootstrap Table是一款基于Bootstrap框架的强大的表格插件，它可以快速搭建精美的数据表格，并支持通过Ajax进行分页加载数据。 使用Bootstrap Table进行Ajax分页，需要在表格初始化时设置相关参数和方法。首先，在HTML中创建一个容器来存放表格，如下所示： ```html <div id="tableContainer"></div> ``` 然后，在JavaScript中进行表格的初始化，同时设置Ajax分页的相关参数和方法，如下所示： ```javascript $(function() { $('#tableContainer').bootstrapTable({ method: 'get', // 通过GET方式获取数据 url: 'your_ajax_url', // 设置读取数据的URL地址 pagination: true, // 开启分页 sidePagination: 'server', // 分页方式为服务器端分页 queryParamsType: '', // 参数类型为默认的'limit'和'offset' queryParams: function(params) { // 自定义请求参数 params.customParam1 = 'value1'; params.customParam2 = 'value2'; return params; }, responseHandler: function(res) { // 自定义数据处理函数 return res.data; // 返回服务器端返回的数据 }, onLoadSuccess: function(data) { // 加载成功后的回调函数 // TODO: 处理加载成功后的操作 }, onLoadError: function(status) { // 加载失败后的回调函数 // TODO: 处理加载失败后的操作 } }); }); ``` 以上代码中，`method`参数设置为'get'表示使用GET方式获取数据，`url`参数设置为ajax请求的URL地址，`pagination`参数设置为true表示开启分页，`sidePagination`参数设置为'server'表示服务器端分页，`queryParamsType`参数设置为空表示请求参数为默认的'limit'和'offset'。 `queryParams`参数可以自定义请求参数，其中`params`是向服务器端发送的参数对象，可以添加自定义的参数。 `responseHandler`参数可用于自定义数据处理函数，将服务器端返回的数据进行处理后返回给Bootstrap Table。 `onLoadSuccess`参数和`onLoadError`参数分别是加载成功和失败后的回调函数，可以在加载完成后进行相应的操作。 通过以上设置，就可以实现使用Bootstrap Table进行Ajax分页加载数据的功能。当用户进行分页操作时，插件会自动发送Ajax请求获取对应页码的数据并更新到表格中，从而实现了Ajax分页的效果。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值