Trying to filter individual columns on a DT using a Sharepoint REST call

peterstilgoe

HI

I am trying to add individual column filtering to my DT, the normal search box top right works but my individual column filters do not do anything when a enter a search query in to them. As its coming from SharePoint online I cannot post on the debugger so my code is posted below:

<!-- jQuery -->
<script type="text/javascript" charset="utf8" 
src="https://abc-corp.sharepoint.com/teams/IT/BI/BusinessGlossary/Scripts/jquery-2.2.0.min.js"></script>
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css"
href="https://abc-corp.sharepoint.com/teams/IT/BI/BusinessGlossary/Scripts/jquery.dataTables.css">
<link rel="stylesheet" type="text/css"
href="https://abc-corp.sharepoint.com/teams/IT/BI/BusinessGlossary/Scripts/dataTables.bootstrap.min.css ">
<link rel="stylesheet" type="text/css"
href="https://abc-corp.sharepoint.com/teams/IT/BI/BusinessGlossary/Scripts/bootstrap.min.css ">
<!-- DataTables -->
<script type="text/javascript" charset="utf8"
src="https://abc-corp.sharepoint.com/teams/IT/BI/BusinessGlossary/Scripts/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf8"
src="https://abc-corp.sharepoint.com/teams/IT/BI/BusinessGlossary/Scripts/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" charset="utf8"
src="https://abc-corp.sharepoint.com/teams/IT/BI/BusinessGlossary/Scripts/moment.min.js"></script>
<script type="text/javascript" charset="utf8"
src="https://abc-corp.sharepoint.com/teams/IT/BI/BusinessGlossary/Scripts/datetime-moment.js"></script>



<table width="100%" cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead><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></thead>
<thead class="filters"><tr><th>Title</th><th>New Description</th></tr></thead>
</table>



<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,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,
                 "searching": true,
                 "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-corp.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                 
                }}]
              });
              
              
              

  $(document).ready(function() {


    // DataTable
    // Setup - add a text input to each header cell
    $('#example .filters th').each( function () {
        var title = $('#example thead th').eq( $(this).index() ).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
    } );
  
  
  
    // Apply the search
//  var table = $('#example').DataTable();
table.columns().eq( 0 ).each( function ( colIdx ) {
        $( 'input', $('.filters th')[colIdx] ).on( 'keyup change', function () {
            table
                .column( colIdx )
                .search( this.value )
                .draw();
        } );
    } );


 } );



} );

}

</script>

The above code, the top right standard search box works but the individual column searches do nothing.

If I un comment out:

// var table = $('#example').DataTable();

All 3 search boxes return an empty result set.

Any pointers appreciated.

Cheers

peterstilgoe

Anyone any ideas ?

TIA