Formatting CSOM output

Question

Hi
I have a list and using CSOM to surface information. However all the examples I found show an alert box or Gridview to output the information.
I would like the list items to show in a tabular form, this could be div or something so I can style it. In addition it would be useful to have some sort of pagination, i.e. a link to show next set of list items (in batches).
The following code  pages through a list but gives an alert box, need to modify it so it shows in tabular form.
Any ideas?
var listItems; //holds retrieved list items
var query; //must continue to reuse the same query object for paging to work
var targetList; //list from which to retrieve items
var ctx;
function runCode() {
ctx = new SP.ClientContext();
targetList = ctx.get_web().get_lists().getByTitle('Test1');
query = new SP.CamlQuery();
query.set_viewXml("<View><ViewFields><FieldRef Name='Title'/></ViewFields><RowLimit>2</RowLimit></View>");
listItems = targetList.getItems(query);
ctx.load(listItems);
ctx.executeQueryAsync(onQuerySucceeded, onQueryFailed);
function onQuerySucceeded() {
var message = "Found Matching Items! ";
var listEnumerator = listItems.getEnumerator();
while (listEnumerator.moveNext()) {
message += "nTitle=" + listEnumerator.get_current().get_item("Title")
alert(message);
var position = listItems.get_listItemCollectionPosition();
if (position != null) {
query.set_listItemCollectionPosition(position);
listItems = targetList.getItems(query);
ctx.load(listItems);
ctx.executeQueryAsync(onQuerySucceeded, this.onQueryFailed);
function onQueryFailed(sender, args) {
alert('Request failed. nError: ' + args.get_message() + 'nStackTrace: ' + args.get_stackTrace());

Answer 1

Hi,
According to your description, you might want to print the retrieved result in a tabular format in the page.
There will be two main steps in your solution:
1. Retrieve the data needed as what you have done;
2. With the retrieved result, generate the HTML source code, inject into somewhere in the page, this should be a pure JavaScript issue now.
About the second step, the links below would be helpful:
Inject HTML on a page:
http://stackoverflow.com/questions/3762385/best-way-to-inject-html-using-javascript
About
how to modify the HTML using JavaScript:
http://www.w3schools.com/js/js_htmldom_html.asp
http://njarb.com/2011/06/update-html-content-using-javascript/
About
how to modify the HTML using jQuery:
http://www.w3schools.com/jquery/jquery_dom_set.asp
About
creating HTML table dynamically:
http://www.ryerson.ca/JavaScript/lectures/flowControl/loops/writingTables/simpleTable.html
http://www.mysamplecode.com/2012/04/generate-html-table-using-javascript.html
Other useful
JavaScript plugins for HTML table:
http://blog.teamtreehouse.com/jquery-plugins-html-tables
http://www.sitepoint.com/30-amazing-jquery-tables/
Thanks
Patrick Liang
Forum Support
Please remember to mark the replies as answers if they help and unmark them if they provide no help. If you have feedback for TechNet Subscriber Support,
contact [email protected]
Patrick Liang
TechNet Community Support