Datatable th value/text should append in dropdown

JavaScript
1

I am using datatable in this table I need dropdown filters for this I am using below Jquery code but my th value is not appending in my dropdown, it should come in dropdown only instead of showing in out of dropdown.

<!DOCTYPE html>
    <html lang="en">
      <head>
            <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
                    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.0/css/responsive.dataTables.min.css">
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
                    <script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.0/js/dataTables.responsive.min.js"></script> 
      </head>
      <body>
               <table id="example" class="display" cellspacing="0" width="100%">
                                                    <thead>
                                                        <tr id="filters">
                                                            <th>Name</th>
                                                            <th>abc</th>
                                                            <th>zdfd</th>
                                                            <th>Followers</th>
                                                            <th>Rating</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <tr>
                                                            <td>Tiger Nixon</td>
                                                            <td>XYz</td>
                                                            <td>csdf</td>
                                                            <td>2000</td>
                                                            <td>61</td>
                                                        </tr>
                                                        <tr>
                                                            <td>Garrett Winters</td>
                                                            <td>abc</td>
                                                            <td>fdf</td>
                                                            <td>1000</td>
                                                            <td>63</td>
                                                        </tr>
                                                        <tr>
                                                            <td>Ashton Cox</td>
                                                            <td>fd</td>
                                                            <td>sdfds</td>
                                                            <td>700</td>
                                                            <td>90</td>
                                                        </tr>
                                                        <tr>
                                                            <td>Cedric Kelly</td>
                                                            <td>fdds</td>
                                                            <td>fdf</td>
                                                            <td>500</td>
                                                            <td>200</td>
                                                        </tr>
                                                        <tr>
                                                            <td>Airi Satou</td>
                                                            <td>fdsf</td>
                                                            <td>fdsf</td>
                                                            <td>600</td>
                                                            <td>50</td>
                                                        </tr>

                                                    </tbody>
                                                </table>
      </body>
    </html>

below is Jquery code I am using:

$(document).ready(function(){ 
      $('#example').DataTable({
                            responsive: true,
                            ordering: false,
                            initComplete: function () {
                                this.api().columns().every(function () {
                                    var column = this;
                                    var select = $('<select><option value=""></option></select>')
                                        .appendTo($("#filters").find("th").eq(column.index()))
                                        .on('change', function () {
                                        var val = $.fn.dataTable.util.escapeRegex(
                                        $(this).val());                                     

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

                                    console.log(select);

                                    column.data().unique().sort().each(function (d, j) {
                                        select.append('<option value="' + d + '">' + d + '</option>')
                                    });
                                });
                            }
                        });

                        console.log()
});

output which i am getting:

1083×379 10.4 KB

working demo - jsfiddle link:

2

The working demo is definitely helpful, thank you for that.

We can save a reference to the header, and use the text from that header as the first option.

var column = this;
var th = $("#filters").find("th").eq(column.index());
var select = $('<select><option value="">' + th.text() + '</option></select>')
    .appendTo(th)
    ...

We can then replace the appendTo with replaceWith, so that the old heading goes and is replaced by the select.

Here’s the updated code: https://jsfiddle.net/gkm0L680/3/

3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.