问题
I am using DataTable in a web application and I find that DataTable is not compatible with inline forms with a <button type="submit" formaction="..."></button>. In IE 11 it is not working; submit does not work, but in Chrome 65 and Firefox 59 it is working.
Table is a 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. */
)};
With every line as a form:
<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>
...
And at the end of every line, a button like;
<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>
I have created a demo in jsfiddle, however it shows that with DataTable it does not work even in Chrome neither Firefox, but it is not true; in reality it just stops in IE, only tested IE 11. However, if you delete the DataTable definition, it just works in IE and other modern web explorers, which is the same with my real code.
I have searched and find ppl talking about DataTables ordering, even disabled, will delete some attributes and stop IE from working, but Chrome and FireFox can work without it.
回答1:
A colleague of mine found a solution: change the formaction into href and append param after the url, something like what this question states, but with details:
Buttons change type to button and attached with a onclick function:
<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>
The function:
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();
}
(the line form is named formManager{{proc.id}} to distinguish between each row)
回答2:
You can place your form inside each table data tag like the code below:
<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>
来源：https://stackoverflow.com/questions/49533389/form-submit-button-in-a-datatable-not-working-in-ie-11due-to-datatable-bug