How to add a DataTable with Drop-down Select Menus

Question

Can I add drop-down select menu to my data table plugins? When I filter Issue_x0020_Status as Active, Resolved and Closed it only shows what ever the user filter. This is my page

And Similar to this

$(document).ready(function() { 
    getUserListItems()
});



    function getUserListItems() {  
        var currentUser = _spPageContextInfo.userId;

    $.ajax({  

        async: true,  
        url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('BUGSList')/items?$select=ID,Title,Requester_x0020_Name,Department,Title0,Priority,Description,Comments,Issue_x0020_Status,Assigned_x0020_To,Author/Id&$filter=substringof('"+ currentUser +"',Author/Id)&$expand=Author/Id",  
        method: "GET",                                                                 
        headers: {  
            "accept": "application/json;odata=verbose",  
            "content-type": "application/json;odata=verbose"    
        },  
        success: function(data) {  
            data = data.d.results;
            $.each(data, function(index, value) {  
            var assigned = (value.Assigned_x0020_To === null)?"...": value.Assigned_x0020_To;
            var comments = (value.Comments === null)?"...": value.Comments;

    var html = "<tr><td>"+"<a href='#' onclick='View1(" + value.Id + ")' data-target='#viewreport' data-toggle='modal'>"+value.Title+
            "</td><td>"+value.Requester_x0020_Name+
            "</td><td>"+value.Department+
            "</td><td>"+value.Title0+
            "</td><td>"+value.Priority+
            "</td><td>"+value.Description+
            "</td><td>"+comments+
            "</td><td>"+value.Issue_x0020_Status+
            "</td><td>"+assigned+
            "</td><td>"+"<a href='#' class='edit' onclick='Edit("+ value.Id +")' data-target='#editEmployeeModal' data-toggle='modal'><i class='material-icons' data-toggle='tooltip' title='Edit'>&#xE254;</i></a>" +
            "<a href='#' class='delete' onclick='Delete(" + value.Id + ")' ><i class='material-icons' data-toggle='tooltip' title='Delete'>&#xE872;</i></a>"+
            "</td></tr>";

                $('#TABLE_ITEMStr').append(html); 
            });



           $('#TABLE_ITEMS').dataTable();
        },  
        error: function(error) {  
            console.log(JSON.stringify(error));    
        }   
    })  
}

Answer 1

Not sure if you have already tried this...but you can add Dropdown filter to each column in datatable

Replace your below line

   $('#TABLE_ITEMS').dataTable();

with

$('#TABLE_ITEMS').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>' )
                } );
            } );
        }
    } );

Reference - https://www.datatables.net/release-datatables/examples/api/multi_filter_select.html

Hope this helps... Happy coding..!!