jQuery UI + Data Tables Simple Example

A very simple example of a DataTable table styled with jQuery UI with submit buttons in the form.

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script>
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<script src="http://cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>
<form action="nothing" method="get" id="formId">
    <table id="editTable">
        <thead>
            <tr>
                <th>Actions</th>
                <th>Type</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type='submit' name="insideKitten"></td>
                <td>Kitten</td>
            </tr>
            <tr>
                <td><input type='submit' name="insidePupppy"></td>
                <td>Puppy</td>
            </tr>
        </tbody>
    </table>
    <input type='submit' name="outside">
</form>

JavaScript

jQuery(function() {
debugger;
    jQuery('#editTable').dataTable();
    jQuery('#formId').submit(function(e) {
      alert('Form for .submit() called.');
      return false;
    });    
});