Java-Android-Gwt-Windows-Linux-Sql-Tomcat-

Result Table will display like below image:

Source Code:

<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.15/datatables.min.js"></script>
<script type="text/javascript" src="https://www.gyrocode.com/lab/articles/jquery-datatables-how-to-submit-all-pages-form-data/demo.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.15/datatables.min.css" />
</head>

<table id="example1" 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>
<option value="New York">New York</option>
<option value="San Francisco">San Francisco</option>
<option value="Tokyo" selected="selected">Tokyo</option>
</select></td>
<td><input type="checkbox" name="r2_selected" value="2"></td>
<td><textarea name="r2_comments" rows="2" cols="10"></textarea></td>
</tr>
<tr>
<td>3</td>
<td>Ashton Cox</td>
<td><input type="text" name="r3_age" value="66" size="3"></td>
<td><select size="1" name="r3_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>
<td><input type="checkbox" name="r3_selected" value="3"></td>
<td><textarea name="r3_comments" rows="2" cols="10"></textarea></td>
</tr>
<tr>
<td>4</td>
<td>Cedric Kelly</td>
<td><input type="text" name="r4_age" value="22" size="3"></td>
<td><select size="1" name="r4_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="r4_selected" value="4"></td>
<td><textarea name="r4_comments" rows="2" cols="10"></textarea></td>
</tr>
<tr>
<td>5</td>
<td>Airi Satou</td>
<td><input type="text" name="r5_age" value="33" size="3"></td>
<td><select size="1" name="r5_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>
<td><input type="checkbox" name="r5_selected" value="5"></td>
<td><textarea name="r5_comments" rows="2" cols="10"></textarea></td>
</tr>
<tr>
<td>6</td>
<td>Brielle Williamson</td>
<td><input type="text" name="r6_age" value="61" size="3"></td>
<td><select size="1" name="r6_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>
<td><input type="checkbox" name="r6_selected" value="6"></td>
<td><textarea name="r6_comments" rows="2" cols="10"></textarea></td>
</tr>
<tr>
<td>7</td>
<td>Herrod Chandler</td>
<td><input type="text" name="r7_age" value="59" size="3"></td>
<td><select size="1" name="r7_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>
<td><input type="checkbox" name="r7_selected" value="7"></td>
<td><textarea name="r7_comments" rows="2" cols="10"></textarea></td>
</tr>
<tr>
<td>8</td>
<td>Rhona Davidson</td>
<td><input type="text" name="r8_age" value="55" size="3"></td>
<td><select size="1" name="r8_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>
<td><input type="checkbox" name="r8_selected" value="8"></td>
<td><textarea name="r8_comments" rows="2" cols="10"></textarea></td>
</tr>
<tr>
<td>9</td>
<td>Colleen Hurst</td>
<td><input type="text" name="r9_age" value="39" size="3"></td>
<td><select size="1" name="r9_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>
<td><input type="checkbox" name="r9_selected" value="9"></td>
<td><textarea name="r9_comments" rows="2" cols="10"></textarea></td>
</tr>
<tr>
<td>10</td>
<td>Sonya Frost</td>
<td><input type="text" name="r10_age" value="23" size="3"></td>
<td><select size="1" name="r10_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="r10_selected" value="10"></td>
<td><textarea name="r10_comments" rows="2" cols="10"></textarea></td>
</tr>
<tr>
<td>11</td>
<td>Jena Gaines</td>
<td><input type="text" name="r11_age" value="30" size="3"></td>
<td><select size="1" name="r11_office">
<option value="Edinburgh">Edinburgh</option>
<option value="London" selected="selected">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="r11_selected" value="11"></td>
<td><textarea name="r11_comments" rows="2" cols="10"></textarea></td>
</tr>
<tr>
<td>12</td>
<td>Quinn Flynn</td>
<td><input type="text" name="r12_age" value="22" size="3"></td>
<td><select size="1" name="r12_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="r12_selected" value="12"></td>
<td><textarea name="r12_comments" rows="2" cols="10"></textarea></td>
</tr>
</tbody>
</table>
<Script>
$(document).ready(function (){
var table = $('#example1').DataTable({
pageLength: 4
});

// Handle form submission event
$('#frm-example1').on('submit', function(e){
var form = this;

// Encode a set of form elements from all pages as an array of names and values
var params = table.$('input,select,textarea').serializeArray();

// Iterate over all form elements
$.each(params, function(){
// If element doesn't exist in DOM
if(!$.contains(document, form[this.name])){
// Create a hidden element
$(form).append(
$('<input>')
.attr('type', 'hidden')
.attr('name', this.name)
.val(this.value)
);
}
});
});
});

</script>

Saturday 9 May 2020

Bootstrap Pagination with Input Fields Example code

No comments:

Post a Comment