Проблемы с датами

Question

Представление:

<?php 
    $attributes = array('class' => 'form-horizontal', 'id' => 'Form');
    echo form_open($loginRedirect2,$attributes);
?>

<div class="stock_report" id="table_stock"> 

    <div class="stock_report" id="table_stock_print"> 
        <table id="order-listing" class="table">
            <thead>
                <tr class="bg-light">
                    <th><input type="checkbox" name="selectAll" id="selectAll" class="form-control" data-to-table="tasks" value=1></th>
                    <th>Code</th>
                    <
                </tr>
            </thead>
            <tbody class="reportData">
                <?php
                    if(is_array($employees)){
                    foreach($employees as $employee){
                ?>

                <tr>
                    <td class="a-center "><input type="checkbox" name="selectall[]" class="form-control" value="<?php echo $employee['employeeId']; ?>"/></td>
                    <td><?php echo $employee['Code'];?></td> 

                </tr>
                <?php
                    }
                    }else{
                ?>
                <?php
                    }   
                ?>
            </tbody>
            <tfoot>
                <tr class="bg-light">
                    <th><input type="checkbox" name="selectAll" id="selectAll" class="form-control" data-to-table="tasks" value=1></th>
                    <th>Code</th>

                </tr>
            </tfoot>
        </table>
    </div>
</div>
<div class="shift_category form-group">

    <button type="submit" class="btn btn-primary">Submit</button>
</div>
<?php echo form_close();?>

Сценарий:

$(document).ready(function() {
        var oTable = $('#order-listing').dataTable( {
            initComplete: function () {
                this.api().columns().every( function () {
                    var column = this;
                    var select = $('<select><option value=""></option></select>')
                        .appendTo( $(column.footer()).empty() )
                        .on( 'change', function () {
                            var val = $.fn.dataTable.util.escapeRegex(
                                $(this).val()
                            );

                            column
                                .search( val ? '^'+val+'$' : '', true, false )
                                .draw();
                        } );

                    column.data().unique().sort().each( function ( d, j ) {
                        select.append( '<option value="'+d+'">'+d+'</option>' )
                    } );
                } );
            },
            columnDefs: [ {
                orderable: false,
                className: 'select-checkbox',
                targets:   0
            } ],
            select: {
                style:    'multi',
                selector: 'td:first-child'
            },
            lengthMenu: [[20,50, 100, -1], [20, 50, 100, "All"]],
            pageLength: 20 
         } );
        var allPages = oTable.fnGetNodes();

        $('body').on('click', '#selectAll', function () {
            if ($(this).hasClass('allChecked')) {
                $('input[type="checkbox"]', allPages).prop('checked', false);
            } else {
                $('input[type="checkbox"]', allPages).prop('checked', true);
            }
            $(this).toggleClass('allChecked');
        });




    } );

Вот мое представление данных и сценарий. Я добавил флажок к этой таблице данных. Но проблема в том, что опция выбора все флажокне работает должным образом. Вот это модальное представление. Первое время, когда я нажимаю кнопку selectall, оно не работает. Когда я нажимаю кнопку выхода, затем открываю модальное окно, флажок selectall срабатывает. Как решить эту проблему.

Answer 1

Вы используете идентификатор «selectAll» дважды.Согласно веб-документам MDN , «глобальный атрибут id определяет уникальный идентификатор (ID), который должен быть уникальным во всем документе».Использование идентификатора несколько раз может привести к неопределенному поведению.Вместо этого рассмотрите возможность использования класса «selectAll», который можно применять к нескольким элементам.

Тогда вместо этого:

$('body').on('click', '#selectAll', function () {
    if ($(this).hasClass('allChecked')) {
        $('input[type="checkbox"]', allPages).prop('checked', false);
    } else {
        $('input[type="checkbox"]', allPages).prop('checked', true);
    }
    $(this).toggleClass('allChecked');
});

Используйте это:

$('.selectAll').change(function() {
    if ($(this).hasClass('allChecked')) {
      $('input[type="checkbox"]').prop('checked', false);
    } else {
      $('input[type="checkbox"]').prop('checked', true);
    }
    $(this).toggleClass('allChecked');
});

Прежде всего убедитесь, что ваш $(document).ready(function() работает без исключений - я не могу быть уверен в этом, так как пытался запустить его с вашей библиотекой данных.Используя Chrome, вы можете увидеть любые исключения, если вы нажмете Ctrl + Shift + I и перейдете на вкладку консоли.