अपडेट करें

यह स्निपेट उदाहरण में var डेटा सरणी के साथ काम करता है, जब मैं इसे अपने आरईएसटी उदाहरण में लागू करने का प्रयास करता हूं, तो कुछ भी एचटीएमएल सूची को पॉप्युलेट नहीं कर रहा है। मैं कामकाजी उदाहरण को एक पहेली में स्थानांतरित करने जा रहा हूं और स्निपेट को उस कार्यान्वयन के साथ अपडेट कर रहा हूं जो काम नहीं कर रहा है।

फिडल (कड़ी मेहनत से कोडित सरणी): https://jsfiddle.net/v24kagL8/

मैं अपने डेटा के माध्यम से WeekOf चर द्वारा खोज रहा हूं जो एक दिनांक/समय SharePoint कॉलम है।

इस उदाहरण में दिनांक स्वरूप YYYY-MM-DD है।

यहाँ एक परीक्षण मामला है: लोड पर सब कुछ दिखाया गया है। एक बार जब खोज बार का उपयोग किया जाता है, और सही तिथि दर्ज की जाती है, तो उस तिथि से संबंधित मान दिखाई देते हैं। जब खोज बार साफ़ हो जाता है, तो कोई डेटा नहीं भरा जाता है और मैं चाहता हूं कि वह काम करे।

FETCH के साथ अद्यतन स्निपेट @ फ्रीडम-एम के जवाब में, फिक्स यह था जो काम करता है, लेकिन जब मैं लागू करता हूं, तो कुछ भी पॉप्युलेट नहीं होता है

$("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $('#under_txt').text(value);
    if (value == "") {
      $("li").fadeIn();
    } else {
      $('li').fadeOut(10);
      $('[data-weekof=' + value + ']').fadeIn();
    }
  });

यहां मेरा अद्यतन जेएस है जो काम नहीं कर रहा है:

function loadData(url) {
  url = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('WeeklyReport')/items?$select=DeliverablesSubmitted,MajorTasks,UpcomingTasks,UpcomingDeliverables,PersonnelActions,SupportRequest,ResourceRequest,Team/Value,Training,Upcoming,WeekOf,TravelODC";
  return fetch(url, { headers: { accept: "application/json; odata=verbose" } }) // make request
    .then((r) => {
      if (!r.ok) throw new Error("Failed: " + url);  // Check for errors
      return r.json();  // parse JSON
    })
    .then((data) => data.d.results);
}
loadData()
  .then((results) => {
      let data = results;
      var listContent = '';
      console.log(data);
    for (var i = 0; i < data.length; i++) {
        var currData = data[i];
        listContent += '<li class="test" data-weekOf="'+currData.WeekOf.split("T")[0]+'">';
        console.log(currData.WeekOf.split("T")[0]);
       if(currData.Team !== null){
        listContent += '<h2>' + currData.Team.results.join(', ') +'</h2>';
        }else{
        listContent += '<h2>' + "Null" +'</h2>';
        }
       if(currData.MajorTasks !== null){
        listContent += '<h4> Major Tasks Completed </h4>';
        listContent += '<ul>' + "- " + currData.MajorTasks.replace(/(<([^>]+)>)/gi, "") + '</ul>';
       }else{
       }
       if(currData.DeliverablesSubmitted !== null){
        listContent += '<h4> Deliverables Submitted</h4>';
        listContent += '<ul>' + "- " + currData.DeliverablesSubmitted.replace(/(<([^>]+)>)/gi, "") + '</ul>';
       }else{
       }
       if(currData.UpcomingTasks !== null){
        listContent += '<h4> Upcoming Tasks</h4>';
        listContent += '<ul>' + "- " + currData.UpcomingTasks.replace(/(<([^>]+)>)/gi, "") + '</ul>';
       }else{
       }
       if(currData.UpcomingDeliverables !== null){
        listContent += '<h4> Upcoming Deliverables</h4>';
        listContent += '<ul>' + "- " + currData.UpcomingDeliverables.replace(/(<([^>]+)>)/gi, "") + '</ul>';
       }else{
       }
       if(currData.PersonnelActions !== null){
        listContent += '<h4> Personnel Actions </h4>';
        listContent += '<ul>' + "- " + currData.PersonnelActions.replace(/(<([^>]+)>)/gi, "") + '</ul>';
       }else{
       }
       if(currData.Upcoming !== null){
        listContent += '<h4> Upcoming G3G Events </h4>';
        listContent += '<ul>' + "- " + currData.Upcoming.replace(/(<([^>]+)>)/gi, "") + '</ul>';
       }else{
       }
       listContent += '</li>';
    }
 $('#report-summary').html(listContent);
 $('#under_txt').text(' ');
});
  $(document).ready(function(){
    loadData();
  });
$("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $('#under_txt').text(value);
    if (value == "") {
      $("li").fadeIn();
    } else {
      $('li').fadeOut(10);
      $('[data-weekof=' + value + ']').fadeIn();
    }
  });
function sortNewestFirst(){
  var elements = $('[data-weekOf]');
  elements.sort(function (a, b) {
      return new Date($(b).attr('data-weekOf')) - new Date($(a).attr('data-weekOf'));
  });
  $('#report-summary').html(elements);
 }
function sortOldestFirst(){
  var elements = $('[data-weekOf]');
  elements.sort(function (a, b) {
      return new Date($(a).attr('data-weekOf')) - new Date($(b).attr('data-weekOf'));
  });
  $('#report-summary').html(elements);
 }
$('a.printPage').click(function(){
        $('.container').show();
           window.print();
           return false;
});
0
BeerusDev 9 फरवरी 2021, 20:07

2 जवाब

सबसे बढ़िया उत्तर

value=="" के लिए एक चेक जोड़ें फिर किसी को भी फ़िल्टर करने के बजाय सभी दिखाएं:

  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $('#under_txt').text(value);
    if (value == "") {
      $("li").fadeIn();
    } else {
      $('li').fadeOut(10);
      $('[data-weekof=' + value + ']').fadeIn();
    }
  });

अपडेट किया गया स्निपेट

var data = [
    {
      "Team": "Eagles",
      "WeekOf": "2021-01-31",
      "Tasks": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
      "Deliverables": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
      "Actions": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
      "Billable": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
      "NonBillable": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
      "UpcomingEvents": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
      "Training": null,
      "Resource": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
      "Support": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
    },
{
      "Team": "Raiders",
      "WeekOf": "2021-01-31",
      "Tasks": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
      "Deliverables": null,
      "Actions": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
      "Billable": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
      "NonBillable": null,
      "UpcomingEvents": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
      "Training": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
      "Resource": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
      "Support": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
    },
{
      "Team": "Vikings",
      "WeekOf": "2021-03-30",
      "Tasks": null,
      "Deliverables": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
      "Actions": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
      "Billable": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
      "NonBillable": null,
      "UpcomingEvents": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
      "Training": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
      "Resource": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
      "Support": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
    }
  ];

function onSuccess(data) {
     console.log("onsuccess")
     var listContent = [];
   
     for (var i = 0; i < data.length; i++) {
         listContent += '<li data-weekof="'+data[i].WeekOf+'">';
         listContent += '<h2>' + data[i].Team  +'</h2>';
         listContent += '<h4> Tasks </h4>';
         if(data[i].Tasks !== null){
            listContent += '<ul>' + "- " + data[i].Tasks + '</ul>';
         }else{
              listContent += '<ul>' + "- There were no notes attached to this section." + '</ul>';
         }
         listContent += '<h4> Deliverables </h4>';
                 if(data[i].Deliverables !== null){
         listContent += '<ul>' + "- " + data[i].Deliverables + '</ul>';
         }else{
         listContent += '<ul>' + "- There were no notes attached to this section." + '</ul>';
         }
         listContent += '<h4> Personnel Actions </h4>';
                 if(data[i].Actions !== null){
         listContent += '<ul>' + "- " + data[i].Actions + '</ul>';
         }else{
         listContent += '<ul>' + "- There were no notes attached to this section." + '</ul>';
         }
         listContent += '<h4> Finance (Billable) </h4>';
                 if(data[i].Billable !== null){
         listContent += '<ul>' + "- " + data[i].Billable + '</ul>';
         }else{
         listContent += '<ul>' + "- There were no notes attached to this section." + '</ul>';
         }
         listContent += '<h4> Finance (Non-Billable) </h4>';
         if(data[i].NonBillable !== null){
                 listContent += '<ul>' + "- " + data[i].NonBillable + '</ul>';
         }else{
         listContent += '<ul>' + "- There were no notes attached to this section." + '</ul>';
         }
         listContent += '<h4> Upcoming Events </h4>';
         if(data[i].UpcomingEvents !== null){
         listContent += '<ul>' + "- " + data[i].UpcomingEvents + '</ul>';
         }else{
         listContent += '<ul>' + "- There were no notes attached to this section." + '</ul>';
         }
         listContent += '<h4> Training </h4>';
         if(data[i].Training !== null){
         listContent += '<ul>' + "- " + data[i].Training + '</ul>';
         }else{
         listContent += '<ul>' + "- There were no notes attached to this section." + '</ul>';
         }
         listContent += '<h4> Resource Request </h4>';
         if(data[i].Resource !== null){
         listContent += '<ul>' + "- " + data[i].Resource + '</ul>';
         }else{
         listContent += '<ul>' + "- There were no notes attached to this section." + '</ul>';
         }
         listContent += '<h4> Support Request </h4>';
         if(data[i].Support !== null){
         listContent += '<ul>' + "- " + data[i].Support + '</ul>';         
         }else{
         listContent += '<ul>' + "- There were no notes attached to this section." + '</ul>';
         }
         listContent += '</li>';
 }
   $('#report-summary').html(listContent);
   $('#under_txt').text(' ');
  }
  $(document).ready(function(){
    onSuccess(data);
  });
  
$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $('#under_txt').text(value);
    if (value == "") {
      $("li").fadeIn();
    } else {
      $('li').fadeOut(10);
      $('[data-weekof=' + value + ']').fadeIn();
    }
  });
});
function sortNewestFirst(){
  var elements = $('[data-weekOf]');
  elements.sort(function (a, b) {
      return new Date($(b).attr('data-weekOf')) - new Date($(a).attr('data-weekOf'));
  });
  $('#report-summary').html(elements);
 }
function sortOldestFirst(){
  var elements = $('[data-weekOf]');
  elements.sort(function (a, b) {
      return new Date($(a).attr('data-weekOf')) - new Date($(b).attr('data-weekOf'));
  });
  $('#report-summary').html(elements);

}
h2{
 text-align: left;
 text-decoration: underline;
 font-size: 20px;
}
h1{
  font-size: 25px;
  text-align: center;
}
ul {
  list-style-type: none;
  padding: 0px;
  margin-left: 0px;
}
li{
    list-style-type: none;
}
span{
  font-size: 15px;
}
#report-summary{
  margin-left: 15px;
  margin-right: 15px;
}
#search{
  text-align: center;
}
p {
  text-align: center;
}
h4{
  font-size: 17px;
  font-weight: normal;
  text-decoration: underline;
  margin-top: -10px;
  margin-bottom: -10px;
}
#myInput{
  text-align: center;
}
#under_txt{
margin-left: 5px;
padding: 0px 10px 0px 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link type="text/css" media="all" rel="stylesheet">
<div class="container">
<div id="search">
<input id="myInput" type="text" placeholder="Search for Week Of">
</div>
<h1>
Weekly Manager Report
</h1>
<p>Week Of<span id="under_txt"></span></p>
<div id="report-summary">

</div>
</div>
2
freedomn-m 9 फरवरी 2021, 20:43

मुझे पता नहीं है कि आप अंतिम डेटा को साफ़ करते समय प्रदर्शित करना चाहते हैं या डेटा प्रारंभ में प्रदर्शित करना चाहते हैं: यहां मैं प्रारंभिक डेटा प्रदर्शित करता हूं जब value ==''

जब आप इनपुट साफ़ करते हैं तो आप बस ऑनसक्सेस (डेटा) को फिर से लॉन्च करते हैं:

var data = [
    {
      "Team": "Eagles",
      "WeekOf": "2021-01-31",
      "Tasks": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
      "Deliverables": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
      "Actions": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
      "Billable": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
      "NonBillable": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
      "UpcomingEvents": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
      "Training": null,
      "Resource": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
      "Support": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
    },
{
      "Team": "Raiders",
      "WeekOf": "2021-01-31",
      "Tasks": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
      "Deliverables": null,
      "Actions": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
      "Billable": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
      "NonBillable": null,
      "UpcomingEvents": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
      "Training": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
      "Resource": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
      "Support": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
    },
{
      "Team": "Vikings",
      "WeekOf": "2021-03-30",
      "Tasks": null,
      "Deliverables": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
      "Actions": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
      "Billable": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
      "NonBillable": null,
      "UpcomingEvents": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
      "Training": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
      "Resource": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
      "Support": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
    }
  ];

function onSuccess(data) {
     var listContent = [];
   
     for (var i = 0; i < data.length; i++) {
         listContent += '<li data-weekOf="'+data[i].WeekOf+'">';
         listContent += '<h2>' + data[i].Team  +'</h2>';
         listContent += '<h4> Tasks </h4>';
         if(data[i].Tasks !== null){
            listContent += '<ul>' + "- " + data[i].Tasks + '</ul>';
         }else{
              listContent += '<ul>' + "- There were no notes attached to this section." + '</ul>';
         }
         listContent += '<h4> Deliverables </h4>';
                 if(data[i].Deliverables !== null){
         listContent += '<ul>' + "- " + data[i].Deliverables + '</ul>';
         }else{
         listContent += '<ul>' + "- There were no notes attached to this section." + '</ul>';
         }
         listContent += '<h4> Personnel Actions </h4>';
                 if(data[i].Actions !== null){
         listContent += '<ul>' + "- " + data[i].Actions + '</ul>';
         }else{
         listContent += '<ul>' + "- There were no notes attached to this section." + '</ul>';
         }
         listContent += '<h4> Finance (Billable) </h4>';
                 if(data[i].Billable !== null){
         listContent += '<ul>' + "- " + data[i].Billable + '</ul>';
         }else{
         listContent += '<ul>' + "- There were no notes attached to this section." + '</ul>';
         }
         listContent += '<h4> Finance (Non-Billable) </h4>';
         if(data[i].NonBillable !== null){
                 listContent += '<ul>' + "- " + data[i].NonBillable + '</ul>';
         }else{
         listContent += '<ul>' + "- There were no notes attached to this section." + '</ul>';
         }
         listContent += '<h4> Upcoming Events </h4>';
         if(data[i].UpcomingEvents !== null){
         listContent += '<ul>' + "- " + data[i].UpcomingEvents + '</ul>';
         }else{
         listContent += '<ul>' + "- There were no notes attached to this section." + '</ul>';
         }
         listContent += '<h4> Training </h4>';
         if(data[i].Training !== null){
         listContent += '<ul>' + "- " + data[i].Training + '</ul>';
         }else{
         listContent += '<ul>' + "- There were no notes attached to this section." + '</ul>';
         }
         listContent += '<h4> Resource Request </h4>';
         if(data[i].Resource !== null){
         listContent += '<ul>' + "- " + data[i].Resource + '</ul>';
         }else{
         listContent += '<ul>' + "- There were no notes attached to this section." + '</ul>';
         }
         listContent += '<h4> Support Request </h4>';
         if(data[i].Support !== null){
         listContent += '<ul>' + "- " + data[i].Support + '</ul>';         
         }else{
         listContent += '<ul>' + "- There were no notes attached to this section." + '</ul>';
         }
         listContent += '</li>';
 }
   $('#report-summary').html(listContent);
   $('#under_txt').text(' ');
  }
  $(document).ready(function(){
    onSuccess(data);
  });
  
$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    if($.trim(value)==''){
        onSuccess(data);
        return;
    }
    $('#under_txt').text(value);
    $('li').fadeOut(10);
    var test = $('[data-weekOf='+value+']');
    console.log(test);
    if(test.length == 0) return;
    $('[data-weekOf='+value+']').fadeIn();
  });
  
});
function sortNewestFirst(){
  var elements = $('[data-weekOf]');
  elements.sort(function (a, b) {
      return new Date($(b).attr('data-weekOf')) - new Date($(a).attr('data-weekOf'));
  });
  $('#report-summary').html(elements);
 }
function sortOldestFirst(){
  var elements = $('[data-weekOf]');
  elements.sort(function (a, b) {
      return new Date($(a).attr('data-weekOf')) - new Date($(b).attr('data-weekOf'));
  });
  $('#report-summary').html(elements);

}
h2{
 text-align: left;
 text-decoration: underline;
 font-size: 20px;
}
h1{
  font-size: 25px;
  text-align: center;
}
ul {
  list-style-type: none;
  padding: 0px;
  margin-left: 0px;
}
li{
    list-style-type: none;
}
span{
  font-size: 15px;
}
#report-summary{
  margin-left: 15px;
  margin-right: 15px;
}
#search{
  text-align: center;
}
p {
  text-align: center;
}
h4{
  font-size: 17px;
  font-weight: normal;
  text-decoration: underline;
  margin-top: -10px;
  margin-bottom: -10px;
}
#myInput{
  text-align: center;
}
#under_txt{
margin-left: 5px;
padding: 0px 10px 0px 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link type="text/css" media="all" rel="stylesheet">
<div class="container">
<div id="search">
<input id="myInput" type="text" placeholder="Search for Week Of">
</div>
<h1>
Weekly Manager Report
</h1>
<p>Week Of<span id="under_txt"></span></p>
<div id="report-summary">

</div>
</div>
1
Frenchy 9 फरवरी 2021, 20:48