Как добавить фильтры в jQuery.fancyTable (или альтернатива)

В настоящее время я использую fancyTable для отображения таблицы результатов django. Я смог добавить строку поиска и сортируемые столбцы (по возрастанию/по убыванию). Я также добавил "фильтры", но все, что они делают, это обновляют строку поиска с заранее заданным текстом

enter image description here

enter image description here

Проблема в том, что я хочу иметь возможность использовать эти фильтры, чтобы показывать только точно совпадающий текст. Например, если я пытаюсь фильтровать по Stage, ища Prescreen, я получу строки, включающие Prescreen, Passed - Prescreen 1 и Passed - Prescreen 2

Я уже пытался написать функцию, которая устанавливает tr = display="none", но пагинация не обновляется, и я остаюсь с несколькими пустыми страницами. t В настоящее время fancyTable инициируется следующим образом:

<script type="text/javascript">
                $(document).ready(function () {
                    $(".sampleTable").fancyTable({
                        /* Column number for initial sorting*/
                        sortColumn: 0,
                        sortOrder: 'descending', // Valid values are 'desc', 'descending', 'asc', 'ascending', -1 (descending) and 1 (ascending)

                        /* Setting pagination or enabling */


                        pagination: true,
                        /* Rows per page kept for display */
                        perPage: 12,
                        globalSearch: true
                    });

                });
            </script>

Есть идеи, как я могу создать эти фильтры? Я не вижу ничего из fancyTable о фильтрах.

Ок, итак, сначала я должен был вызвать FancyTable, чтобы забабахать функцию isSearchMatch в fancyTable.js :

<div id="checkboxes" class="dropdown-content-filters" style="">
  {% for stage in companyStages %}
        <label for="one" >
        <input id="{{ stage }}" onchange="updateSearchBar_multiselect()" class="multiSelectCheckbox" type="checkbox" id="one" value="{{ stage }}"/>{{ stage }}
        </label>
  {% endfor %}
</div>

Затем, updateSearchBar_multiselect() получает, какие флажки установлены, и добавляет их в строку, разделенную запятыми, и добавляет эту строку в поле поиска. search_bar.dispatchEvent(new Event('change')); триггеры fancyTable isSearchMatch

function updateSearchBar_multiselect(){
    checkElements = document.getElementsByClassName("multiSelectCheckbox")
    toSearch = ""
    for(var i = 0; i < checkElements.length; i++){
        if (checkElements[i].checked) {
            //console.log("checkElements[i]",checkElements[i])
            type = checkElements[i].id
            toSearch = toSearch.concat(type, ',')
        }
    }
    var search_bar = document.getElementById("searchID");
    search_bar.value = toSearch;
    search_bar.dispatchEvent(new Event('change'));
}

в пределах isSearchMatch:

isFilter = false
if (search.includes(",")) {
    searchArray = search.split(",");
    isFilter = true
}
console.log("searchArray",searchArray)
if (isFilter) {
    console.log("filtering")
    if (data.includes(">PRESCREEN<") && searchArray.includes("PRESCREEN")) {
        index = searchArray.indexOf('PRESCREEN')
        return getReturn(searchArray[index],data)
    }
    else if (data.includes(">SCREENING<") && searchArray.includes("SCREENING")) {
        index = searchArray.indexOf('SCREENING')
        return getReturn(searchArray[index], data)
    }
    else if (data.includes(">MONITOR<") && searchArray.includes("MONITOR")) {
        index = searchArray.indexOf('MONITOR')
        return getReturn(searchArray[index], data)
    }
    else if (data.includes(">PORTFOLIO<") && searchArray.includes("PORTFOLIO")) {
        index = searchArray.indexOf('PORTFOLIO')
        return getReturn(searchArray[index], data)
    }
    else if (data.includes(">NOSTAGE<") && searchArray.includes("NOSTAGE")) {
        index = searchArray.indexOf('NOSTAGE')
        return getReturn(searchArray[index], data)
    }
    else if (data.includes(">DUE DILIGENCE<") && searchArray.includes("DUE DILIGENCE")) {
        index = searchArray.indexOf('DUE DILIGENCE')
        return getReturn(searchArray[index], data)
    }
    else if (data.includes(">PASSED - DUE DILIGENCE<") && searchArray.includes("PASSED - DUE DILIGENCE")) {
        index = searchArray.indexOf('PASSED - DUE DILIGENCE')
        return getReturn(searchArray[index], data)
    }
    else if (data.includes(">HOLD<") && searchArray.includes("HOLD")) {
        index = searchArray.indexOf('HOLD')
        return getReturn(searchArray[index], data)
    }
    else if (data.includes(">DUE DILIGENCE 2<") && searchArray.includes("DUE DILIGENCE 2")) {
        index = searchArray.indexOf('DUE DILIGENCE 2')
        return getReturn(searchArray[index], data)
    }
    else if (data.includes(">FEEDER PORTFOLIO<") && searchArray.includes("FEEDER PORTFOLIO")) {
        index = searchArray.indexOf('FEEDER PORTFOLIO')
        return getReturn(searchArray[index], data)
    }
    else if (data.includes(">NOT CURRENTLY RAISING<") && searchArray.includes("NOT CURRENTLY RAISING")) {
        index = searchArray.indexOf('NOT CURRENTLY RAISING')
        return getReturn(searchArray[index], data)
    }
    else if (data.includes(">SAVE FOR FUND 2<") && searchArray.includes("SAVE FOR FUND 2")) {
        index = searchArray.indexOf('SAVE FOR FUND 2')
        return getReturn(searchArray[index], data)
    }

    else {
        return(false)
    }
}
return (settings.exactMatch === true) ? (data==search) : (new RegExp(search).test(data));
}
catch {
return (settings.exactMatch === true) ? (data==search) : (new RegExp(search).test(data));
}

и getReturn():

function getReturn(substr,data) {
    splitData = data.split(">")[1]
    splitData2 = splitData.split("<")[0]
    if (splitData2 == substr) {
        return (true);
    }
    if (splitData2.toLowerCase().includes(substr.toLowerCase())) {
        return (false);
    }
}
Вернуться на верх