Creating a selectable HTML table with Sahrepoint list data dind

Question

Hi All,
I m creating an app for sharepoint2013 , on my app I want to read data from SP list and display on something like HTML table/ grid view.
What I have done is as follows.
<table cellpadding="0" cellspacing="0" border="0" class="display" id="TermList">
                    <thead>
                        <tr>
                                    <th>Start Date</th>
                            <th>End Date</th>
                            <th>Term Type(s)</th>
                            <th>Specialty</th>
                            <th width="12%">Sub Specialty</th>
                        </tr>
                    </thead>
                                        <tbody>
                        </tbody>
</table>
var context = SP.ClientContext.get_current();
var user = context.get_web().get_currentUser();
var Termsitems, web, hostcontext, currentusertitle;
var hosturl;
(function () {
$(document).ready(function () {
    gethostdata();
    getUserName();
    $('#TermList').dataTable(
                    "sScrollY": 200,
                        This will enable jQuery UI theme
                    "bJQueryUI": true,
                        will add the pagination links
                    "sPaginationType": "full_numbers"
    getTermdetails();
function gethostdata() {
    hosturl = decodeURIComponent(getQueryStringParameter("SPHostUrl"));
    context = new SP.ClientContext.get_current();
    hostcontext = new SP.AppContextSite(context, hosturl);
    web = hostcontext.get_web();
    context.load(web, 'Title');
    context.executeQueryAsync(onSiteLoadSuccess, onQueryFailed);
function onSiteLoadSuccess(sender, args) {
    //   alert("site title : " + web.get_title());
function onQueryFailed(sender, args) {
    alert('request failed ' + args.get_message() + '\n' + args.get_stackTrace());
function getQueryStringParameter(urlParameterKey) {
    var params = document.URL.split('?')[1].split('&');
    var strParams = '';
    for (var i = 0; i < params.length; i = i + 1) {
        var singleParam = params[i].split('=');
        if (singleParam[0] == urlParameterKey)
            return decodeURIComponent(singleParam[1]);
// This function prepares, loads, and then executes a SharePoint query to get the current users information
function getUserName() {
    context.load(user);
    context.executeQueryAsync(onGetUserNameSuccess, onGetUserNameFail);
// This function is executed if the above call is successful
// It replaces the contents of the 'message' element with the user name
function onGetUserNameSuccess() {
currentusertitle= user.get_title();
  $('#message').text('Hello ' + user.get_title());
// This function is executed if the above call fails
function onGetUserNameFail(sender, args) {
    alert('Failed to get user name. Error:' + args.get_message());
function getTermdetails() {
    var Termlist = web.get_lists().getByTitle("TraineeTermsSPlist");
    context.load(Termlist)
    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml('<View><Query><Where><Eq><FieldRef Name="Title" />' +
                             '<Value Type="Text"> + currentusertitle + </Value></Eq></Where></Query></View>');
    Termsitems = Termlist.getItems(camlQuery);
    context.load(Termsitems);
    context.executeQueryAsync(getTermdetailsQuerySuccsess, getTermdetailsQueryFails)
function getTermdetailsQuerySuccsess(sender, args) {
    var listEnumerator = Termsitems.getEnumerator();
    var datatable = document.getElementById("TermList");
    while (listEnumerator.moveNext()) {
        var oListItem = listEnumerator.get_current();
        var startdate = listEnumerator.get_current().get_item('startdate');
        var enddate = listEnumerator.get_current().get_item('Enddate');
        var termtype = listEnumerator.get_current().get_item('TermType');       
        var Specialty = listEnumerator.get_current().get_item('Specialty');
        var Specialty = listEnumerator.get_current().get_item('Subspecialty');
        $("#TermList").append("<tr align='middle'  class='gradeA'>" +
                                  "<td align='left'>" + startdate +
"</td>" +
                                  "<td align='left'>" + enddate + "</td>"
+
                                  "<td align='left'>" + termtype + "</td>"
+
                                  "<td align='left'>" + Specialty +
"</td>" +
                                  "<td align='left'>" + Specialty +
"</td>" + "</tr>");
function getTermdetailsQueryFails(sender, args) {
    alert(' Error:' + args.get_message());
Now what I want to do is allow user to select rows on the table. Once they select a row I want to get that selected row and search SP list based on the selected value.  Also I would like to make this table with search area to search records.
Can someone please help me to do this, or are there any easy way to do this. Sample code or useful link much appreciate.
Thank you very much.
d.n weerasinghe

Answer 1

Instead of writing in dive each and every time directly,
just have a div in html, and inside the while loop
write and store in the variable like
  output += "<li><a href='#' style='display:none'>" + usernames[i] + " </a> "
                     + "<table id='results' width='100%'>"
                     + "
<tr style='border-bottom:1px silver solid;'>"
                     + "
<td style='width:60px;height:70px;' >"
                     + "
<img alt=\"profile pic\" src= '" + pictureuri[i] + "'  style='width:60px;height:60px;'/>"
                     + "
</td>"
                     + "
<td >"
                     + "
<table style='height:100%'>"
                     + "
<tr>"
                     + "
<td style='padding-padding-vertical-align:top;height:10px' >"
                     + "
<a href='" + personaluri[i] + "' classq='ms-bold ms-subtleLink' style='color: gray; font-size: 12px; font-weight: bold;'>" + tempnames[i] + "</a>"
                     + "
</td>"
                     + "
</tr>"
                     + "
<tr>"
                     + "
<td  style='padding-vertical-align:top;height:50px;color:#ADAEAD;font-size:14px;' >" + deptNames[i]
                     + "
</td>"
                     + "
</tr>"
                     + "
</table>"
                     + "
</td>"
                     + "
</tr>"
                     + "</table>"
                     + "</li>"
and finaly oyutside the loop 
$(#div).html(output);