Add list view to page at load time via JavaScript?

Question

When editing a web part page, there is the option to add a web part to a zone, where you can pick a list or library, and from that web part's "Edit Web-Part" selection, change the list view displayed on the page.

Is there way with JavaScript to get and display a certain list view on a page, just the same as if it had been manually added by the process above?

I know this is an option, but when that is used to insert list view contents on a page, the Document Ribbon is unavailable, the title is not loaded, and sorting/filtering columns doesn't work.

Answer 1

You can use Content editor web part for this.

1. Create a HTML file and JS file. Since you asked JavaScript then you will have 2 options i. REST API ii. JSOM
2. You need to upload the HTML and JS files to custom Library OR to your Site assets.
3. Add the content editor webpart and copy the relative URL of the html file and paste in options list. (If you want to know more about content editor web part, kindly let me know)

You can also do it from script editor web part but you should prefer Content editor for your requirement.

I can share you the code if you need for the above requirement.

Thanks,

Regards, Sukumar MS

Kindly find code below for Get list items:

you can also do for UPDATE, DELETE and INSERT operations.

    function loadMyItems() {
var siteUrl = _spPageContextInfo.siteAbsoluteUrl;
var oDataUrl = siteUrl + "/_api/web/lists/getbytitle('Sukumar_List')/items?$select=ID,Emp_Name,Designation,Date_x0020_of_x0020_Joining,Salary,Project_Details,Company,ReportingTo/Title,ReportingTo/Manager_Name&$expand=ReportingTo";
$.ajax({
    url: oDataUrl,
    type: "GET",
    dataType: "json",
    headers: {
        "accept": "application/json;odata=verbose"
    },
    success: mySuccHandler,
    error: myErrHandler
}

    function mySuccHandler(data) {
var results = data.d.results;
var _html = "";
_html += '<table id="myTable" class="table" >';
_html += '<thead><tr><th>Employee Number</th><th>Employee Name</th><th>Designation</th><th>Date Joined</th><th>Project Details</th><th>Company Name</th><th>LookUp Refernce</th><th>People Picker</th><th>Action Item</th></tr></thead>'; // heading columns 
$.each(results, function (index, dataRec) {
    _html += '<tr>';
    _html += '<td>' + dataRec.ID + '</td>'; //columns 
    _html += '<td>' + dataRec.Emp_Name + '</td>';
    _html += '<td>' + dataRec.Designation + '</td>';
    _html += '<td>' + dataRec.Date_x0020_of_x0020_Joining + '</td>';
    _html += '<td>' + dataRec.Project_Details + '</td>';
    _html += '<td>' + dataRec.Company + '</td>';
    _html += '<td>' + dataRec.ReportingTo.Manager_Name + '</td>';
    _html += '<td></td>';
   // _html += '<td>' + peoplePicker(dataRec.ID) + '</td>';
    _html += '<td> <span class="glyphicon glyphicon-pencil">&ensp;</span><a href="javascript:void(0)" role="button" onclick="editItem(this)" >EDIT </a><span class="glyphicon glyphicon-remove"><a href="javascript:void(0)" role="button" onclick="deleteItem(\'' + dataRec.ID + '\')">&ensp;DELETE</a></span></td>';
    _html += '</tr>';
});
_html += "</table>"
$("#resultsDiv").append(_html);

// $("#resultsDiv").append('<table id="myTable" class="table" >');
// $("#resultsDiv").append('<tr><th>Employee Number</th><th>Employee Name</th><th>Designation</th><th>Action Item</th></tr>'); // heading columns 
// $.each(results, function(index, dataRec) {
//   $("#resultsDiv").append('<tr>');
//   $("#resultsDiv").append('<td>' + dataRec.ID + '</td>'); //columns 
//   $("#resultsDiv").append('<td>' + dataRec.Emp_Name + '</td>');
//   $("#resultsDiv").append('<td>' + dataRec.Designation + '</td>');
//   $("#resultsDiv").append('<td> <span class="glyphicon glyphicon-pencil">&nbsp;</span><a href="javascript:void(0)" role="button" onclick="editItem(\''+dataRec.ID+'\')" >EDIT </a><span class="glyphicon glyphicon-remove"><a href="javascript:void(0)" role="button" onclick="deleteItem(\''+dataRec.ID+'\')" > DELETE</a></span></td>');
//   $("#resultsDiv").append('</tr>');
// });
// $("#resultsDiv").append('</table>');
    }
    function myErrHandler(data, errMessage) {
alert("Error: " + errMessage);}

    HTML:
<div id="resultDiv"></div>