I have a list of items I pull from SharePoint and want to filter them in my custom list view page. So my function works exactly how I want, but it seems messy and I'm hoping someone could point me to or explain a better way of achieving this or an "optimized" version of what I did.
I'm using a for
loop with if
to compare the values and display only when true
. I have multiple filters and this is where it became tricky to me.
In below code example: incarr
array contains the list items. arri
is amount of items in list received from SharePoint list:
function displaytable() {
document.getElementById("myHTMLTable").innerHTML = "";
$("#myHTMLTable").append("<tr align='middle'>" +
"<th align='left'>"+"<b>Systems Affected</b>"+"</th>" +
"<th width= 5% align='left'>"+"<b>Incident Date</b>"+"</th>" +
"<th align='left'>"+"<b>Incident Number</b>"+"</th>" +
"<th align='left'>"+"<b>Root Cause</b>"+"</th>" +
"<th align='left'>"+"<b>Description</b>"+"</th>" +
"<th width= 6% align='left'>"+"<b>Attachments</b>"+"</th>" +
"</tr>");
var filtery = document.getElementById("dropdownyear").value;
var filterm = document.getElementById("dropdownmonth").value.toUpperCase();
var filters = document.getElementById("dropdownsystem").value.toUpperCase();
var filtersev = document.getElementById("dropdownseverity").value.toUpperCase();
for (i=0;i<arri;i++){
//manual if statements until I can figure our a more effective way
if (incarr[i][6] == filtery && incarr[i][5] == filterm && incarr[i][0].toUpperCase() == filters && filtersev == incarr[i][7].toUpperCase()){
$("#myHTMLTable").append("<tr align='middle'>" +
"<td align='left'>"+incarr[i][0]+"</td>" +
"<td align='left'>"+incarr[i][1]+"</td>" +
"<td align='left'>"+incarr[i][2]+"</td>" + //full filter
"<td align='left'>"+incarr[i][3]+"</td>" +
"<td align='left'>"+incarr[i][4]+"</td>" +
"<td align='left'>"+incarr[i][8]+"</td>" +
"</tr>");
} else if (incarr[i][6] == filtery && incarr[i][5] == filterm && filters == "SYSTEM" && filtersev == incarr[i][7].toUpperCase() ) {
$("#myHTMLTable").append("<tr align='middle'>" +
"<td align='left'>"+incarr[i][0]+"</td>" +
"<td align='left'>"+incarr[i][1]+"</td>" +
"<td align='left'>"+incarr[i][2]+"</td>" +
"<td align='left'>"+incarr[i][3]+"</td>" + //system filter all
"<td align='left'>"+incarr[i][4]+"</td>" +
"<td align='left'>"+incarr[i][8]+"</td>" +
"</tr>");
} else if (incarr[i][6] == filtery && filterm == "MONTH" && incarr[i][0].toUpperCase() == filters && filtersev == incarr[i][7].toUpperCase() ){
$("#myHTMLTable").append("<tr align='middle'>" +
"<td align='left'>"+incarr[i][0]+"</td>" +
"<td align='left'>"+incarr[i][1]+"</td>" +
"<td align='left'>"+incarr[i][2]+"</td>" +
"<td align='left'>"+incarr[i][3]+"</td>" + //Month filter all
"<td align='left'>"+incarr[i][4]+"</td>" +
"<td align='left'>"+incarr[i][8]+"</td>" +
"</tr>");
} else if (incarr[i][6] == filtery && filterm == "MONTH" && filters == "SYSTEM" && filtersev == incarr[i][7].toUpperCase() ){
$("#myHTMLTable").append("<tr align='middle'>" +
"<td align='left'>"+incarr[i][0]+"</td>" +
"<td align='left'>"+incarr[i][1]+"</td>" +
"<td align='left'>"+incarr[i][2]+"</td>" +
"<td align='left'>"+incarr[i][3]+"</td>" + //Month & System filter all
"<td align='left'>"+incarr[i][4]+"</td>" +
"<td align='left'>"+incarr[i][8]+"</td>" +
"</tr>");
} else if (filtery == "YEAR" && filterm == "MONTH" && incarr[i][0].toUpperCase() == filters && filtersev == incarr[i][7].toUpperCase() ){
$("#myHTMLTable").append("<tr align='middle'>" +
"<td align='left'>"+incarr[i][0]+"</td>" +
"<td align='left'>"+incarr[i][1]+"</td>" +
"<td align='left'>"+incarr[i][2]+"</td>" +
"<td align='left'>"+incarr[i][3]+"</td>" + //Year & Month filter all
"<td align='left'>"+incarr[i][4]+"</td>" +
"<td align='left'>"+incarr[i][8]+"</td>" +
"</tr>");
} else if (incarr[i][6] == filtery && incarr[i][5] == filterm && filters == "SYSTEM" && filtersev == "SEVERITY" ) {
$("#myHTMLTable").append("<tr align='middle'>" +
"<td align='left'>"+incarr[i][0]+"</td>" +
"<td align='left'>"+incarr[i][1]+"</td>" +
"<td align='left'>"+incarr[i][2]+"</td>" +
"<td align='left'>"+incarr[i][3]+"</td>" + //system, severity filter all
"<td align='left'>"+incarr[i][4]+"</td>" +
"<td align='left'>"+incarr[i][8]+"</td>" +
"</tr>");
} else if (incarr[i][6] == filtery && filterm == "MONTH" && incarr[i][0].toUpperCase() == filters && filtersev == "SEVERITY" ){
$("#myHTMLTable").append("<tr align='middle'>" +
"<td align='left'>"+incarr[i][0]+"</td>" +
"<td align='left'>"+incarr[i][1]+"</td>" +
"<td align='left'>"+incarr[i][2]+"</td>" +
"<td align='left'>"+incarr[i][3]+"</td>" + //Month, severity filter all
"<td align='left'>"+incarr[i][4]+"</td>" +
"<td align='left'>"+incarr[i][8]+"</td>" +
"</tr>");
} else if (incarr[i][6] == filtery && filterm == "MONTH" && filters == "SYSTEM" && filtersev == "SEVERITY" ){
$("#myHTMLTable").append("<tr align='middle'>" +
"<td align='left'>"+incarr[i][0]+"</td>" +
"<td align='left'>"+incarr[i][1]+"</td>" +
"<td align='left'>"+incarr[i][2]+"</td>" +
"<td align='left'>"+incarr[i][3]+"</td>" + //Month & System & Severity filter all
"<td align='left'>"+incarr[i][4]+"</td>" +
"<td align='left'>"+incarr[i][8]+"</td>" +
"</tr>");
} else if (filtery == incarr[i][6] && filterm == incarr[i][5] && incarr[i][0].toUpperCase() == filters && filtersev == "SEVERITY"){
$("#myHTMLTable").append("<tr align='middle'>" +
"<td align='left'>"+incarr[i][0]+"</td>" +
"<td align='left'>"+incarr[i][1]+"</td>" +
"<td align='left'>"+incarr[i][2]+"</td>" + //Severity filter all
"<td align='left'>"+incarr[i][3]+"</td>" +
"<td align='left'>"+incarr[i][4]+"</td>" +
"<td align='left'>"+incarr[i][8]+"</td>" +
"</tr>");
};
}
}
when selecting a filter it must only display items matching that column, and I must be able to select multiple filters to filter the filtered list (if this makes sense?)