bootstrap table更新数据,根据查询条件和参数展示列表
来源:互联网 发布:java中的高级流 编辑:程序博客网 时间:2024/06/16 12:45
最近刚开始接触bootstrap table,感觉比较好用,初始化很方便。
html代码:
<div class="panel panel-default"> <div class="panel-heading">搜索</div> <div class="panel-body"> <form role="form" id="searchForm" class="form-inline"> <div class="form-group"> <label for="sname1">用户名</label> <input type="text" class="form-control" id="sname1" name="sname1" placeholder="请输入名称"> </div> <div class="form-group"> <button type="button" id="searchBtn" class="btn btn-default">开始搜索</button> </div> </form> </div> </div> <!--列表展示--> <div class="table-responsive" id="listDiv"> <table class="table table-striped table-hover" id="studentTable"> </table> </div>
前面一个div是搜索的表单,显示数据的是一个table,初始化bootstrap table的js网上有很多可以参考,我这里只是用最简单的前端分页,js代码如下:
$(document).ready(function() { //调用函数,初始化表格 var oTable = new TableInit(); oTable.Init(); }); var TableInit = function () { var oTableInit = new Object(); //初始化Table oTableInit.Init = function () { var sname11 = $("#sname1").val(); var urlStr = '/StudentInfo/student/listData?sname1=' + sname11; //console.log(urlStr); $('#studentTable').bootstrapTable({ url: urlStr, //请求后台的URL(*) method: 'get', //请求方式(*) toolbar: '#toolbar', //工具按钮用哪个容器 striped: true, //是否显示行间隔色 cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*) pagination: true, //是否显示分页(*) //sortable: false, //是否启用排序 //sortOrder: "asc", //排序方式 //queryParams: oTableInit.queryParams,//传递参数(*) queryParams : { sname1 : 'r', test:'r' }, sidePagination: "client", //分页方式:client客户端分页,server服务端分页(*) pageNumber:1, //初始化加载第一页,默认第一页 pageSize: 5, //每页的记录行数(*) pageList: [10, 25, 50, 100], //可供选择的每页的行数(*) strictSearch: true, clickToSelect: true, //是否启用点击选中行 height: 460, //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度 uniqueId: "id", //每一行的唯一标识,一般为主键列 cardView: false, //是否显示详细视图 detailView: false, //是否显示父子表 columns: [{ checkbox : true }, { field: 'sno', title: '学号' }, { field: 'sname', title: '姓名' }, { field: 'gender', title: '性别' }, { field: 'major', title: '专业' }, { title: '操作', align: 'center', formatter:function(value,row,index){ var e = '<button type="button" class="btn btn-primary" onclick="updateFun(\''+ row.id +'\')">修改</button>'; var d = '<button type="button" class="btn btn-danger" onclick="deleteFun(\''+ row.id +'\')">删除</button>'; return e+d; } } ] }); }; //得到查询的参数 oTableInit.queryParams2 = function (params) { var temp = { //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的 //limit: params.limit, //页面大小 //offset: params.offset, //页码 sname1 : "r", }; return temp; }; return oTableInit; };
点击搜索按钮后,一开始采用再次调用init()方法,发现参数无法传递过去,列表也没有更新,后来看了网上一篇资料发现不能在调用该Init()方法,正确写法应该为:
$("#searchBtn").click(function() { var sname1 = $("#sname1").val(); $.ajax({ type: "post", url: "/StudentInfo/student/listData", data: {sname1 : sname1}, dataType:"json", success : function(json) { $("#studentTable").bootstrapTable('load', json);//主要是要这种写法 } }); });
然后问题解决,当然上面这个方法也应该放在$(document).ready(function() {
})里。
阅读全文
0 0
- bootstrap table更新数据,根据查询条件和参数展示列表
- Bootstrap Table获取并展示数据列表
- bootstrap table 条件查询
- 十四、bootstrap-table 展示数据
- mysql查询数据,根据条件更新到另一张表
- mysql根据查询条件更新
- bootstrap-table 表头数据展示错位
- bootstrap table通过ajax获取后台数据展示在table
- 根据选择状态展示对应数据列表
- js根据条件过滤table数据
- Bootstrap table-ERP-数据列表显示方法
- Bootstrap Table 查询(服务器端)、刷新数据
- Bootstrap Table 查询(服务器端)、刷新数据
- Mysql根据条件批量更新动态数据
- table展示数据,数据分页查询,底部导航生成
- 如何在列表、字典和集合中根据条件筛选数据
- 空间数据查询——根据属性条件查询对象
- 空间数据查询——根据几何条件查询对象
- 一些编码规范。
- java Calendar 日历的打印
- 长连接和短连接-计算机网络
- SSLContext
- 数据存储之Properties
- bootstrap table更新数据,根据查询条件和参数展示列表
- Java线程面试题 Top 50
- android 组件 :process 标签简析
- 将信息保存到file中(通过文件输出流)
- MapReduce求爷孙关系
- laravel中$method(...$args)的意义
- error 2003 cant connect to mysql server on localhost 10061
- VC++编程实现修改EXE文件图标
- 关于JavaWeb开发中的基础知识点——resquest response