Individual column searching (select inputs) - How to clear inputs

peterstilgoe · November 2016

Hi

I am using the Individual column searching (select inputs), what code do I use to clear the input values in the drop downs ?

I clear the search box using: $("#example").DataTable().search("").draw();

But having trouble working out how to clear the dropdown filters in a similar manner ?

Cheers

allan · November 2016

DataTables doesn't control the input elements used for column searching, so it can't know what it should clear. You would need to clear your input elements yourself using jQuery or DOM methods.

Allan

peterstilgoe · November 2016

Hi,

I am specifying my dropdown using:

var select = $('<select id="mySelect"><option value=""></option></select>')

And clearing it using:

$("#mySelect").val([]);

Its clearing the drop down making it blank but the datatable is still filtered by whatever was selected previously.

What command do I need to use to clear the DT of the actual filtering so it displays all the data that exists in the table ?

Cheers

allan · November 2016

Try:

$("#mySelect").val([]).change();

which will trigger your change change handler (presumably that is what you are listening for to filter the DataTable).

Allan

peterstilgoe · November 2016

Hi

Basically Im using the A - Z alphabet search as in the the blog posts, when I click on a A - Z letter this is when I want to clear the filter column:

alphabet.on( 'click', 'span', function () {
        alphabet.find( '.active' ).removeClass( 'active' );
        $(this).addClass( 'active' );
        $("#example").DataTable().search("").draw();
        $("#mySelect").val([]).change();
        _alphabetSearch = $(this).data('letter');       
        table.draw();
    } );

Adding .change() creates "Cannot read property 'replace' of null"

allan · November 2016

Happy to take a look if you link to a page showing the issue.

Allan

peterstilgoe · December 2016

Hi.

Unfortunately using O365 so it wont work for you, the code is below but probably doesn't help you:

<!-- jQuery -->
<script type="text/javascript" charset="utf8" 
src="https://ABC.sharepoint.com/teams/IT/BI/BusinessGlossary/Scripts/jquery-2.2.0.min.js"></script>

<!-- DataTables -->
<script type="text/javascript" charset="utf8"
src="https://ABC.sharepoint.com/teams/IT/BI/BusinessGlossary/Scripts/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf8"
src="https://ABC.sharepoint.com/teams/IT/BI/BusinessGlossary/Scripts/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" charset="utf8"
src="https://ABC.sharepoint.com/teams/IT/BI/BusinessGlossary/Scripts/moment.min.js"></script>
<script type="text/javascript" charset="utf8"
src="https://ABC.sharepoint.com/teams/IT/BI/BusinessGlossary/Scripts/datetime-moment.js"></script>

<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css"
href="https://ABC.sharepoint.com/teams/IT/BI/BusinessGlossary/Scripts/jquery.dataTables.css">
<link rel="stylesheet" type="text/css"
href="https://ABC.sharepoint.com/teams/IT/BI/BusinessGlossary/Scripts/dataTables.bootstrap.min.css ">
<link rel="stylesheet" type="text/css"
href="https://ABC.sharepoint.com/teams/IT/BI/BusinessGlossary/Scripts/bootstrap.min.css ">



<table id="example" class="display" cellspacing="0" width="100%">


<thead>

<th></th><th></th><th></th><th></th><th></th><th>System/Report</th><th></th>

            <tr>
                <th>Existing Description</th>
                <th>New Description</th>
                <th>Abbreviation</th>
                <th>Business Definition</th>
                <th>Group</th>
                <th>System/Report</th>
                <th>Last Updated</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Existing Description</th>
                <th>New Description</th>
                <th>Abbreviation</th>
                <th>Business Definition</th>
                <th>Group</th>
                <th>System/Report</th>
                <th>Last Updated</th>
            </tr>
        </tfoot>


<script type="text/javascript">


$(document).ready(LoadDDItems())



function LoadDDItems()

{
        var call = $.ajax({
            url: _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/GetByTitle('Business Glossary - Dev')/items?"+
"$select=Title,Abbreviation,Business_x0020_Definition,Advanced_x0020_Definition,RoutingRuleDescription,Object_x0020_Sub_x002d_Type,System_x002f_Report,Modified,ID&$top=5000&$filter=Current_x0020_Status eq 'Active'",
            type: "GET",
            dataType: "json",
            headers: {
                Accept: "application/json;odata=verbose"
            }
       
        });
        
        
        
        call.done(function (data,textStatus, jqXHR){
        
            $('#example').dataTable({
                "autoWidth": true,
                "bDestroy": true,
                "bProcessing": true,
                 "pageLength": 50,
                 <!-- "scrollY": '60vh', -->
                 "caseInsensitive": false,
                 "oLanguage": {"sSearch": "Search by text:"},
                  "order": [0, "asc"], 
                  "dom":' <"search"f><"top"i>rt<"bottom"ip><"clear">',
                "aaData": data.d.results,
                "aoColumns": [
                    { "mData": "Title", "width": "12%", "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {$(nTd).html("<a href='https://ABC.sharepoint.com/teams/IT/BI/BusinessGlossary/Lists/Business%20Glossary%20New/DispFormCustom.aspx?ID="+oData.ID+"'>"+oData.Title+"</a>");}},
                    { "mData": "RoutingRuleDescription", "width": "12%" },
                    { "mData": "Abbreviation", "width": "8%" },
                    { "stype": "html", "mData": "Business_x0020_Definition", "width": "60%" },
                    { "mData": "Object_x0020_Sub_x002d_Type", "width": "8%" },
                    { "mData": "System_x002f_Report", "width": "8%" },
                    { "stype": "date", "mData": "Modified", "width": "20px", "render": function( data, type, row, meta){
                            var ThisDate = moment(new Date(data)).format("Do MMM YYYY");
                            return ThisDate                 
                }}]
              });
              
              
              var _alphabetSearch = '';

$.fn.dataTable.ext.search.push( function ( settings, searchData ) {
    if ( ! _alphabetSearch ) {
        return true;
    }

     if ( searchData[0].charAt(0) === _alphabetSearch ) {
        return true;
    }
    return false;
} );

 
function bin ( data ) {

    var letter, bins = {};
    for ( var i=0, ien=data.length ; i<ien ; i++ ) {
        letter = data[i].charAt(0).toUpperCase();
        if ( bins[letter] ) {
            bins[letter]++;
        }
        else {
            bins[letter] = 1;
        }
    }
    return bins;
}
 

$(document).ready(function() {
    var table = $('#example').DataTable();
    var alphabet = $('<div class="alphabet"/>').append( 'Search by letter:', ' &nbsp; ' );
    var columnData = table.column(0).data();
    var bins = bin( columnData );
    

    $('<span class="clear active"/>')
        .data( 'letter', '' )
        .data( 'match-count', bins[letter] || table.data().count()  )
        .html( 'None' )
        .appendTo( alphabet );

        

    for ( var i=0 ; i<26 ; i++ ) {
        var letter = String.fromCharCode( 65 + i );

        $('<span/>')
            .data( 'letter', letter )
            .data( 'match-count', bins[letter] || 0 )
            .addClass( ! bins[letter] ? 'empty' : '' )
            .html( letter )
            .appendTo( alphabet );
}

    alphabet.insertBefore( table.table().container() );
    
    
    alphabet.on( 'click', 'span', function () {
        alphabet.find( '.active' ).removeClass( 'active' );
        $(this).addClass( 'active' );
        $("#example").DataTable().search("").draw();
        $("#mySelect").val([]).change();
        _alphabetSearch = $(this).data('letter');       
        table.draw();
    } );
 
 var info = $('<div class="alphabetInfo"></div>')
       .appendTo( alphabet );

 

    alphabet
        .on( 'mouseenter', 'span', function () {
            info
                .css( {                 
                    opacity: 1,
                    left: $(this).position().left,
                    width: $(this).width()
                } )
                .html( $(this).data('match-count') )
        } )
        .on( 'mouseleave', 'span', function () {
            info.css('opacity', 0);
        } );
} );



var table = $('#example').DataTable();
 
 table.columns([5]).every( function () {
                var column = this;
                var select = $('<select id="mySelect"><option value="">ALL</option></select>')
                    .appendTo( $(column.header()).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>' )
                } );
            } );

} );

}

</script>

peterstilgoe · December 2016

It works in the Dev Tool Bar eg.

$("#mySelect").val('BRRS'); - Updates in the browser as expected & updates the DT with the new filter value & result set

allan · December 2016

Are you able to use JSFiddle, JSBin or https://live.datatables.net to show an example with the issue?

Allan

peterstilgoe · December 2016

Hi Allan,

See the issue here: http://live.datatables.net/besikoki/1/edit?js,output

Cheers

allan · December 2016

I'm getting an error on that page:

jquery.dataTables.js:1631 Uncaught TypeError: Cannot read property 'replace' of null

I don't think we've discussed that problem above. Is that an issue only in this test case or is it a problem you are seeing on your page as well?

Allan

peterstilgoe · December 2016

Yes its the same error on my sharepoint page and in the test case.

Basically Im using the A - Z alphabet search as in the the blog posts, when I click on a A - Z letter this is when I want to clear the filter column.

When I add $("#mySelect").val([]).change(); in the AZ click event it clears the drop down but not the actual filter. In dev toolbar displays

Uncaught TypeError: Cannot read property 'replace' of null

Cheers

peterstilgoe · December 2016

If I just use:

$("#mySelect").val([]);

A-Z & filtering works together but it does not clear the actual filter:

http://live.datatables.net/besikoki/2/edit?js,output

peterstilgoe · December 2016

Any ideas why the filter doesn't clear in this instance ?

$("#mySelect"String).val([]).change();

Thanks

allan · December 2016

It works with:

$("#mySelect").val('').change();

http://live.datatables.net/besikoki/3/edit

Allan

peterstilgoe · December 2016

Thank you

Individual column searching (select inputs) - How to clear inputs

Individual column searching (select inputs) - How to clear inputs

Answers

Howdy, Stranger!

Categories

DataTables

Individual column searching (select inputs) - How to clear inputs

Individual column searching (select inputs) - How to clear inputs

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables