Ad

Best Way To Generate Table With Search Results

- 1 answer

I have a page that shows data about video statistics. All data comes from Mongodb and then the page gets it from the model and then it's inserted to the page with Razor. I display top 10 for the default view.

Then I'm performing a search with javascript, so the user can enter two parameters to search videos.

My main question is, what's the best way to generate same looking table that is displayed when the page loads with default results. I have tried to do it with document.appendChild, but it seems it's not working.

Any more ideas how to solve this problem?

Table example (actually contains 10 td's with different values):

@for(int i = 0; i < 10; i++)
{
  <div class="main-table">
   <table id="@Model.Videos[i].VideoId" class="table" style="margin: 0 auto;">
     <tr>
       <td>Name</td>
       <td>@Model.Videos[i].Name</td>
     </tr>
  </div>
}

Getting inputs:

<h4 style="margin-bottom: 10px;">Search</h4>
<label>Variant "A" year: </label><br />
<input class="content" id="variantA" style="margin-bottom: 15px; border-radius: 5px" maxlength="4" /><br />
<label>Variant"B" year: </label><br />
<input class="content" id="variantE" style="margin-bottom: 10px; border-radius: 5px" maxlength="4" /><br />
<button class="btn btn-primary search" style="margin-bottom: 35px" onclick="searchy()">Search</button>

Js to search:

    function searchy(variantA, variantE) {
        $(".main-table").hide();
        variantA = document.getElementById("variantA").value;
        variantE = document.getElementById("variantE").value;


        videos.forEach(function (video) {
            if (variantA == video.variantA.year && variantE == video.variantE.year) {
            var myTable = "<table class='table'><tr><td style='color: red;'>" + video.result   +   "</td></tr></table>";
            document.getElementsByClassName("result-table").inneHTML = myTable;
            } else {

            }
        });
        }

To get videos:

        var videos = [];
        $.ajax({
            type: "GET",
            url: "@Model.ServiceApi/api/years",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
            videos = data;
            }
        });

I have an empty div with class="result-table" also in the HTML.

The search is performed with user input, then its values are fetched and compared with the video objects from the db. All video objects are loaded in the background and inserted to the array.

Ad

Answer

  1. typo in innerHTML;
  2. getElementsByClassName returns a collection which does not have innerHTML
  3. use type="button"
  4. you have jQuery, why not use it?

$(function() { 
  $(".search").on("click",function(e) { 
    e.preventDefault(); 
    $(".main-table").empty().hide();
    var variantA = ("#variantA").val();
    var variantE = $("#variantE").val();
    $.each(videos,function (video) {
      if (variantA == video.variantA.year && variantE == video.variantE.year) {
        $(".main-table").append("<table class='table'><tr><td style='color: red;'>" + video.result   +   "</td></tr></table>");
      }
    });
    $(".main-table").show()
  });
});
Ad
source: stackoverflow.com
Ad