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();
};
});
});
}