Search code examples
javascriptjquerysharepoint-2010

Jquery - JS Clear table before new search, whitin function or out?


Currently I'm retrieving data from SharePoint 2010 via SPservices.

function getData() {

    $().SPServices({

        operation: "GetListItems",

        async: true,

        listName: "RapportenLijst",

        completefunc: function (xData, Status) {

            $('#result').text(xData.responseText);

            $(xData.responseXML).SPFilterNode("z:row").each(function () {

               ......CODE HERE ESSENTIALY FILTERING z:row; manipulating them to Table rows.

                    $("#Search").blur(function () {

                        $("#btnFNWrapper").hide();
                        $("#rapportLink").hide();
                        $("#navigationSection").hide();
                        $("#welcomeHead").slideUp(750);

                        if ($("#Search").val() !== "") {
                            $("#searchWrap").show();
                        } else {
                            alert("Nothing to be searched.");
                        }


                        if (rapportCatEx.indexOf($("#Search").val() != "") != -1) {
                            $("#tableSearch").append(linkRow);
                        }



                        var zoekOpdracht = this.value;
                        var zoekCat  = rapportCatEx.toLowerCase();
                        var zoekNaam = name.toLowerCase();


                        if (zoekNaam.indexOf($("#Search").val()) != -1) {
                            $("#tableSearch").empty().prepend(linkRow);
                        }

                    });


}

In here I made a Search functionality which filters the rows according to name and displaying it.

The problem is that at this point I got it to show searched results. But when the user needs another search it doesnt empty the previous search result.

I tried using..empty() but it just iterates, cleans the table, adds a row, cleans the table, adds a row.

Sow when multiple hits should be shown, it only shows one. When only one hit should be show, it shows the one.

How can I make it so that it only cleans the table for one time, and then appends all the found hits?

Is it that I execute the function whitin the function getData()?


Solution

  • You could use jQuery datatable with SPservices library as jQuery datatable has OOB search function.

    Check the sample