天行健,君子以自强不息;地势坤,君子以厚德载物;

JQuery Datatables 之 表单输入框

此示例演示从表中获取所有的输入的元素。

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;
    });
});

官方:http://datatables.net/examples/api/form.html

点赞

发表评论