場景

效果

實現(xiàn)

html頁面代碼

頁面使用的是thymeleaf模板。

下拉框代碼：

<div class="form-group row col-md-6"><label class="col-sm-2 col-form-label">退貨發(fā)起方</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>選擇退貨發(fā)起方</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>物料狀態(tài)</th><th>所在貨架</th><th>備注</th></tr></thead><tbody></tbody> </table>

Jquery代碼

$(document).ready(function() {//選擇退貨方后退貨目的地綁定聯(lián)動$("#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("其它退貨點")}//退貨目的地聯(lián)動完成// DataTable初始化$("#example").dataTable().fnDestroy();//還原初始化了datatablevar t = $('#example').DataTable({"language": {"processing": "處理中...","lengthMenu": "顯示 _MENU_ 項結(jié)果","zeroRecords": "沒有匹配結(jié)果","info": "顯示第 _START_ 至 _END_ 項結(jié)果，共 _TOTAL_ 項","infoEmpty": "顯示第 0 至 0 項結(jié)果，共 0 項","infoFiltered": "(由 _MAX_ 項結(jié)果過濾)","infoPostFix": "","search": "搜索:","searchPlaceholder": "搜索...","url": "","emptyTable": "表中數(shù)據(jù)為空","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),? //傳入組裝的參數(shù)contentType: "application/json",dataType: "json",success: function (result) {callback(result);}})}});}); });

注：

1.頁面加載完成后綁定下拉框 select的change事件，獲取選中的option的值，通過case進行比較，進而給input進行賦值。

2.然后要還原一次dataTables的初始化，執(zhí)行初始化的dataTables的初始化并請求數(shù)據(jù)。

3.將selected作為選中的值進行請求數(shù)據(jù)的參數(shù)，進而后臺根據(jù)傳遞的值查詢并返回不同的數(shù)據(jù)。

總結(jié)

以上是生活随笔為你收集整理的Jquery控制select实现dataTables数据联动刷新的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。