首页 > 解决方案 > 如何在数据表初始化期间将 HTML 元素的值传递给“ajax”选项

问题描述

我创建了一个数据表,并为它提供了一个用于服务器处理的 ajax URL。我现在有一个额外的要求,我需要根据从 HTML 下拉元素中选择的值更新数据表的内容。

我不知道如何获取 HTML 下拉列表的选定值并将其传递给数据表,以便可以在 AJAX 服务器请求中使用。

基本上,当用户从下拉列表中选择一个值时,我希望数据表能够立即更新为新数据。

我尝试将“数据”字段作为函数,但我在该函数中所能做的就是在请求中发送一个键值对字段。我无法在数据函数中检索 HTML select 的值。

我试过这个 -

var table = $('#datatable8').DataTable({
"dom": 'T<"clear">lrBtip',
"ajax": {
"url": ajaxURL,
"data": {
  "searchType": $('#selectdays').val()
  }
},
"order": [[2, 'asc']],
"columns": dtcols,
"buttons": [
{
  text: 'Download',
  id: 'downloadbutton',
  className: 'btn ink-reaction btn-flat table-button',
  action: function() {
    var type = $('#selectdays').val();
    location.href = '/admin/reports/lease/'+type;
  }
}
],
"serverSide": true,
"processing": true,
"searching": true,
"stateSave": true,
"paging": true,
"language": {
"lengthMenu": '_MENU_ entries per page',
"search": '<i class="fa fa-search"></i>',
"paginate": {
  "previous": '<i class="fa fa-angle-left"></i>',
  "next": '<i class="fa fa-angle-right"></i>'
}
},
"createdRow": function(row, data) {
//attach site id to a row so we can reference it when clicking 
buttons etc
$(row).attr('data-siteid', data["siteid"]);

if(data["deactivatedat"]) {
  $(row).find('.btn.disable-asset').removeClass('btn- 
flat').addClass('btn-danger').removeClass('disable- 
asset').addClass('enable-asset').text('RE-ENABLE');
}
}
});

这是我的 HTML 下拉元素:

<select class="form-control" id="selectdays">
<option value="1">Please Select</option>
<option value="2">30 Days Report</option>
<option value="3">60 Days Report</option>
<option value="0">90 Days Report</option>
</select>

但是, line"searchType": $('#selectdays').val()不会在请求中创建任何内容。

标签: javascriptjqueryajaxdatatables

解决方案


推荐阅读