jQuery DataTables: How to submit all pages form data via Ajax

Example for article at https://www.gyrocode.com/articles/jquery-datatables-how-to-submit-all-pages-form-data/

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/dt-1.10.15/datatables.min.css">
<script src="https://cdn.datatables.net/v/dt/dt-1.10.15/datatables.min.js"></script>
<h3><a href="https://www.gyrocode.com/articles/jquery-datatables-how-to-submit-all-pages-form-data/">jQuery DataTables: How to submit all pages form data</a></h3>
<h4>Submit all pages form data via Ajax</h4>
<a href="https://www.gyrocode.com/articles/jquery-datatables-how-to-submit-all-pages-form-data/">See full article on Gyrocode.com</a>
<hr><br>

<form name="frm-example" id="frm-example">
<table id="example" class="display" cellspacing="0" width="100%">
   <thead>
      <tr>
         <th>ID</th>
         <th>Name</th>
         <th>Age</th>
         <th>Office</th>
         <th>Selected</th>
         <th>Comments</th>
      </tr>
   </thead>
   <tfoot>
      <tr>
         <th>ID</th>
         <th>Name</th>
         <th>Age</th>
         <th>Office</th>
         <th>Selected</th>
         <th>Comments</th>
      </tr>
   </tfoot>
   <tbody>
      <tr>
         <td>1</td>
         <td>Tiger Nixon</td>
         <td><input type="text" name="r1_age" value="61" size="3"></td>
         <td><select size="1" name="r1_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>
         <td><input type="checkbox" name="r1_selected" value="1"></td>
         <td><textarea name="r1_comments" rows="2" cols="10"></textarea></td>
      </tr>
      <tr>
         <td>2</td>
         <td>Garrett Winters</td>
         <td><input type="text" name="r2_age" value="63" size="3"></td>
         <td><select size="1" name="r2_office">
            <option value="Edinburgh">Edinburgh</option>
            <option value="London">London</option>
         ...

JavaScript

$(document).ready(function (){
   var table = $('#example').DataTable();
   
   // Handle form submission event 
   $('#frm-example').on('submit', function(e){
      // Prevent actual form submission
      e.preventDefault();

      // Serialize form data
      var data = table.$('input,select,textarea').serialize();

      // Submit form data via Ajax
      $.ajax({
         url: '/echo/jsonp/',
         data: data,
         success: function(data){
            console.log('Server response', data);
         }
      });
      
      // FOR DEMONSTRATION ONLY
      // The code below is not needed in production
      
      // Output form data to a console     
      $('#example-console-form').text(data);
   });      
});