此示例演示从表中获取所有的输入的元素。
HTML:
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Position</th>
<th>Office</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Age</th>
<th>Position</th>
<th>Office</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td><input type="text" id="row-1-age" name="row-1-age" value="61"/></td>
<td><input type="text" id="row-1-position" name="row-1-position" value="System Architect"/></td>
<td><select size="1" id="row-1-office" name="row-1-office">
<option value="Edinburgh" selected="selected"> Edinburgh</option>
<option value="London"> London</option>
<option value="New York"> New York</option>
<option value="San Francisco"> San Francisco</option>
<option value="Tokyo"> Tokyo</option>
</select></td>
</tr>
<tr>
<td>Garrett Winters</td>
<td><input type="text" id="row-2-age" name="row-2-age" value="63"/></td>
<td><input type="text" id="row-2-position" name="row-2-position" value="Accountant"/></td>
<td><select size="1" id="row-2-office" name="row-2-office">
<option value="Edinburgh"> Edinburgh</option>
<option value="London"> London</option>
<option value="New York"> New York</option>
<option value="San Francisco"> San Francisco</option>
<option value="Tokyo" selected="selected"> Tokyo</option>
</select></td>
</tr>
<tr>
<td>Ashton Cox</td>
<td><input type="text" id="row-3-age" name="row-3-age" value="66"/></td>
<td><input type="text" id="row-3-position" name="row-3-position" value="Junior Technical Author"/></td>
<td><select size="1" id="row-3-office" name="row-3-office">
<option value="Edinburgh"> Edinburgh</option>
<option value="London"> London</option>
<option value="New York"> New York</option>
<option value="San Francisco" selected="selected"> San Francisco</option>
<option value="Tokyo"> Tokyo</option>
</select></td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td><input type="text" id="row-4-age" name="row-4-age" value="22"/></td>
<td><input type="text" id="row-4-position" name="row-4-position" value="Senior Javascript Developer"/></td>
<td><select size="1" id="row-4-office" name="row-4-office">
<option value="Edinburgh" selected="selected"> Edinburgh</option>
<option value="London"> London</option>
<option value="New York"> New York</option>
<option value="San Francisco"> San Francisco</option>
<option value="Tokyo"> Tokyo</option>
</select></td>
</tr>
<tr>
<td>Airi Satou</td>
<td><input type="text" id="row-5-age" name="row-5-age" value="33"/></td>
<td><input type="text" id="row-5-position" name="row-5-position" value="Accountant"/></td>
<td><select size="1" id="row-5-office" name="row-5-office">
<option value="Edinburgh"> Edinburgh</option>
<option value="London"> London</option>
<option value="New York"> New York</option>
<option value="San Francisco"> San Francisco</option>
<option value="Tokyo" selected="selected"> Tokyo</option>
</select></td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td><input type="text" id="row-6-age" name="row-6-age" value="61"/></td>
<td><input type="text" id="row-6-position" name="row-6-position" value="Integration Specialist"/></td>
<td><select size="1" id="row-6-office" name="row-6-office">
<option value="Edinburgh"> Edinburgh</option>
<option value="London"> London</option>
<option value="New York" selected="selected"> New York</option>
<option value="San Francisco"> San Francisco</option>
<option value="Tokyo"> Tokyo</option>
</select></td>
</tr>
<tr>
<td>Donna Snider</td>
<td><input type="text" id="row-57-age" name="row-57-age" value="27"/></td>
<td><input type="text" id="row-57-position" name="row-57-position" value="Customer Support"/></td>
<td><select size="1" id="row-57-office" name="row-57-office">
<option value="Edinburgh"> Edinburgh</option>
<option value="London"> London</option>
<option value="New York" selected="selected"> New York</option>
<option value="San Francisco"> San Francisco</option>
<option value="Tokyo"> Tokyo</option>
</select></td>
</tr>
</tbody>
</table>
JavaScript:
$(document).ready(function() {
var table = $('#example').DataTable();
$('button').click(function() {
var data = table.$('input, select').serialize();
alert("The following data would have been submitted to the server: \n\n" + data.substr(0, 120) + '...');
return false;
});
});