I have created table using datatable with in each row have td with input or select field. with having on multiple pages.
The issues is the datatable render 10 row html element at time by default and jquery validation render per page as html.
I need solution to put validation of entire cell of all pagination(pages) using jQuery.
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
<body>
<table id="banklist">
<tr>
<td>
<input id="bn_0" name="bd[0][bn]" placeholder="Enter Bank Name" value="testbank" aria-required="true" class="valid" aria-invalid="false">
</td>
<td>
<select id="sts_0" class="sts" name="bd[0][sts]" aria-required="true">
<option value="">Select Status</option>
<option value="Y" selected="">on</option>
<option value="N">off</option>
</select>
</td>
</tr>
<tr>
<td> 100 more tr td input select <td>
</tr>
</table>
</body>
</style>
<script type="text/javascript" src="resources/js/list_newbank.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
$(document).ready(function() {
$('#banklist').DataTable({
scrollX: true,
scrollCollapse: true,
});
});
https://jqueryvalidation.org/ jQuery Validation:
$("#banklist").validate({
errorPlacement: function(error, element) {
var ele_name = element.attr('name');
console.log(ele_name);
$('.valid').attr('style','border : 1px solid #c2bfbf !important');
if($('input,select').hasClass('error')) {
//$('label.error').remove();
$('input.error, select.error').attr('style','border : 1px solid red !important');
error.appendTo( $('.error[name="'+ele_name+'"]').parent('td'));
}
}
});
Look at ajax method. Here as example how I used it for almost the same problem:
$('#dt-all-orders').DataTable({
"ajax": "ajax_files/dt_get_all_orders.php",
"language": {
"url": "js/datatables/datatables.lang.ua.txt"
},
"initComplete": function () {
$('[data-toggle="popover"]').popover();
},
"columnDefs": [
{width : "30px", targets: [0]},
{width : "120px", targets: [2]},
{width : "120px", targets: [3]},
{width : "120px", targets: [4]},
{width : "120px", targets: [5]},
{width : "80px", targets: [6]},
{className: "text-center", targets: [0, 2, 3, 4, 5]},
{className: "td-actions text-center", targets: 6},
],
"aoColumns": [
null,
{ "bSortable": false },
null,
null,
null,
null,
{ "bSortable": false }
],
"lengthMenu": [
[10, 25, 50, 100],
[10, 25, 50, 100]
],
"stateSave": true,
"deferRender": true,
"order": [
[0, "desc"]
],
});
But in this case you have to manually create all columns and use php file with sql query.