Creé una tabla usando una tabla de datos con en cada fila td con campo de entrada o selección. con tener en varias páginas.
El problema es que la tabla de datos representa el elemento html de 10 filas a la vez de forma predeterminada y la validación de jquery representa por página como html.
Necesito una solución para validar la celda completa de todas las paginaciones (páginas) usando 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/ Validación jQuery:
$("#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')); } } });Mira el método ajax. Aquí como ejemplo de cómo lo usé para casi el mismo problema:
$('#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"] ], });Pero en este caso, debe crear manualmente todas las columnas y usar el archivo php con la consulta sql.