Using jQuery DataTables Editing to Edit Multiple Values
I am using jQuery DataTables Editable to be able to edit data in a table.
The table looks like this:
As you can see I have one column with multiple values, when clicking on this column, I want to be able to edit all fields like this:
Can jQuery DataTables Editable be configured to handle multiple values like this? I haven't found any examples, maybe you can point me in the right direction?
+3
source to share
1 answer
To do this, you must provide the correct markup. for example you could do something like this
Html
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr id="1" class="gradeX">
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td>Win 95+</td>
<td class="center">4</td>
<td class="center">
<div class='editable'>line 1</div>
<div class='editable'>Line 2</div>
</td>
</tr>
<tr id="2" class="gradeC">
<td>Trident</td>
<td>Internet Explorer 5.0</td>
<td>Win 95+</td>
<td class="center">5</td>
<td class="center">
<div class='editable'>line 1</div>
<div class='editable'>Line 2</div>
</td>
</tr>
<tr id="3" class="gradeA">
<td>Trident</td>
<td>Internet Explorer 5.5</td>
<td>Win 95+</td>
<td class="center">5.5</td>
<td class="center">
<div class='editable'>line 1</div>
<div class='editable'>Line 2</div>
</td>
</tr>
</tbody>
</table>
Js
var oTable = $('#example').dataTable();
$('td div.editable', oTable).editable('../examples_support/editable_ajax.php', {
"callback": function(sValue, y) {
var aPos = oTable.fnGetPosition(this);
oTable.fnUpdate(sValue, aPos[0], aPos[1]);
},
"submitdata": function(value, settings) {
return {
"row_id": this.parentNode.getAttribute('id'),
"column": oTable.fnGetPosition(this)[2]
};
},
"height": "14px",
"width": "100%"
});
Note that only the last column is editable and I used two <div>
and selected them with $ ('td div.editable', oTable)
Fiddle http://jsfiddle.net/GhgLW/2/
0
source to share