Datatable filter drop down not showing value from input field in a table column

Lesteryam

I have a jquery datatable with 5 columns. The last 4 columns consists of data with input textbox field. I'm trying to populate the value from the input textbox in each <td> uniquely into the filter drop-down however the filter drop-down menu keep showing "undefined" instead of the input value. Can someone help? Thanks

PHP code:

```<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 code:

```$(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++;
                    } );        
    }

});

});```

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

kthorngren

I would start by debugging $(d).find("input").val(); to find where the undefined is coming from. What is the content of d. If you still need help then, as Colin said, provide a link to a test case so we can help you debug the column.data().unique().sort().each( function ( d, j ) loop.

Kevin