Help in building Tables with SP Services

Mar 27, 2012 at 6:57 AM

Hi All,
     I'm using SPServices to get some data out of a list like so:

 

   listSiteTabURLSalesTool = 'http://myServer';
        $().SPServices({
		operation: "GetListItems",
		webURL: listSiteTabURL, 
		listName: 'Follow',
		async: false,
		CAMLQuery:"<Query><Where><Eq><FieldRef Name='Location'/><Value Type='Text'>" + store  + "</Value></Eq></Where></Query>",
        CAMLViewFields:"<ViewFields><FieldRef Name='Title'/><FieldRef Name='Location'/></ViewFields>",
        completefunc: function (xData, Status) {
			
			
	$(xData.responseXML).find("[nodeName='z:row']").each(function() { 

              var title = $(this).attr("ows_Title"); 

             var store = $(this).attr("ows_Location"); 
		     
             var data = title + "-" + store;
			 
 
 
            });
			  $("#idfollowup").append(data);

          }
         });

But i would like to build this table to use it with the datatable plugin:

<div id="idfollowup">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example" width="100%">
	<thead>
		<tr>
			<th>Titlee</th>
			<th>Location</th>
			
		</tr>
	</thead>
	<tbody>

		<tr>
			<td>Title</td>
			<td>Location</td>
			
		</tr>

	</tbody>
</table>
</div>

Any help would be appreciated.

Thanks

Coordinator
Mar 27, 2012 at 1:08 PM
Edited Mar 28, 2012 at 1:02 PM

I note that you posted your question both here and on StackExchange. Try to pick one channel and then post on another only if you don't recieve a good answer after waiting a while.

M.

As I replied to your post on StackExchange:

You should build up the markup you want to emit rather than just the values of the columns. Something like this (untested and probably not exactly right):

             var title = $(this).attr("ows_Title");
             var store = $(this).attr("ows_Location");
             var data = "<tr><td>" + title + "</td><td>" + store + "</td></tr>";

You're also appending the data to the enclosing div, not the table inside it. So

$("#idfollowup table").append(data);
Mar 28, 2012 at 3:23 AM

Thanks Marc.

Mar 28, 2012 at 5:18 AM

Marc i have another question though .
I'm not sure whether this is the right approach,
What i did is have the HTML in content Editor Webpart(first time using this approach) and the load the js on the page.
But it seems the data keeps doucbling up at refresh.

Also it looks as if its caching because when i delete a record and load my page it stil displays the old record.
Any ideas my snippet code below.

As you can see i have a nested SPervices as i'm getting a value first and then pass it to the 2nd SPServices

Thanks in advance

 

 

	
<script type="text/javascript">

$(document).ready(function(){
	var data ='';

	
	  var userName = $().SPServices.SPGetCurrentUser({
                fieldName: "Title",
                debug: false
            });
            
    var newUserName = userName.replace("user\\",""); 

	listSiteTabURL = 'http://Server';
        $().SPServices({
		operation: "GetListItems",
		webURL: listSiteTabURL, 
		listName: 'BankEmployees',
		async: false,
		CAMLQuery:"<Query><Where><Eq><FieldRef Name='username'/><Value Type='Text'>" + newUserName + "</Value></Eq></Where></Query>",
        CAMLViewFields:"<ViewFields><FieldRef Name='Location'/><FieldRef Name='username'/></ViewFields>",
        completefunc: function (xData, Status) {
			$(xData.responseXML).find("[nodeName='z:row']").each(function() { 

     		  var store = $(this).attr("ows_Location"); 
		      var trimstore = $.trim(store); 	  
			  
              
              
        listSiteTabURLSalesTool = 'http://Server/';
        $().SPServices({
		operation: "GetListItems",
		webURL: listSiteTabURLSalesTool, 
		listName: 'Follow',
		async: false,
		CAMLQuery:"<Query><Where><Eq><FieldRef Name='Location'/><Value Type='Text'>" + trimstore  + "</Value></Eq></Where></Query>",
        CAMLViewFields:"<ViewFields><FieldRef Name='Title'/><FieldRef Name='Location'/></ViewFields>",
        completefunc: function (xData, Status) {
			
			

			
			$(xData.responseXML).find("[nodeName='z:row']").each(function() { 

			Title	Contact Number	Reason	Status	Date Due	Location
            
			var title = $(this).attr("ows_Title");
            var store = $(this).attr("ows_Location");
			var Reason = $(this).attr("ows_Reason");
            var Status = $(this).attr("ows_Status");
			var contactnumber = $(this).attr("ows_Contact_x0020_Number");
			var datedue = $(this).attr("ows_Date_x0020_Due");
          
            data += "<tr><td>" + title + "</td><td>" + contactnumber + "</td><td>" + Reason + "</td><td>" + Status + "</td><td>" + datedue + "</td></tr>"; 
            
            //alert(data);
 
        
			  
			  			 });
			  
			  $("#example tbody").append(data);
			  

          }
         });
     
      
             
    
          });
         
          }
         });
     $('#example').dataTable(
    {
     "bFilter": true,
     /*"bPaginate": true,*/
     "bSort": true
     /*"bJQueryUI": true,*/
     /*"sPaginationType": "full_numbers"*/
    }
    );
     
   });
    </script>
    
Coordinator
Mar 28, 2012 at 1:07 PM

I don't see anything obvious. Generally speaking, the Web Services calls should be reading directly from the list, so you should always get current data. (I've seen a few oddities with things like horribly badly configured F5s and such, but these are real exceptions.)

Sounds like debugging time. Maybe you're getting items in the first call you don't expect?

M.

Mar 28, 2012 at 10:53 PM

hm.. ok.
When i debug and look at what the SPServices is outputing its 2 rows but when the data is loaded its 3.
It seems its adding the rows again.

Mar 29, 2012 at 12:00 AM

what do you mean by horribly badly configured F5s??
Please explain

Coordinator
Mar 29, 2012 at 3:38 AM

An F5 is a load balancer and caching box. I've seen some very odd caching setups in some cases.

If 2 items are coming back from the Web Services call, but three are ending up in the page, then it's got to be something with your code.

M.

Mar 29, 2012 at 6:33 AM

Marc. Its the Datatable plugin.
No idea how is adding another row to it.

Tested it with a DIV its all good.
Do you recommend any atble grid with SP Services?
Cheers

Mar 29, 2012 at 12:23 PM

I use DataTables, jsRender or simply roll my own... It really depends. :)