1

Hi Am using sharepoint 2010 and am trying to find ways to display the list items in a content editor webpart using jquery . I want to display them i a html table. Let me know any kind of suggestions on this. Thanks.

3

3 Answers 3

1

You can use SP Services to display your data from list in table format You can download spservices from SpServices.

In Below Example I am having table strcture:

Request Status Request Title Request Created Request Owner Course Deployment Date

and append the pulled data to table using below code:

var query = '<Query>'+
                '<Where>'+
                    '<And>'+
                        '<Eq>'+
                            '<FieldRef Name="NewItemActivation"/><Value Type="Text">Yes</Value>'+
                        '</Eq>'+
                        '<Neq>'+
                            '<FieldRef Name="IsOldRequest"/><Value Type="Text">Y</Value></Neq>'+
                    '</And>'+
                '</Where>'+
            '</Query>';

var view = '<ViewFields>'+
            '<FieldRef Name="TrainingTitle" />'+
            '<FieldRef Name="RequestStatus" />'+
            '<FieldRef Name="Created" />'+
            '<FieldRef Name="RequestorName" />'+
            '<FieldRef Name="DeployementDate" />'+
          '</ViewFields>';
var htmlTable='';
var TrainingTitle;
var RequestStatus;
var Created;
var RequestorName;
var Deployement;
  $().SPServices({
                operation: "GetListItems",
                async: false,
                listName: "TrainTrax",
                CAMLViewFields: view ,
                CAMLQuery : query ,
                completefunc: function (xData, Status) {
                    var totalRows = parseInt($(xData.responseXML).SPFilterNode("rs:data").attr("ItemCount"));

                    if(totalRows > 0)
                    {                       
                        $(xData.responseXML).SPFilterNode('z:row').each(function()
                        {
                            TrainingTitle = $(this).attr("ows_TrainingTitle");
                            if(TrainingTitle === undefined)
                                TrainingTitle = '';

                            RequestStatus = $(this).attr("ows_RequestStatus");
                            if(RequestStatus === undefined)
                                RequestStatus ='';

                            Created = $(this).attr("ows_Created");
                            if(Created === undefined)
                                Created ='';

                            RequestorName = $(this).attr("ows_RequestorName");
                            if(RequestorName === undefined)
                                RequestorName= '';

                            Deployement = $(this).attr("DeployementDate");
                            if(Deployement === undefined)
                                Deployement ='';
            // Store data in variable once all data in stored append it to table                    
                            htmlTable+="<tr><td>"+RequestStatus +"</td><td>"+TrainingTitle +"</td><td>"+Created+"</td><td>"
                                        +RequestorName +"</td><td>"+ Deployement +"</td></tr>";                                 
                        });

                        $("#exportToExcel").append(htmlTable);

                    }
                }
            }); 
0
5

For the situation you're describing, I like using Knockout and the REST API or the SharePoint JavaScript Object Model.

Here is a basic example that takes 10 users from the user information list (which is just a hidden list on all 2010 sites) using the REST API, and displays them in an HTML table -- below is the entire source for a content editor to do so (I usually put it in a seperate text file in an asset library, then point the content editor 'source' to it):

<div id="userTable">
    <table>
        <thead>
            <tr>
                <th>Account Name</th>
                <th>First Name</th>
                <th>Last Name</th>
            </tr>
        </thead>
        <tbody data-bind="foreach: users">
            <tr>
                <td data-bind="text: account"></td>
                <td data-bind="text: firstName"></td>
                <td data-bind="text: lastName"></td>
            </tr>
        </tbody>
    </table>
</div>
<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"></script>
<script>
    'use strict';
    var simpleDemo = simpleDemo || {};

    // setup the View-Model we'll use to manage the page
    simpleDemo.ViewModel = function() {
        // definitions
        var self = this;
        self.users = ko.observableArray();

        function UserInfoItem(account, firstName, lastName) {
            this.account = account;
            this.firstName = firstName;
            this.lastName = lastName;
        }

        self.initAsync = function() {
            return $.getJSON("/_vti_bin/ListData.svc/UserInformationList?$top=10", function (data) {
                var userArray = [];
                for (var i = 0; i < data.d.length; i++) {
                    userArray.push(new UserInfoItem(
                        data.d[i].Account,
                        data.d[i].FirstName,
                        data.d[i].LastName
                    ));
                }
                self.users(userArray);
            });
        }

        // viewModel setup
        self.initAsync();

    };

    // this immediately executed function will create our view model and apply the 
    // HTML value bindings as soon as our content editor loads
    (function() {
        ko.applyBindings(new simpleDemo.ViewModel());
    })()
</script>

Note that some of the users you get may not have first and last names if they are system accounts!

You can find a lot more information about the different options/technologies out there on the web:

You could also use Angular, or Ember to provide the same functionality that Knockout does here, but I tend to like Knockout's syntax (although I like Angular's just as much) and it's much lighter-weight than Angular or Ember as well. You could also use just jQuery to dynamically build a table from your JSON results, but I find that object binding and dependency tracking of the other frameworks make that approach seem a bit old fashioned! Your specific technique is a decision you should research and make yourself though. Good luck!

1
  • +1 That is really good answer that demonstrates how to utilize Knockout, jQuery and the SharePoint REST Oct 2, 2014 at 20:07
0

The best way to accomplish this would not to use jQuery. You should be able to do this by doing either of these:

  1. Use a list web part of your list with a custom view and use the styles that come with SP.

or

  1. Create a data view of your list. You can modify that to look exactly how you want it pretty easily.
0

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.