Выпадающий список Datatable Filter не отображается правильно - PullRequest
Новая
       335

Выпадающий список Datatable Filter не отображается правильно

0 голосов
/ 07 августа 2020

Я пытаюсь отобразить раскрывающийся список фильтров для каждого столбца. Некоторые столбцы правильно отображают значение unqiue. Однако есть 3 раскрывающихся списка фильтров, которые отображаются некорректно. В эти 3 столбца я включил скрытое поле ввода в <td>, что необходимо, поскольку я использую JS, чтобы проверить, находится ли значение данных из скрытого ввода в определенном диапазоне. <td> изменит цвет в зависимости от условия. Однако это привело к тому, что в моем раскрывающемся списке 3 фильтра отобразилось значение из скрытого ввода, на которое я не рассчитывал. Может как-нибудь помочь? Ниже приведены мои коды.

PHP код: 

    <table id="pic_table" class="table" class="display">
                        <thead>
                            <tr>
                                <th class="filterhead"></th>
                                <th class="filterhead"></th>
                                <th class="filterhead"></th>
                                <th class="filterhead"></th>
                                <th class="filterhead"></th>
                                <th class="filterhead"></th>
                                <th class="filterhead"></th>
                            </tr>
                            <tr>
                                <th>Serial</th>
                                <th>Name</th>
                                <th>Project Reference</th>
                                <th>Basic Profile</th>
                                <th>Employment Permits</th>                 
                                <th>Last Updated</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                <?php
                  .....................

                     while($row = sqlsrv_fetch_array( $sql_stmt, SQLSRV_FETCH_NUMERIC)){
        
                            echo"<tr>";
                            echo "<td>".$row[0]."</td>";
                            echo "<td class='name_col'>".$row[1]."</td>";
                            echo "<td class='prbk'><input type='hidden' class='pr' name='pr' value='".$row[3]."'>".$row[3]."%</td>";
                            echo "<td class='bpbk'><input type='hidden' class='bp' name='bp' value='".$row[4]."'>".$row[4]."%</td>";
                            echo "<td class='epbk'><input type='hidden' class='ep' name='ep' value='".$row[5]."'>".$row[5]."%</td>";                    
                            echo "<td>".$row[2]->format("d M Y")."</td>";
                            echo "<td id='status'></td>";
                            echo "</tr>";    
        
                  }
             ?>
</tbody>
</table>

JS: 

 $(document).ready( function () {              
          $('#pic_table').DataTable({
        
                initComplete: function () {
        
                        var i = 0;
                                this.api().columns().every( function () {
                                    var column = this;
                                    var select = $('<select><option value="">All</option></select>')
                                        .appendTo( $('.filterhead').eq(i).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>' )
                                    } );
                                    i++;
                                } );        
                }
                
            });
    });

Скриншот ошибки:

введите описание изображения здесь

1 Ответ

0 голосов
/ 08 августа 2020

Спасибо, jameson2012. Основываясь на вашем предложении, я заставил его работать, заменив скрытое поле ввода атрибутом данных в <td>. Ниже мое простое решение. 

 echo "<td class='prbk' data-id='".$row[3]."'>".$row[3]."%</td>";
 echo "<td class='bpbk' data-id='".$row[4]."'>".$row[4]."%</td>";
 echo "<td class='epbk' data-id='".$row[5]."'>".$row[5]."%</td>";
...