bootstrap-table使用 带条件查询翻页及数据更新的问题。

最新推荐文章于 2023-07-24 08:14:33 发布
最新推荐文章于 2023-07-24 08:14:33 发布
阅读量1.6w 收藏 18
点赞数 1
分类专栏： JavaScript 文章标签： bootstrap-table 条件查询 数据更新 refreshOptions
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cc_fys/article/details/80328977
版权

bootstrap-table很容易上手，方便易用。自己在使用bootstrap-table时查询的参数如下：

{   

    limit: params.limit,     //页面大小

    offset: params.offset,   //页码

    order: params.order,      //排位命令（desc，asc）

    month:month                //查询条件 

 }

首次加载数据时，month默认为””。MySQL 的SQL语句如下即可正常翻页获取数据。

SQL语句：

"SELECT * FROM month_history limit "+ offset + "," + limit;

 

当选择了年度和月份信息后，数据需要更新。给传递的参数month赋值，refresh即可刷新，但是后面发现一个问题。就是翻页过后由于offset变更，带条件查询是可能不能获取到需要的数据。

$('#table').bootstrapTable('refresh');

 

 SQL语句：

"SELECT * FROM month_history where month='"+month +"' limit "+ offset + "," + limit;


最后发现需要更新设置pageNumber为1，也就是带查询参数时应从数据的第一页开始显示。这样问题的解决了，可以正常查询数据和翻页。

$('#table').bootstrapTable('refreshOptions',{pageNumber:1,pageSize:15});




部分JS代码

 

//全局
var month="";

var selectData={};

$(function(){

	//初始化选择框
	 $.ajax({
	     type:"get",
	     url:"${ctx}/Table/MonthHistory/getSelect",
	     dataType:"json",
	     contentType:"application/json",
	     success:function(data){
	         var json =JSON.parse(data);
	         //console.log(data);
	         json.forEach(function(item,index){
	        	 var y=item.split('.')[0];
	        	 var m=item.split('.')[1];
	        	 if(!selectData[y])
	        		 {
	        		 selectData[y]=[];
	        		 selectData[y].push(m);
	        		 }
	        	 else
	        		 {
	        		 selectData[y].push(m);
	        		 }
	         });
	         var keys = [];
             for (var p1 in selectData) {
                if (selectData.hasOwnProperty(p1))
                	keys.push(p1);
             }
	            
	         $("#selectYear").select2({
	    	     data: keys,
	    	     placeholder:'请选择年度',
	    	     language: "zh-CN",
	    	     allowClear: true,
	    	     width:'150px'
	    	 });
	         
	         $("#selectMonth").select2({
	    	     data:selectData[$("#selectYear").select2("data")[0].id],
	    	     placeholder:'请选择月度',
	    	     language: "zh-CN",
	    	     allowClear: true,
	    	     width:'150px'
	    	 }) 
 
	     },
	     error:function(data){
	         console.log('筛选框获取数据出错啦！');
	     }
	 });
	
	

	//初始化表格
	initTable();
});

//年度更新的时候
$("#selectYear").on("change",function(e)
{
	 var arr=[];
	 if($("#selectYear").select2("data").length!=0)
		 arr=selectData[$("#selectYear").select2("data")[0].id];
	 
	 console.log(arr);
	 //清空月份
	 $("#selectMonth").select2().empty();
	 $("#selectMonth").select2({
	     data:arr,
	     placeholder:'请选择月度',
	     language: "zh-CN",
	     allowClear: true,
	     width:'150px'
	 }) ;

});

function initTable()
{
	$('#table').bootstrapTable({
			url : '${ctx}/Table/MonthHistory/getData',
			method : 'get',
			toolbar : '#toolbar', 
			striped : true, 
			cache : false, 
			pagination : true, 
			sortable : false, 
			sortOrder : "asc", //排序方式
		    //queryParams : oTableInit.queryParams,
			sidePagination : "server", 
			pageNumber : 1, 
			pageSize : 15, 
			pageList : [ 10, 25, 50, 100 ], 
			// search : true, 
			contentType : "application/x-www-form-urlencoded",
			strictSearch : true,
			// showColumns : true, 
			showRefresh : true,
			showToggle : true, 
			minimumCountColumns : 2, 
			clickToSelect : true,
			height :650, 
			uniqueId : "no", 
			cardView : false, 
			detailView : false, 
			 //formatter 查询的参数 
            queryParams : function (params) {
            	//console.log(params);
                var temp = {   
                	limit: params.limit,     //页面大小
                	offset: params.offset,   //页码
                	order: params.order,      //排位命令（desc，asc） 
                	month:month
                };
                return temp;
            },
			columns : [
               [
                    {
                        field: 'month',
                        title: "年月",
                        valign:"middle",
                        align:"center",
                        colspan: 1,
                        rowspan: 2,
                        width:'100px'
                    },
                    {
                        field: 'name',
                        title: "姓名",
                        valign:"middle",
                        align:"center",
                        colspan: 1,
                        rowspan: 2,
                        width:'100px'
                    },
                     {
                        title: "A",
                        valign:"middle",
                         align:"center",
                         colspan: 11,
                         rowspan: 1
                    },
                    {
                         title: "B",
                         valign:"middle",
                         align:"center",
                         colspan: 7,
                         rowspan: 1
                    },
                    {
                    	field: 'sumA',
                        title: "the sum of A",
                        valign:"middle",
                        align:"center",
                        colspan: 1,
                        rowspan: 2,
                        width:'100px'
                    },
                    {
                    	field: 'sumB',
                        title: "the sum of B",
                        valign:"middle",
                        align:"center",
                        colspan: 1,
                        rowspan: 2,
                        width:'100px'
                    },
                    {
                    	field: 'remark',
                        title: "备注",
                        valign:"middle",
                        align:"center",
                        colspan: 1,
                        rowspan: 2,
                        width:'100px'
                    }
                 ],
                 [
                     {
                         field: 'a1',
                         title: 'item1',
                         valign:"middle",
                         align:"center",
                         width:'150px'
                     },
                     {
                         field: 'a2',
                         title: 'item2',
                         valign:"middle",
                         align:"center",
                         width:'150px'
                     },
                     {
                         field: 'a3',
                         title: 'item3',
                         valign:"middle",
                         align:"center",
                         width:'150px'
                     },
                     {
                         field: 'a4',
                         title: 'item4',
                         valign:"middle",
                         align:"center",
                         width:'150px'
                     },
                     {
                         field: 'a5',
                         title: 'item5',
                         valign:"middle",
                         align:"center",
                         width:'150px'
                     },
                     {
                         field: 'a6',
                         title: 'item6',
                         valign:"middle",
                         align:"center",
                         width:'150px'
                     },
                     {
                         field: 'a7',
                         title: 'item7',
                         valign:"middle",
                         align:"center",
                         width:'150px'
                     },
                     {
                         field: 'a8',
                         title: 'item8',
                         valign:"middle",
                         align:"center",
                         width:'150px'
                     },
                     {
                         field: 'a9',
                         title: 'item9',
                         valign:"middle",
                         align:"center",
                         width:'150px'
                     },
                     {
                         field: 'a10',
                         title: 'item10',
                         valign:"middle",
                         align:"center",
                         width:'150px'
                     },
                     {
                         field: 'a11',
                         title: 'item11',
                         valign:"middle",
                         align:"center",
                         width:'150px'
                     },
                     {
                         field: 'b1',
                         title: '测试1',
                         valign:"middle",
                         align:"center",
                         width:'150px'
                     },
                     {
                         field: 'b2',
                         title: '测试2',
                         valign:"middle",
                         align:"center",
                         width:'150px'
                     },
                     {
                         field: 'b3',
                         title: '测试3',
                         valign:"middle",
                         align:"center",
                         width:'150px'
                     },
                     {
                         field: 'b4',
                         title: '测试4',
                         valign:"middle",
                         align:"center",
                         width:'150px'
                     },
                     {
                         field: 'b5',
                         title: '测试5',
                         valign:"middle",
                         align:"center",
                         width:'150px'
                     },
                     {
                         field: 'b6',
                         title: '测试6',
                         valign:"middle",
                         align:"center",
                         width:'150px'
                     },
                     {
                         field: 'b7',
                         title: '测试7',
                         valign:"middle",
                         align:"center",
                         width:'150px'
                     }
                 ]
           ],
			onLoadSuccess: function(data){  
	            console.info("加载成功");
	            //console.log(data);
	      },
	        onLoadError: function(){  
	            console.info("加载数据失败");
	        }

		});

	}
	
	
	//查询
	$('#search').click(function(){
		if($("#selectYear").select2("data").length==0||$("#selectMonth").select2("data").length==0)
		{
			month="";
			layer.msg('请选择年度和月份信息！', { icon: 17, time: 1000 });
		}
		else
		{
			//查询之后重新从第一页算起 
			month=$("#selectYear").select2("data")[0].id+'.'+$("#selectMonth").select2("data")[0].id;
			$('#table').bootstrapTable('refreshOptions',{pageNumber:1,pageSize:15});
			//刷新
			//$('#table').bootstrapTable('refresh');  
		}
	});



 





ccessl
关注
专栏目录
bootstrapTable分页、模糊查询、数据刷新、页面跳转。。。各种坑
qq_39628595的博客
04-12 4320
首先准备好用到的js和css bootstrap下载地址：http://www.bootcss.com/ bootstrap table插件下载地址 官网：https://bootstrap-table.com/ Github：https://github.com/wenzhixin/bootstrap-table 主要css和js bootstrap-table.css、jquery....
bootstrap-table自动翻页
qq_44796977的博客
03-20 1611
bootstrap-table自动翻页 思路 1.加载表格（客户端分页） 2.做个定时任务，定时触发下一页按钮，到最后一页是跳转到第一页 代码(JS) //加载表格 initTable(); //定时任务（每4秒执行一次） setInterval(function(){ // 分页（即上图中框出的红色部分） var $pagination = $(".bomtre...
按条件查询 因为翻页是按刷新实现的 只能把条件写在session里
想离开水的鱼
08-18 2363
查询时，先把查询条件写在session里  public String search() throws Exception   {   //applicationDao.insertUser(app);   String searchname = app.getSearch
问题记录——bootstrapTable分页后搜索时会保留在当前页的问题及解决方法
鲜衣怒码的博客
11-07 2883
bootstrapTable分页后搜索时会保留在当前页的问题 在网上找了很多资料，都说重新设置pageNumber=1 $('#exampleTable').bootstrapTable({pageNumber:1,pageSize:10}); 上面方法亲测试过是没有用的。 后来找到一位兄台的方法原文点这里 $("#exampleTable").bootstrapTable('refresh')...
php翻页带查询条件,ThinkPHP 分页中带入查询（搜索）条件
weixin_42356307的博客
04-02 445
parameter 属性赋值例如要检索用户表中状态为 1 (status=1) 并且电子包含 163 的用户，当提交表单时(注意表单是 GET 方式提交)，形成的 URL地址大致如下：http://www.5idev.com/index.php/Index/search/status/1/email/163在搜索操作(search)中主要代码如下：public function search(){...
分页查询 翻页功能
h259077的博客
11-15 547
翻页查询
bootstrap-table动态加载json数据并且支持分页
03-16
$('#table').bootstrapTable({ pagination: true, pageSize: 10, // 更多配置... }); }); ``` 在上述代码中，`pagination`设置为`true`启用分页，`pageSize`设为每页10条记录。Bootstrap Table还提供了其他...
使用bootstraptable插件实现表格记录的查询、分页、排序操作
08-29
使用bootstraptable插件实现表格记录的查询、分页、排序操作 Bootstrap-table插件是一个功能强大且广泛应用的开源表格插件，在Web开发中，可以用来实现表格记录的查询、分页、排序等处理。该插件提供了非常丰富的...
bootstrap-table-demo-
05-17
1. **分页**：Bootstrap Table 支持对大量数据进行分页显示，用户可以自定义每页显示的数据数量，同时提供向前、向后翻页的按钮，方便用户浏览。 2. **全文检索**：内置的搜索功能允许用户在表格中输入关键词，系统...
bootstrap table实现点击翻页功能 可记录上下页选中的行
11-29
Bootstrap Table 是一个流行的前端插件，用于创建美观、响应式的表格。在实际应用中，有时我们需要在用户翻页后保留之前选中的行状态，以便在返回时仍然能看到这些选择。在给定的代码中，作者提供了一个解决方案来...
从翻页条件查询列表及其详情页动态切换，免于条件携带的实现方案
szpenglq的博客
02-08 301
页面列表查询中需要查看详情或修改页面，如果是在当前页面打开，修改保存返回的时候可能存在无法回到以前列表页，而是回到首页。这样在如果存在大量的数据需要修改，每次修改数据的时候，都需要不断的输入条件，翻页，找到后在修改，户体检极差。     如下是我们在工作中的实践                   行1         行2         ..        
laravel 带条件的分页查询
weixin_33727510的博客
06-12 377
问题：laravel按搜索条件查询侯，点击翻页搜索条件会丢失 解决： //分页处理 $page = isset($page)?$request['page']:1; $res = $res->appends(array( 'uid'=>$uid, 'page'=>$page ...
BootStrap table 传递搜索参数、分页序号递增
girljunjie的博客
01-09 6092
1.查询条件，有个queryParams属性。 $('#allDataTable').bootstrapTable({ method: 'get', queryParams:queryParams, toolbar: '#toolbar', //工具按钮用哪个容器 striped: true, ...
Bootstrap Table实现定时刷新数据
Sclifftop - 保安大队长
08-31 1万+
Bootstrap Table实现定时刷新数据 推荐第二种方法 令表格的id为realTimeTable 1、毁掉表格，再查询数据后append，如果你查大量的数据（例如：查询很多渠道的信息），而获取服务器数据又太慢，你就会看到表格在一行一行的增加 定时器，多长时间执行一次，自己定义，此处是30S setInterval(function() { queryAll
SSS项目专题（六）：带条件的分页查询
亲爱的瑶的博客
08-08 266
1.需求分析 根据查询条件查询，并且能实现查询条件回显、翻页、跳转等功能。 2.分页查询 ①前端请求 将查询条件用form表单套起来 并给表单赋予id 方便之后表单提交操作 <form action="${pageContext.request.contextPath}/stu/list/1/${stu.pageSize}" method="post" id="f1" > &lt...
bootstrap——完美的分页查询
热门推荐
追梦
12-06 3万+
最近，开始我们的Java项目，要求尽量使用bootstrap，因为它比easyUI要好看的多。然后就开始上网查，边查边做，虽然我们引入了一些bootstrap的样式，但是并没有js代码，所有的功能都需要自己用js做。 经过这些天的努力，实现了最基本的分页查询功能，还包括上一页、下一页以及选择跳页的效果，而且可以进行模糊查询，而且如果记录小于5条就不会产生分页等。后期再加上排序，选择列的显示和影藏就更好了。
Bootstrap 修改table title
大黄鸭在发光的专栏
07-24 1112
【代码】Bootstrap 修改table title。
前端开发-Bootstrap-table定时更新
Just like myself.
11-23 974
var app = {}; app.timeTicket = setInterval(function(){ $.ajax({ type : 'POST', url : "/", dataType:"json", data:{'host': host_ip}, ...
bootstrap table columns 如何通过上面的搜索框动态修改下面的title
雪糕的博客
11-28 1981
先查看一下class属性放入到下面括号中 var thinnerobjs =$(".th-inner"); //通过类名找到标签 thinnerobjs[2].innerHTML="更改后的名称";
bootstrap table 翻页后保证选择数据不丢失
最新发布
09-13
当你在使用分页功能时，确保选择的数据不会因为切换页面而丢失，通常需要结合服务器端处理或者前端的状态管理。 1. **服务器端处理**：如果数据量大到不适合前端存储所有选项，可以采用服务器端分页的方式。每次...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值