3

I am using the DataTables jQuery plug-in to drive custom formatting, filtering, and searching on a SharePoint list. The list is an agenda for a conference, with dates, topics, rooms, session types, etc. I have four images across the top of the page, each of which is assigned multi-column filters. Clicking on the first image will filter on both the session type and date columns (e.g., all presentations on Day 1). Clicking on another image will filter those columns as well, but for different values (e.g., all hands-on learning sessions on both days).

All of the above is working splendidly, but the final piece I would like to introduce is to give the appearance that a specific image has been "selected," by changing the image if clicked on, and changing it back if another image is clicked. I've searched throughout the forum, and have found a lot of potential examples, but I'm not a developer (I'm a relentless code-copier). So I don't have enough understanding of how to make any of them work in my specific example.

Below is the full code, which is linked in the JS Link property of the web part (relevant javascript files are included via script editor - jQuery, dataTables, moment-with-locales).

The images are Day1on, Day1off, Day2on, Day2off, etc. to represent whether they are to be shown as selected or not. When someone first comes to the page, it defaults to the "Day1on" filters being selected. I'm also willing to "repackage" the 8 separate images (2 for each of 4 filters) as 5 images (1 for all "off," plus 1 each for each button "on") and use an image map if that's a more streamlined way to do it.

Would someone please help me understand what code to put where (or what code to change) to allow me to switch between images? Any and all advice is much appreciated!

(function () {

// Inject CSS
    var head = document.head,link;
    link = document.createElement('link');
    link.id = 'dataTablesCss';
    link.type = 'text/css';
    link.rel = 'stylesheet';
    link.href = '/sites/confsite/SiteAssets/datatables.css';
    head.appendChild(link);

//  Initialize the variables for overrides objects
     var overrideCtx = {};
     overrideCtx.Templates = {}
     overrideCtx.Templates.Header = "<table style='width:1100px; margin-top:-15px; border:1px'><tr><td width='12%'></td><td align='center'><span style='center'><ul><li class='btn-noback'><a href='#'><img style='width:200px' src='/sites/confsite/PublishingImages/Pages/Agenda/Day11on.png' alt='Day 1 Presentations'></a></li><li class='btn-noback'><a href='#'><img style='width:200px' src='/sites/confsite/PublishingImages/Pages/Agenda/Day2off.png' alt='Day 2 Presentations'></a></li><li class='btn-noback'><a href='#'><img style='width:200px' src='/sites/confsite/PublishingImages/Pages/Agenda/AllPresoff.png' alt='All Presentations')'></a></li><li class='btn-noback'><a href='#'><img style='width:200px' src='/sites/confsite/PublishingImages/Pages/Agenda/HOLoff.png' alt='Hands-On Learning'></a></li></ul></span></td><td width='5%'></td></tr><tr height='30'><td></td></tr></table><div class='ms-rte-layoutszone-inner'><table id='results' width='100%' cellpadding='0' cellspacing='0' border='0' class='display' ><thead><tr><th>Date</th><th>Time</th><th>Room</th><th>Session Title</th><th>Presenter(s)</th><th>Organization</th><th>Category</th><th>HandsOn?</th></tr></thead>";
     overrideCtx.Templates.Item = dataTemplate;
     overrideCtx.Templates.Footer = "</table></div>";

     overrideCtx.OnPostRender = dataTableOnPostRender;

SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

// This function provides the rendering logic
    function dataTemplate(ctx) {
    var presentationDate = new Date(ctx.CurrentItem.StartTime);
    var formattedDate = moment(presentationDate).format('MM/DD/YYYY');
    var formattedDay = moment(presentationDate).format('dddd');

var ret=""; 
ret += "<tr><td><b>"+ formattedDate +"</b><br/>" + formattedDay + "</td
<td>"+ ctx.CurrentItem.Time +"</td><td>"+ ctx.CurrentItem.Room +"</td>";

ret += "<td>"+ ctx.CurrentItem.Presenter+"</td><td>"+ ctx.CurrentItem.Org+"</td><td>"+ ctx.CurrentItem.Category+"</td><td>"+ ctx.CurrentItem.HandsOn+"</td></tr>";

    return ret;
}

function dataTableOnPostRender() {

    $(document).ready(function () {

      var table = $('#results').DataTable({
       retrieve: true,
       paging: false,
       columnDefs: [
        { width: 80, targets: 0 },
        { width: 80, targets: 1 },
        { width: 50, targets: 6 },
        {visible:false,targets:7}
    ],

    searchCols: [
        {search: '08/29/2018'},
        null,
        null,
        null,
        null,
        null,
        null,
        {search: 'No' }

    ],

    language: {
          search: "",
          searchPlaceholder: "Search for events"}
  }

  );



    $('body').on('click','img',function(){

     if(($(this).attr('alt'))=="Day 1 Presentations"){

        table
            .columns( 0 ).search(  '08/29/2018' )
            .columns( 7 ).search( 'No' )
            .draw();

        };

    if(($(this).attr('alt'))=="Day 2 Presentations"){

        table
            .columns( 0 ).search(  '08/30/2018' )
            .columns( 7 ).search( 'No' )
            .draw();

        };

    if(($(this).attr('alt'))=="All Presentations"){

        table
            .columns( 0 ).search(  '' )
            .columns( 7 ).search( 'No' )
            .draw();

        };

    if(($(this).attr('alt'))=="Hands-On Learning"){

        table
            .columns( 0 ).search( '' )
            .columns( 7 ).search( 'Yes' )
            .draw();

        };

    });

});
}
0

Thanks to a colleague, I found an answer to my question. First, I switched from using images as the column headings, to just using HTML < li > entries. Then I added a "button selected" class on click, removing it on the next click. Here is the full code:

(function () {

// Inject CSS
var head = document.head,link;
link = document.createElement('link');
link.id = 'dataTablesCss';
link.type = 'text/css';
link.rel = 'stylesheet';
link.href = '/sites/confsite/SiteAssets/datatables.css';
head.appendChild(link);

//  Initialize the variables for overrides objects
 var overrideCtx = {};
 overrideCtx.Templates = {}
 overrideCtx.Templates.Header = "<table style='width:1100px; margin-top:-15px; border:1px'><tr><td width='12%'></td><td align='center'><span style='center'><ul><li class='btn'><a class='btn-selected' href='#'>Day 1 Presentations</li></a><li class='btn'><a href='#'>Day 2 Presentations</a></li><li class='btn' style='height:36px'><a href='#'>All Presentations</a></li><li class='btn' style='height:36px'><a href='#'>Hands-On Learning</a></li></ul></span></td><td width='5%'></td></tr><tr height='30'><td></td></tr></table><div class='ms-rte-layoutszone-inner'><table id='results' width='100%' cellpadding='0' cellspacing='0' border='0' class='display' ><thead><tr><th>Date</th><th>Time (CDT)</th><th>Room</th><th>Abstract/Presentation Title</th><th>Presenter(s)</th><th>BU</th><th>Category</th><th>Poster?</th></tr></thead>";
 overrideCtx.Templates.Item = dataTemplate;
 overrideCtx.Templates.Footer = "</table></div>";


 overrideCtx.OnPostRender = dataTableOnPostRender;

SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

// This function provides the rendering logic
function dataTemplate(ctx) {

var presentationDate = new Date(ctx.CurrentItem.StartTime);
var formattedDate = moment(presentationDate).format('MM/DD/YYYY');
var formattedDay = moment(presentationDate).format('dddd');
var presentationLinkDesc = ctx.CurrentItem['LinktoPresentation.desc'];
var presentationLinkUrl = ctx.CurrentItem['LinktoPresentation.url']
var ret=""; 
ret += "<tr><td><b>"+ formattedDate +"</b><br/>" + formattedDay + "</td><td>"+ ctx.CurrentItem.Time +"</td><td>"+ ctx.CurrentItem.Room +"</td>";


ret += "<td>" + ctx.CurrentItem['Title'] + "</td>";

ret += "<td>"+ ctx.CurrentItem.Presenter+"</td><td>"+ ctx.CurrentItem.BU+"</td><td>"+ ctx.CurrentItem.Category+"</td><td>"+ ctx.CurrentItem.Poster+"</td></tr>";

return ret;
}

function dataTableOnPostRender() {

$(document).ready(function () {

  var table = $('#results').DataTable({


      retrieve: true,
      paging: false,
      columnDefs: [
        { width: 80, targets: 0 },
        { width: 80, targets: 1 },
        { width: 50, targets: 6 },
        {visible:false,targets:7}
    ],

    searchCols: [
        {search: '08/29/2018'},
        null,
        null,
        null,
        null,
        null,
        null,
        {search: 'No' }

    ],

    language: {
          search: "",
          searchPlaceholder: " Search for events"}
  }

  );


    $('ul').on( 'click', 'a', function () {

    $('a').removeClass('btn-selected');

     if(($(this).text())=="Day 1 Presentations"){

       $(this).addClass('btn-selected');


        table
            .columns( 0 ).search(  '08/29/2018' )
            .columns( 7 ).search( 'No' )
            .draw();

        };

    if(($(this).text())=="Day 2 Presentations"){

       $(this).addClass('btn-selected');

        table
            .columns( 0 ).search(  '08/30/2018' )
            .columns( 7 ).search( 'No' )
            .draw();

        };

    if(($(this).text())=="All Presentations"){

       $(this).addClass('btn-selected');
        table
            .columns( 0 ).search(  '' )
            .columns( 7 ).search( 'No' )
            .draw();

        };

    if(($(this).text())=="Hands-On Learning"){

       $(this).addClass('btn-selected');
        table
            .columns( 0 ).search( '' )
            .columns( 7 ).search( 'Yes' )
            .draw();

        };

    });

});
}
| improve this answer | |

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.