none
How do I insert a table using inline script in Sharepoint? RRS feed

  • Question

  • I am trying to have my page show a table of results pulled from another website. Every time I go to "Edit Source" and put in the script and code, it will seemingly be there until I go back into "Edit Source". When I go back into there, the script is gone. Why?

    I am pretty new to building sites on SP. Am I doing this wrong?

    My script is pulling job vacancies of a particular organization and is supposed to show those results on my homepage. That is my goal. Please advise on how I do this. Thank you.

    Monday, September 16, 2019 6:04 PM

Answers

  • Hi Nikki,

    Ensure that the logged in user is also part of both the sites at least with the reader access:

    Insert the below script as a script editor webpart by following the below steps:

    1. Edit page using site setting gear icon

    2. click on add a webpart and select Media connect and click on script editor webpart.

    'use strict';  
    ExecuteOrDelayUntilScriptLoaded(initializePage, "sp.js");  
      
    function initializePage() {  
        var siteURL;  
        var itemsArray = [];  
        // This code runs when the DOM is ready and creates a context object which is needed to use the SharePoint object model  
        $(document).ready(function() {  
            var scriptbase = _spPageContextInfo.webServerRelativeUrl + "/_layouts/15/";  
            GetSampleListItems();  
        });  
        //Retrieve list items from sharepoint using API  
        function GetSampleListItems() {  
            siteURL = _spPageContextInfo.siteAbsoluteUrl;  
            console.log("from top nav - " + siteURL);  
            var apiPath = siteURL + "/_api/lists/getbytitle(''samplelist'')/items";  
            $.ajax({  
                url: apiPath,  
                headers: {  
                    Accept: "application/json;odata=verbose"  
                },  
                async: false,  
                success: function(data) {  
                    var items; // Data will have user object  
                    var results;  
                    if (data != null) {  
                        items = data.d;  
                        if (items != null) {  
                            results = items.results  
                            for (var i = 0; i < results.length; i++) {  
                                itemsArray.push({  
                                    "Title": results[i].Title  
                                });  
                            }  
                        }  
                    }  
                },  
                eror: function(data) {  
                    console.log("An error occurred. Please try again.");  
                }  
            });  
        }  
    }

    Hope this helps.

    Regards,

    Krishna

    • Marked as answer by Nikki Ivy Tuesday, September 17, 2019 1:58 PM
    Monday, September 16, 2019 6:29 PM
  • Hi Nikki,

    I understand you want to insert a html table with SharePoint list data within a page, then you could use SharePoint Rest API and loop data.d.results array bind into a html table, you could refer the following demo:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script>
    $(function(){
    $("#btnGetTrainingRequests").click(function(){
    var requestUri = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('TrainingRequests')/items";
    $.ajax({
    url: requestUri,
    type: "GET",
    headers: {
    "accept":"application/json; odata=verbose"
    },
    success: onSuccess,
    error: onError
    });
    function onSuccess(data) {
    var items = data.d.results;
    var fullResults = '<table id="tableCars" style="width:100%" border="1 px"><thead><tr><td><b>Title</b></td>' + '<td><b>Course</b></td>'+ '<td><b>TrainingType</b></td>' +'<td><b>Comments</b></td>' + '</tr></thead><tbody>';
    for (var i = 0; i < items.length; i++) {
    fullResults += '<tr>';
    fullResults += '<td>' + items[i].Title + '</td>';
    fullResults += '<td>' + items[i].Course + '</td>';
    fullResults += '<td>' + items[i].TrainingType + '</td>';
    fullResults += '<td>' + items[i].Comments + '</td>';
    fullResults += '</tr>';
    }
    $('#resultsTable').append(fullResults);
    }
    function onError(error) {
    alert('Error');
    }
    });
    });
    </script>
    <input type="button" id="btnGetTrainingRequests" value="Get All Training Requests"/>
    <br/><br/>
    <table id='tableCars' style="width: 100%;" border="1 px">
    <tr>
    <td>
    <div id="resultsTable" style="width: 100%"></div>
    </td>
    </tr>
    </table>

    Bind SharePoint Online List Data into HTML table or jQuery Datatable using jQuery and Rest API

    About adding script into Script Editor Web Part, please refer here:

    Script Editor Web Part in SharePoint 2016/2013/Online

    Thanks

    Best Regards


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    • Marked as answer by Nikki Ivy Tuesday, September 17, 2019 1:58 PM
    Tuesday, September 17, 2019 6:56 AM

All replies

  • Hi Nikki,

    Ensure that the logged in user is also part of both the sites at least with the reader access:

    Insert the below script as a script editor webpart by following the below steps:

    1. Edit page using site setting gear icon

    2. click on add a webpart and select Media connect and click on script editor webpart.

    'use strict';  
    ExecuteOrDelayUntilScriptLoaded(initializePage, "sp.js");  
      
    function initializePage() {  
        var siteURL;  
        var itemsArray = [];  
        // This code runs when the DOM is ready and creates a context object which is needed to use the SharePoint object model  
        $(document).ready(function() {  
            var scriptbase = _spPageContextInfo.webServerRelativeUrl + "/_layouts/15/";  
            GetSampleListItems();  
        });  
        //Retrieve list items from sharepoint using API  
        function GetSampleListItems() {  
            siteURL = _spPageContextInfo.siteAbsoluteUrl;  
            console.log("from top nav - " + siteURL);  
            var apiPath = siteURL + "/_api/lists/getbytitle(''samplelist'')/items";  
            $.ajax({  
                url: apiPath,  
                headers: {  
                    Accept: "application/json;odata=verbose"  
                },  
                async: false,  
                success: function(data) {  
                    var items; // Data will have user object  
                    var results;  
                    if (data != null) {  
                        items = data.d;  
                        if (items != null) {  
                            results = items.results  
                            for (var i = 0; i < results.length; i++) {  
                                itemsArray.push({  
                                    "Title": results[i].Title  
                                });  
                            }  
                        }  
                    }  
                },  
                eror: function(data) {  
                    console.log("An error occurred. Please try again.");  
                }  
            });  
        }  
    }

    Hope this helps.

    Regards,

    Krishna

    • Marked as answer by Nikki Ivy Tuesday, September 17, 2019 1:58 PM
    Monday, September 16, 2019 6:29 PM
  • Hi Nikki,

    I understand you want to insert a html table with SharePoint list data within a page, then you could use SharePoint Rest API and loop data.d.results array bind into a html table, you could refer the following demo:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script>
    $(function(){
    $("#btnGetTrainingRequests").click(function(){
    var requestUri = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('TrainingRequests')/items";
    $.ajax({
    url: requestUri,
    type: "GET",
    headers: {
    "accept":"application/json; odata=verbose"
    },
    success: onSuccess,
    error: onError
    });
    function onSuccess(data) {
    var items = data.d.results;
    var fullResults = '<table id="tableCars" style="width:100%" border="1 px"><thead><tr><td><b>Title</b></td>' + '<td><b>Course</b></td>'+ '<td><b>TrainingType</b></td>' +'<td><b>Comments</b></td>' + '</tr></thead><tbody>';
    for (var i = 0; i < items.length; i++) {
    fullResults += '<tr>';
    fullResults += '<td>' + items[i].Title + '</td>';
    fullResults += '<td>' + items[i].Course + '</td>';
    fullResults += '<td>' + items[i].TrainingType + '</td>';
    fullResults += '<td>' + items[i].Comments + '</td>';
    fullResults += '</tr>';
    }
    $('#resultsTable').append(fullResults);
    }
    function onError(error) {
    alert('Error');
    }
    });
    });
    </script>
    <input type="button" id="btnGetTrainingRequests" value="Get All Training Requests"/>
    <br/><br/>
    <table id='tableCars' style="width: 100%;" border="1 px">
    <tr>
    <td>
    <div id="resultsTable" style="width: 100%"></div>
    </td>
    </tr>
    </table>

    Bind SharePoint Online List Data into HTML table or jQuery Datatable using jQuery and Rest API

    About adding script into Script Editor Web Part, please refer here:

    Script Editor Web Part in SharePoint 2016/2013/Online

    Thanks

    Best Regards


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    • Marked as answer by Nikki Ivy Tuesday, September 17, 2019 1:58 PM
    Tuesday, September 17, 2019 6:56 AM
  • Thank you both very much for taking the time to help me! I was able to find the script editor webpart and insert it. Then I put my script in there, and it stayed there when I went back to tweak it. Thank you!
    Tuesday, September 17, 2019 2:00 PM