jQuery DataTable过滤器下拉列表不显示输入字段中的值

如何解决jQuery DataTable过滤器下拉列表不显示输入字段中的值

我有一个5列的jquery数据表。最后4列包含带有输入文本框字段的数据。我试图将每个<td>中输入文本框中的值唯一地填充到过滤器下拉菜单中，但是过滤器下拉菜单始终显示“未定义”。有人可以帮忙吗？谢谢

php代码：

        <table id="pic_table" class="table" class="display" style="font-size:11px;">
            <thead>
                <tr>
                    <th class="filterhead"></th>
                    <th class="filterhead"></th>
                    <th class="filterhead"></th>
                    <th class="filterhead"></th>
                    <th class="filterhead"></th>
                </tr>
                <tr>
                    <th>Project Serial #</th>
                    <th>Employee's Name</th>
                    <th>Access Card #</th>
                    <th>FIN/NRIC</th>
                    <th>Email</th>                      
                </tr>
            </thead>
            <tbody>
                <?php
                 ..........
                 while($row = sqlsrv_fetch_array( $sql_stmt,SQLSRV_FETCH_NUMERIC)){                 
                     $row_num = sprintf('%04d',$row[0]);
                     $serial = $row[1];
                     $name = $row[2];
                     $access = $row[3];
                     $ic = $row[4];
                     $email = $row[5];
                                         
                    echo"<tr>";
                    echo "<td data-id='".$serial."'><b>".$group.$row_num."</b></td>";
                    echo "<td><input type='text' name='name' class='form-control name' id='name' value='".$name."'></td>";
                    echo "<td><input type='text' name='access' class='form-control access' id='access' value='".$access."'></td>";                  
                    echo "<td><input type='text' name='ic' class='form-control ic' id='ic' value='".$ic."'></td>";
                    echo "<td><input type='text' name='email' class='form-control email' id='email' value='".$email."'></td>";                          
                    echo "</tr>";
                    
                 }
                ?>
            </tbody>
        </table>

js：

$(document).ready( function () {
    
        $.fn.dataTableExt.ofnSearch['html-input'] = function(value) {
            return $(value).val();
        };
    
    /****************Table********************/
    $('#pic_table').DataTable({
    
        columnDefs: [{ "type": "html-input","targets": [1,2,3,4] }],// to have HTML tags removed for sorting/filtering
        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 ) {
                                if(column.index() == 1){ d = $(d).find("input").val();}
                                if(column.index() == 2){ d = $(d).find("input").val(); }
                                if(column.index() == 3){ d = $(d).find("input").val(); }
                                if(column.index() == 4){ d = $(d).find("input").val(); }
                                select.append( '<option value="'+d+'">'+d+'</option>' )
                            } );
                            i++;
                        } );        
        }
        
    });
});

错误屏幕截图