Jquery控制select实现dataTables数据联动刷新
场景
效果
实现
html页面代码
页面使用的是thymeleaf模板。
下拉框代码:
<div class="form-group row col-md-6"><label class="col-sm-2 col-form-label">退货发起方</label><div class="col-sm-10"><select class="form-control" name="businessInitiator" id="businessInitiator"><option id="yuanliaoInitiator" th:selected="${refundOrder != null && refundOrder.businessInitiator != null && refundOrder.businessInitiator == '原料立库'}" value="原料立库"><span th:text="原料立库"></span></option><option id="qingjieInitiator" th:selected="${refundOrder != null && refundOrder.businessInitiator != null && refundOrder.businessInitiator == '清洁车间'}" value="清洁车间"><span th:text="清洁车间"></span></option><option id="zhengjiInitiator" th:selected="${refundOrder != null && refundOrder.businessInitiator != null && refundOrder.businessInitiator == '正极车间'}" value="正极车间"><span th:text="正极车间"></span></option><option id="fujiInitiator" th:selected="${refundOrder != null && refundOrder.businessInitiator != null && refundOrder.businessInitiator == '负极车间'}" value="负极车间"><span th:text="负极车间"></span></option><option value="" disabled selected hidden>选择退货发起方</option></select></div></div>
input框代码:
<div class="form-group row col-md-6"><label class="col-sm-2 col-form-label">退货目的地</label><div class="col-sm-10"><input type="text" class="form-control" name="destination" id="destination"readonly></div>
</div>
dataTables代码:
<table id="example" class="table table-striped table-bordered hover" style="width:100%"><thead><tr><th><input type="checkbox" class="checkall" /></th><th>货位编号</th><th>货位类型</th><th>物料类型</th><th>物料状态</th><th>所在货架</th><th>备注</th></tr></thead><tbody></tbody>
</table>
Jquery代码
$(document).ready(function() {//选择退货方后退货目的地绑定联动$("#businessInitiator").bind("change", function () {//获取选中的option的value值var selected = $("#businessInitiator option:selected").val();//获取退货目的地Input对象var destination = $("#destination");switch (selected){case '原料立库':destination.val("原料立库退货点")break;case '清洁车间':destination.val("清洁车间退货点")break;case '正极车间':destination.val("正极车间退货点")break;case '负极车间':destination.val("负极车间退货点")break;default:destination.val("其它退货点")}//退货目的地联动完成// DataTable初始化$("#example").dataTable().fnDestroy();//还原初始化了datatablevar t = $('#example').DataTable({"language": {"processing": "处理中...","lengthMenu": "显示 _MENU_ 项结果","zeroRecords": "没有匹配结果","info": "显示第 _START_ 至 _END_ 项结果,共 _TOTAL_ 项","infoEmpty": "显示第 0 至 0 项结果,共 0 项","infoFiltered": "(由 _MAX_ 项结果过滤)","infoPostFix": "","search": "搜索:","searchPlaceholder": "搜索...","url": "","emptyTable": "表中数据为空","loadingRecords": "载入中...","infoThousands": ",","paginate": {"first": "首页","previous": "上页","next": "下页","last": "末页"},"aria": {paginate: {first: '首页',previous: '上页',next: '下页',last: '末页'},"sortAscending": ": 以升序排列此列","sortDescending": ": 以降序排列此列"},"decimal": "-","thousands": "."},"processing": true,"searching" : false,"pageLength": 100,"serverSide": true,"columnDefs": [ {"searchable": false,"orderable": false,"targets": "_all",}],"dom": '<"top">rt<"bottom"flpi><"clear">',columns: [{ data: 'id' ,"orderable" : false},{ data: 'goodsLocationNumber' },{ data: 'locationTypeName' ,"orderable" : false},{ data: 'saveMaterialTypeName' ,"orderable" : false},{ data: 'materielStatusName',"orderable" : false},{ data: 'shelveName' ,"orderable" : false},{ data: 'remark',"orderable" : false }],columnDefs: [{// 指定第1列,从0开始,0表示第一列,1表示第二列……"targets": 0,"bSortable": false,"render": function(data, type, row, meta) {if (row.isSelected == 1){return '<input type="checkbox" class="checkchild" onclick="childClick(this)" checked="checked" value="' + row.id + '" />'}return '<input type="checkbox" class="checkchild" onclick="childClick(this)" value="' + row.id + '" />'}}],"ajax": function (data, callback, setting) {data.editActionId = $("#refundOrderId").val();data.selected=selected;$.ajax({type: 'POST',url: "/busGoodsLocation/getRejectsLocationsList",cache: false, //禁用缓存//async: true,data: JSON.stringify(data), //传入组装的参数contentType: "application/json",dataType: "json",success: function (result) {callback(result);}})}});});
});
注:
1.页面加载完成后绑定下拉框 select的change事件,获取选中的option的值,通过case进行比较,进而给input进行赋值。
2.然后要还原一次dataTables的初始化,执行初始化的dataTables的初始化并请求数据。
3.将selected作为选中的值进行请求数据的参数,进而后台根据传递的值查询并返回不同的数据。
Jquery控制select实现dataTables数据联动刷新相关推荐
- excel学习-导入数据+联动刷新
导入数据 联动刷新
- 学习使用jquery控制select下拉选项的字体样式
学习使用jquery控制select下拉选项的字体样式 实现代码 实现代码 <script src="../jquery-2.1.4.min.js"></scri ...
- Jquery Select 插件 lyhucSelect 数据联动
数据源: View Code var areaInfo = new Array(); areaInfo[0] = new Array(); areaInfo[0][0]="1"; ...
- 利用jquery 控制select 实例代码
//1.获取选中option值 $('#selectList').val(); //2.获取选中option的文本 $('#selectList :selected').text(); //3.获取多 ...
- jsp ajax动态添加数据,jquery Ajax实现Select动态添加数据
jquery Ajax实现Select动态添加数据,具体内容如下 1.背景 最近在工作中,遇到了一个关于select的问题.一般情况下,select下拉框中的数据都是固定的或者直接在jsp中读取列表值 ...
- jquery ajax下拉联动,基于jQuery Ajax实现下拉框无刷新联动
本文实例为大家分享了jQuery Ajax实现下拉框无刷新联动的具体代码,供大家参考,具体内容如下 HTML代码: @{ Layout = null; } @using DAL; @using Sys ...
- php 导出tables,jquery+php实现导出datatables插件数据到excel的方法_php技巧
本文实例讲述了jquery+php实现导出datatables插件数据到excel的方法.分享给大家供大家参考.具体如下: DataTables是一个jQuery的表格插件.这是一个高度灵活的工具,依 ...
- ajax和php二级联动,jQuery+php+mysql,轻松实现ajax无刷新省市二级联动[多图]
jQuery+php+mysql,轻松实现ajax无刷新省市二级联动[多图] 08-15栏目:技术 TAG:zxfy zxfy 用jQuery的ajax方法,结合PHP,轻松实现省市级的二级联动: h ...
- jquery ajax下拉联动,jQuery Ajax MVC 下拉框联动
无刷新下拉框联动方法: Controllers代码 public JsonResult DH_Change(string DH_ID) { List TeamLeaderList = FinanceD ...
最新文章
- Android移动开发之【Android实战项目】textview实现文字逐字显示效果
- 数据存储之 SQLite 数据库操作(二)
- maven summer_我在Google Summer of Code的经历
- 如何搭建python框架_从0到1告诉你搭建完整Python+requests接口自动化测试框架!
- 编译器、Make和CMake之间的关系
- 2021牛客寒假算法基础集训营6,签到题ACDFGIJ
- 「leetcode」106.从中序与后序遍历序列构造二叉树 105. 从前序与中序遍历序列构造二叉树 (详解)
- vb mysql 实例_vb数据库编程实例-求VB连接数据库实例我想做一个VB连接数据库的简单实例,可以实现 爱问知识人...
- ExactScan Pro 18.12.24 Mac 破解版 万能扫描仪整合工具
- ArcGIS修改默认文件地理数据库
- 计算机触摸板设置方法,笔记本触摸板设置,小编教你笔记本触摸板怎么设置
- word2016 上次启动时失败以安全模式能够解决该问题【office专业版】
- python文本可读性
- PHP微信防止token过期,微信调用接口,防止Access_token过期的方法
- 横向扩展 纵向扩展 数据库_理解数据库扩展模式的指南
- 德克萨斯长角牛 --最短路径
- DHTMLXGantt in Flutter DHTMLXGantt
- GB18030全汉字表
- C和C++哪个更快?
- 从神经递质到网络:利用分子信息功能成像超越组织层级
热门文章
- python的numpy库的基本用法_python numpy库np.percentile用法说明
- Linux运维:CentOS7在防火墙中添加访问端口?
- JUC系列(六) | Callable和Future接口详解使用、FutureTask应用 获取异步线程返回值
- mysql 5.7直接安装版,mysql5.7怎么安装 mysql 5.7安装图文教程
- mysql排列组合实现_Java实现数列的排列组合
- docker镜像启动后端口号是多少_14,Docker容器必知必会,你会了吗?
- QT vs下x64编译变win32编译报错:C:\Users\ycy\AppData\Local\QtMsBuild\qtrcc.targets(69,5): error MSB3073:
- ios 边录音边放_关于Android和iOS系统OneNote支持边录音边记笔记的需求和建议
- 计算机行业从业者的核心竞争力,计算机行业:创新企业上市新规发布,重视具备核心竞争力的真成长.pdf...
- css电视适配,CSS3 巨大的投影电视屏幕