Alphabet Search Reset Sorting along with Dropdowns

Alphabet Search Reset Sorting along with Dropdowns

redroosterdesignredroosterdesign Posts: 2Questions: 1Answers: 0
edited March 2021 in Free community support

Description of problem: I have a functioning alphabet sort, but I also have dropdown selections. I have a reset button that clears the search box and the drop downs, but I cannot figure out have to also make that same reset button reset the alphabet sort. I realize that the "All" button does this, but I need the other reset button to this as well because it isn't obvious when the user clicks reset that it has in fact reset when only one letter is still showing.

<script>var _alphabetSearch = '';
$.fn.dataTable.ext.search.push( function ( settings, searchData ) {
    if ( ! _alphabetSearch ) {
        return true;
    }
    if ( searchData[1].charAt(0) === _alphabetSearch ) {
        return true;
    }
    return false;
} );
/* Formatting function for row details - modify as you need */
function format ( d ) {
    // `d` is the original data object for the row
    return '<div class="extra">'+
        '<div class="row">'+
            '<div class="col-md-9">'+d.description+'</div>'+
            '<div class="col-md-3">'+'<a href="'+d.programurl+'" class="btn btn-default">'+'Visit Program Page'+'</a>'+'</div>'+
        '</tr>'+
    '</div>';
}
$(document).ready(function() {
    var table = $('#program-list').DataTable(
    {
        "ajax": "programs.txt",
        "columns": [
            {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": '',
                "render": function () {
                         return '<span class="fa fa-angle-down" aria-hidden="true"></span>';
                     },
            },
            { "data": "program" },
            { "data": "school" },
            { "data": "type" },
            { "data": "location" }
        ],
        "pageLength": 25,
        "order": [[1, 'asc']],
        "deferRender": true,
                initComplete: function () {
                this.api().column(2).every( function () {
                          var column = this;
                          var select = $('<select class="filter form-control mb-lg" id="school-filter"><option value="">School</option></select>')
                            .appendTo($("#college-filter"))
                            .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>')
                          });
                      });
                    
                    this.api().column(3).every( function () {
                          var column = this;
                          var select = $('<select class="filter form-control mb-lg" id="degree-type-filter"><option value="">Degree Type</option></select>')
                            .appendTo($("#degree-filter"))
                            .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>')
                          });
                      });
                    
                    this.api().column(4).every( function () {
                          var column = this;
                          var select = $('<select class="filter form-control mb-lg" id="location-type-filter"><option value="">Location</option></select>')
                            .appendTo($("#location-filter"))
                            .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>')
                          });
                      })
            }
    }
    );
 
 
    var alphabet = $('<div class="alphabet"/>').append( '' );
    $('<span class="clear active"/>')
        .data( 'letter', '' )
        .html( 'All' )
        .appendTo( alphabet );
    for ( var i=0 ; i<26 ; i++ ) {
        var letter = String.fromCharCode( 65 + i );
        $('<span/>')
            .data( 'letter', letter )
            .html( letter )
            .appendTo( alphabet );
    }
    alphabet.insertBefore( table.table().container() );
    alphabet.on( 'click', 'span', function () {
        alphabet.find( '.active' ).removeClass( 'active' );
        $(this).addClass( 'active' );
        _alphabetSearch = $(this).data('letter');
        table.draw();
    } );
    
    
    // Add event listener for opening and closing details
    $('#program-list tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var tdi = tr.find(".fa");
        var row = table.row( tr );
 
        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
            tdi.first().removeClass('fa-angle-up');
            tdi.first().addClass('fa-angle-down');
        }
        else {
            // Open this row
            row.child( format(row.data()) ).show();
            tr.addClass('shown');
            tdi.first().removeClass('fa-angle-down');
            tdi.first().addClass('fa-angle-up');
        }
    });
    
    $('[data-toggle="tooltip"]').tooltip();
            if($('#school-filter').length == 0) {
                $('#college-filter').append('<label for="school-filter" class="sr-only">School</label>');
            }
            $('[data-toggle="tooltip"]').tooltip();
            if($('#degree-type-filter').length == 0) {
                $('#degree-filter').append('<label for="degree-type-filter" class="sr-only">Degree Type</label>');
            }
     $('[data-toggle="tooltip"]').tooltip();
            if($('#location-type-filter').length == 0) {
                $('#location-filter').append('<label for="location-type-filter" class="sr-only">Location</label>');
            }
    
    $('#reset-filters').click(function (e) {
    e.preventDefault();
    var table = $('#program-list').DataTable();
    console.log("reset table");
    $('.filter').val("");
    $('.filter').trigger('change'); 
    table
        .search('')
        .columns().search('')
        .draw();
});
    
});
      </script>
<div class="program-list">
<div class="filters-container">
     <div class="container">
         <div class="row">
                    <div class="col-md-4 col-xl-4">
                        <div id="college-filter"></div>
                    </div>
                    <div class="col-md-4 col-xl-4">
                        <div id="degree-filter"></div>
                    </div>
                     <div class="col-md-4 col-xl-2">
                        <div id="location-filter"></div>
                    </div>
                    <div class="col-md-12 col-xl-2">
                        <button id="reset-filters">Reset <span class="fas fa-redo-alt"></span></button>
                    </div>
                </div>
         </div>
</div>
     
    <div class="container p-0"> 
        <div class="row no-gutters">
            <div class="col">
                <div class="table-responsive">
                       <table id="program-list" class="table">
                           <thead>
                              <tr>
                                <th scope="col"><span class="sr-only">Arrow Icons to Expand Sections</span></th>
                                <th scope="col" id="program">Program</th>
                                <th scope="col" id="school">School</th>
                                <th scope="col" id="type">Degree Type</th>
                                <th scope="col" id="location">Location</th>
                             </tr>
                           </thead>
                       </table>
                    </div>
                </div>
           </div>
        </div>
  </div>

Edited by Kevin: Update the markdown backticks to fix formatting.

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 14,649Questions: 25Answers: 3,478
    Answer ✓

    This code:

        $('<span class="clear active"/>')
            .data( 'letter', '' )
            .html( 'All' )
    

    Is setting your All button's 'letter' data attribute to an empty string.

    The click event:

        alphabet.on( 'click', 'span', function () {
            alphabet.find( '.active' ).removeClass( 'active' );
            $(this).addClass( 'active' );
            _alphabetSearch = $(this).data('letter');
            table.draw();
        } );
    

    Is getting the 'letter' data attribute, assigning it to the global variable _alphabetSearch and calling draw() which runs the search plugin used for the alphabet search. Basically you will need to clear the active class and set _alphabetSearch to an empty string, for example add these line to your #reset-filters click event:

            alphabet.find( '.active' ).removeClass( 'active' );
            _alphabetSearch = '';
    

    Kevin

  • redroosterdesignredroosterdesign Posts: 2Questions: 1Answers: 0

    Thank you so much! That worked like a charm.

Sign In or Register to comment.