0

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 This is my page.

enter image description here 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));    
        }   
    })  
}
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..!!

  • which part can I insert that script? – junreyd Sep 18 '18 at 7:33
  • 1
    when you are initializing datatable.... check edited answer... – Siddharth Vaghasia Sep 18 '18 at 7:39
  • Unexpected end of input } – junreyd Sep 18 '18 at 7:42
  • all the braces are correct in above function...double check you whole code file to make sure that braces are closed correctly... – Siddharth Vaghasia Sep 18 '18 at 8:57
  • all set and nothing errors but on my custom all item list nothing show the select dropdown of data tables,. – junreyd Sep 19 '18 at 1:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.