Implementing Alphabet search

peterstilgoe

Hi

I have got Datatables working using REST reading from a SharePoint list fine, now I am trying to implement the alphabet search referenced here: https://datatables.net/blog/2014-08-26

Whenever I click on a letter it just returns nothing. I thought it might be because of the way I have implemented it & $('#example').DataTable(); was empty, but looking in the dev toolbar it does have all the expected content, so I guess the query is not passing correctly.

The code I am using is below:

----------------------------START------------------------------

<script type="text/javascript">
$(document).ready(LoadDDItems())
function LoadDDItems()

{
        var call = $.ajax({
            url: _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/GetByTitle('Business Glossary')/items?"+
"$select=Title,Abbreviation,Business_x0020_Definition,Advanced_x0020_Definition,Image,Existing_x0020_Description,Group1,Modified,ID&$top=5000",
            type: "GET",
            dataType: "json",
            headers: {
                Accept: "application/json;odata=verbose"
            }
       
        });
        
        
        
        call.done(function (data,textStatus, jqXHR){
        
           var table = $('#example').dataTable({
                "autoWidth": true,
                "bDestroy": true,
                "bProcessing": true,
                 "pageLength": 100,
                 "caseInsensitive": false,
                  "order": [0, "asc"], 
                  "dom": '<fi<t>p>',
                "aaData": data.d.results,
                "aoColumns": [
                    { "mData": "ID" },
                    { "mData": "Title", "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {$(nTd).html("<a href='https://ABC/Lists/Business%20Glossary/DispForm.aspx?ID="+oData.ID+"&Source=https://ABC/teams/IT/BI/BusinessGlossary/'>"+oData.Title+"</a>");}},
                    { "mData": "Abbreviation" },
                    { "mData": "Business_x0020_Definition" },
                    { "mData": "Advanced_x0020_Definition" },
                    { "mData": "Image" },
                    <!-- { "mData": "Image", "render": function (data) {return '<img src="' +data+ '" />';}}, -->
                    { "mData": "Existing_x0020_Description" },
                    { "mData": "Group1" },
                    { "mData": "Modified", "render": function( data, type, row, meta){
                            var ThisDate = moment(new Date(data)).format("Do MMM YYYY");
                            return ThisDate}
                    
                    
                }]
              });
        });
        call.fail(function (jqXHR,textStatus,errorThrown){
            alert("Error retrieving Tasks: " + jqXHR.responseText);
        });
}


var _alphabetSearch = '';
 $.fn.dataTable.ext.search.push( function ( settings, searchData ) {
 
    if ( ! _alphabetSearch ) {
        return true;
    }
  if ( searchData[1].charAt(0) === _alphabetSearch ) {
        return true;
   }
    return false;
} );

$(document).ready(function() {

    var table = $('#example').DataTable();
    
    var alphabet = $('<div class="alphabet"/>').append( 'Search: ' );
    
    $('<span class="clear active"/>')
        .data( 'letter', '' )
        .html( 'None' )
        .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();
    } );
} );


</script>

----------------------------FINISH------------------------------

Any help appreciated.

Cheers

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

peterstilgoe

:0)

allan

Thanks for your question - however, per the forum rules can you link to a test case showing the issue please. This will allow the issue to be debugged.

Information on how to create a test page, if you can't provide a link to your own page can be found here.

Thanks,
Allan

peterstilgoe

Hi

Sorry, thanks for response but I managed to fix it, my code was in the wrong place so $('#example').DataTable(); was empty when trying to search, all sorted now.

Thanks.

Thatimmorsit

Good job mate, congrats to you!