Блог

У меня есть пользовательский список часто задаваемых вопросов SharePoint с «Разбиением на страницы» и поиском.

До внедрения разбиения на страницы я получал результаты поиска по всем «ключевым словам».

Теперь я получаю результат поиска только для текущей отображаемой страницы.

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/js/bootstrap.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
    $("#search-filter").on("keyup", function() {
        var unicode = event.charCode ? event.charCode : event.keyCode;
        if(unicode == 27) {
            $(this).val("");
        }
        var searchKey = $(this).val().toLowerCase();
        $('.accord-toggle').each(function() {
            var cellText = $(this).text().toLowerCase();
            //var accordion = $('#accordion panel');
            var listingTable = $('#listingTable panel');
            if(cellText.indexOf(searchKey) >= 0) {
                $(this).parent().parent().show();
            } else {
                $(this).parent().parent().hide();
                $('.panel-collapse.in').collapse('hide');
            }
        });
    });
});
</script>
<br/>
<div class="row-fluid text-left" style="
                                        position: relative;
                                        left: 32px;"> <span class="clearable">
    <input type="text" id="search-filter" placeholder="Search for Keywords" />
    <!--<span class="icon_clear">x</span>--> </span>
</div>
<br/>
<script type="text/javascript">
$(document).ready(function() {
    GetItems();
    $(".collapse").on('show.bs.collapse', function() {
        //alert("ss");
        $(this).siblings(".card-header").find(".fa").removeClass("fa-plus").addClass("fa-minus");
    }).on('hide.bs.collapse', function() {
        alert("aa");
        $(this).siblings(".card-header").find(".fa").removeClass("fa-minus").addClass("fa-plus");
    });
});
var current_page = 1;
var records_per_page = 3;

function GetItems() {
    var siteURL = _spPageContextInfo.webServerRelativeUrl;
    $.ajax({
        async: false, // !!!MAKE SURE THIS ONE IS SET!!!
        url: siteURL   "/_api/web/lists/GetByTitle('EPTFAQ')/items", //change the list name
        type: "GET",
        dataType: "json",
        headers: {
            Accept: "application/json;odata=verbose"
        },
        success: function(data) {
            if(data.d.results.length > 0) {
                results = data.d.results; // !!!STORE!!!
                $('#accordion').append(GenerateAccordionFromJson(data.d.results));
                console.log(data.d.results);
            } else {
                $('#accordion').append("<span>No Records Found.</span>");
            }
        },
        error: function(error) {
            alert(JSON.stringify(error));
        }
    });
}
//alert(results);
function prevPage() {
    if(current_page > 1) {
        current_page--;
        changePage(current_page);
    }
}

function nextPage() {
    if(current_page < numPages()) {
        current_page  ;
        changePage(current_page);
    }
}

function changePage(page) {
    var btn_next = document.getElementById("btn_next");
    var btn_prev = document.getElementById("btn_prev");
    var listing_table = document.getElementById("listingTable");
    var page_span = document.getElementById("page");
    // Validate page
    if(page < 1) page = 1;
    if(page > numPages()) page = numPages();
    listing_table.innerHTML = "";
    for(var i = (page - 1) * records_per_page; i < (page * records_per_page) amp;amp; i < results.length; i  ) {
        var varHref = "#collapse"   i
        var varBodyId = "collapse"   i
            // listing_table.innerHTML  = results[i].Title   "<br>";
        listing_table.innerHTML  = '<div class="panel-group" id="accord">'   '<div class="panel panel-default">'   '<div class="panel-heading">'   '<h4 class="panel-title">'   '<a class="accord-toggle" data-toggle="collapse"  href='   varHref   '>'   '<span class="glyphicon glyphicon-bed" style="font-family: arial;">'   results[i].Title   '</span>'   '</a>'   '</h4>'   '</div>'   '<div id='   varBodyId   ' class="panel-collapse collapse" data-parent="#accordion">'   ' <div class="panel-body">'   '<div class="list-group">'   ' <div type="button" class="list-group-item">'   results[i].Answer   '</div>'   '</div>'   '</div>'   '</div>'   '</div>'   ' </div>';
    }
    page_span.innerHTML = page   "/"   numPages();
    if(page == 1) {
        btn_prev.style.visibility = "hidden";
    } else {
        btn_prev.style.visibility = "visible";
    }
    if(page == numPages()) {
        btn_next.style.visibility = "hidden";
    } else {
        btn_next.style.visibility = "visible";
    }
}

function numPages() {
    return Math.ceil(results.length / records_per_page);
}
window.onload = function() {
    changePage(1);
};

function GenerateAccordionFromJson(objArray) {
    var accordionContent = "";
    for(var i = 0; i < objArray.length; i  ) {
        //var varHref= "#collapse" i
        //var varBodyId = "collapse" i
        //accordionContent =accordionContent  '<div class="panel-group" id="accord">'  
        //'<div class="panel panel-default">'   
        // '<div class="panel-heading">'     
        // '<h4 class="panel-title">'    
        //'<a class="accord-toggle" data-toggle="collapse"  href=' varHref '>'   
        // '<span class="glyphicon glyphicon-bed" style="font-family: arial;">' objArray[i].Title '</span>'     
        // '</a>'  
        //// '</h4>'  '</div>'  
        // '<div id=' varBodyId ' class="panel-collapse collapse" data-parent="#accordion">'  
        //' <div class="panel-body">'  
        // '<div class="list-group">'  
        //' <div type="button" class="list-group-item">' objArray[i].Answer '</div>'  
        //'</div>'  
        //'</div>'  
        //// '</div>'  
        // '</div>'  
        //' </div>';
    }
    return accordionContent;
}
</script>
</head>

<body>
    <div class="container">
        <div id="accordion"> </div>
        <div id="listingTable"></div> <a href="javascript:prevPage()" id="btn_prev">Prev</a> <a href="javascript:nextPage()" id="btn_next">Next</a> page: <span id="page"></span> </div>
</body>
 

Например, если я ищу ключевые слова, такие как «окружающая среда», «пользователи» и т. Д., Я получаю результаты поиска только с «Текущей» страницы (1-я страница на скриншоте). Но, если я ищу ключевые слова, которые находятся на 2-й и последующей странице, я ничего не получаю.

Обновить:

Или, скорее, как удалить эти строки, когда я ищу ключевое слово: