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.

  • No, but there might be workarounds. Why do you need to do this? Commented Apr 2, 2018 at 20:45
  • My options for a project are create 30+ different aspx pages (with other text content that can be called via REST API regardless), each with their distinct filtered list view web part, or one page that shows the filtered list view web part dynamically.
    – DevBot
    Commented Apr 2, 2018 at 21:18
  • I found my best option was using Method 2 from this answer.
    – DevBot
    Commented Apr 6, 2018 at 14:47

1 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.


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";
    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('<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);}

<div id="resultDiv"></div>
  • If you could share code that would be great.
    – DevBot
    Commented Apr 2, 2018 at 18:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.