Jquery控制select实现dataTables数据联动刷新

小鱼儿 2023-10-18 20:12 46阅读 0赞

## 场景 ##

### 效果 ###

![Image 1][]![20190620153915765.gif][]

## 实现 ##

### 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代码：

### 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();//还原初始化了datatable
            var 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作为选中的值进行请求数据的参数，进而后台根据传递的值查询并返回不同的数据。

[Image 1]: 
[20190620153915765.gif]: https://img-blog.csdnimg.cn/20190620153915765.gif