I need help in building HTML Tables with SP Services(Jquery)

Question

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

Answer 1

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);