我在网络应用程序中使用DataTable，发现DataTable与<button type="submit" formaction="..."></button>的内联表单不兼容。在IE 11中它不起作用;提交不起作用，但在Chrome 65和Firefox 59中它正在运行。
表格是DataTable：
$('#dataTable-script').DataTable({
"scrollX": true, /* horizontal scroll */
"responsive": false, /* turn this OFF to enable scrollX. Conflict. */
"columnDefs": [
{ "visible": true, "targets": [0, 1, 2, 3, 4] }, /* always show 5 columns */
{ "orderable": false, "targets": [9] } /* the last column not sortable */
],
"order": [
[ 6, 'desc' ] /* initial ordering */
],
"searching": true, /* enable searching/filtering; nothing to do with show/hide search input */
/* dom elements manipulation */
/* f: filter(search input); l: combobox of each page size, _T_ble, _I_nformation, _P_agination, p_R_ocessing-element. */
"dom": "<'row'<'col-md-7 col-lg-9 col-sm-4'l><'col-md-4 col-lg-3 col-sm-5'f>>" + /* 'l' and 'f' on the same line */
"<'row'<'col-md-12't>>" + /* table with correct margin */
"<'row'<'col-md-7 col-lg-9 col-sm-4'i><'col-md-4 col-lg-3 col-sm-5 pull-right'p>>" + /* 'i' and 'p' on the same line */
"r",
"processing": true, /* indicate "processing..." when doing time-consuming task. Related to 'dom':'r': without 'r' it is hidden. */
)};
将每一行作为一种形式：
<tbody>
{% for script in scripts %}
<tr class="odd gradeX">
<form enctype="multipart/form-data" method="post" id="formManager{{script.id}}">
{% csrf_token %}
<input type='hidden' name='scriptID' value='{{script.id}}' />
<td>{{script.name}}</td>
<td>{{script.category.name}}</td>
<td>{{script.platform.name}}</td>
...
在每一行的末尾，都有一个像<; p>这样的按钮
<button type="submit" formaction="{% url 'deleteScript' %}"
onclick="return confirm()"
class="btn btn-danger btn-circle" title="Delete script">
<i class="fa fa-times"></i>
</button>
我已经在jsfiddle创建了一个演示，但是它显示使用DataTable它甚至在Chrome中也不起作用，但它不是真的;实际上它只是在IE中停止，只测试了IE 11.但是，如果删除DataTable定义，它只适用于IE和其他现代Web浏览器，这与我的真实代码相同。
我已经搜索并发现人们正在谈论DataTables订购，即使是已停用，也会删除一些属性并阻止IE工作，但Chrome和FireFox可以在没有它的情况下工作。
答案 0 :(得分：0)
我的一位同事找到了一个解决方案：将formaction更改为href并在网址后添加参数，类似于this question状态，但有详细信息：
按钮将类型更改为button并附加onclick函数：
<button type="button" url="{% url 'copyProcess' %}" onClick="copyIE(this,{{proc.id}})" class="btn btn-success btn-circle"><i class="fa fa-clone" title="RELOAD PROCESS"></i></button>
功能：
function copyIE(elem,indent){
var url = $(elem).attr("url");
formManager='#formManager'+indent;
csrfValue=$("input[name=csrfmiddlewaretoken]").val()
$(formManager).attr("action", url);
/* get the hidden input's value, construct another input element, and append to the form */
$('<input>').attr({
type: 'hidden',
id: 'id',
name: 'id',
value: indent
}).appendTo(formManager);
/* get the csrf token, construct another input element, and append to the form */
$('<input>').attr({
type: 'hidden',
id: 'csrfmiddlewaretoken',
name: 'csrfmiddlewaretoken',
value: csrfValue
}).appendTo(formManager);
$(formManager).submit();
}
（行格式命名为formManager{{proc.id}}以区分每一行）
答案 1 :(得分：0)
您可以将表格放置在每个表数据标签内，如下所示：
<table id="example1" class="table table-bordered table-hover table-head-fixed">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Unit Name</th>
<th scope="col">Accommodation Type</th>
<th scope="col">House Keeping</th>
<th scope="col">Type ID</th>
<th scope="col">Unit ID</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
{% for unit in units %}
<input type="hidden" value="{{ dates_details.checkindate }}" name="checkindate">
<input type="hidden" value="{{ dates_details.checkoutdate }}" name="checkoutdate">
<input type="hidden" value="{{ dates_details.no_of_nights }}" name="no_of_nights">
<tr>
<td scope="row">{{ forloop.counter }}</td>
<td><input value="{{ unit.unit_name }}" type="hidden"
name="unit_name">{{ unit.unit_name }}</td>
<td><input value="{{ unit.accommodation_type_name }}" type="hidden"
name="accommodation_type_name">{{ unit.accommodation_type_name }}
</td>
<td><input value="{{ unit.house_keeping }}" type="hidden"
name="house_keeping">{{ unit.house_keeping }}</td>
<td><input value="{{ unit.accommodation_type_id }}" type="hidden"
name="accommodation_type_id">{{ unit.accommodation_type_id }}
</td>
<td><input value="{{ unit.id }}" type="hidden"
name="unit_id">{{ unit.id }}
</td>
<td>
<form method="post" action="customer_booking_details">
{% csrf_token %}
<input type="hidden" value="{{ dates_details.checkindate }}" name="checkindate">
<input type="hidden" value="{{ dates_details.checkoutdate }}"
name="checkoutdate">
<input type="hidden" value="{{ dates_details.no_of_nights }}"
name="no_of_nights">
<input value="{{ unit.unit_name }}" type="hidden"
name="unit_name">
<input value="{{ unit.accommodation_type_name }}" type="hidden"
name="accommodation_type_name">
<input value="{{ unit.house_keeping }}" type="hidden"
name="house_keeping">
<input value="{{ unit.accommodation_type_id }}" type="hidden"
name="accommodation_type_id">
<input value="{{ unit.id }}" type="hidden"
name="unit_id">
<button type="submit"
class="btn btn-outline-primary btn-sm m-1 float-md-left"><i
class="fas fa-step-forward mr-2"></i>SELECT
</button>
</form>
</td>
</tr>
{% empty %}
<div class="alert alert-default-info" role="alert">
No Units available at the moment
</div>
{% endfor %}
</tbody>
</table>