'Datatable with form on multipage validation issue

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'));
                        }
                }
  });
jquerycsssql-serverajaxdatatables


Solution 1:[1]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Vetos

Related Questions