Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: table Dynamics
hi

Below is the code I use to build an HTML table on the fly (using JSON data received from the server).

At first, I was just happy to make this happen (display the table), I guess now I need to work on efficiency. I want to know how to go to a static "Loading" display.

Suggestions for --> efficiency? Possibly a better way to build the table? Or maybe not a table, but some other "table" like display
 
function SelEmployee() {
 
<pre>
$.ajax({
    type: 'POST',
    url: 'AppHome.aspx/Select',
    contentType: 'application/json',
    data: &quot;{}&quot;,
    dataType: 'json',
    processData: false,
 
    success: function (response) {
        OnSuccessUserEnrolledEvents(response);
    },
    error: function (xhr, ajaxOptions, thrownError) {
        OnErrorUserEnrolledEvents(xhr.status, thrownError);
    }
});
return true;

}

function OnErrorUserEnrolledEvents(status, error) {
 
alert(&quot;Some information cann't be loaded, sorry for inconvenience&quot;);

}

function OnSuccessUserEnrolledEvents(result) {
 
if (result.d == '') {
    var eventlist = &quot;&lt;div&gt;Sorry! You have not enrolled for any event&lt;/div&gt;&quot;;
    document.getElementById(&quot;Msg&quot;).InnerHTML = eventlist;
    //return true;
}
else {
    Sel = eval('(' + result.d + ')');
    if (Sel.length == 0) {
        eventlist = &quot;&lt;div&gt;Sorry! You have not enrolled for any event&lt;/div&gt;&quot;;
        document.getElementById(&quot;Msg&quot;).InnerHTML = eventlist;
    }
    else {
        var table = document.getElementById(&quot;dataTable&quot;);

// var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for (var i = 0; i < Sel.length; i++) {
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var Bit = (Sel[i].Bit_Value).toString();
var Emp_Id = (Sel[i].Employee_Id).toString();
var Emp_Name = (Sel[i].Employee_Name).toString();
for (var j = 0; j < colCount; j++) {
 
                var newcell = row.insertCell(j);
                newcell.innerHTML = table.rows[i].cells[j].innerHTML;
                switch (newcell.childNodes[0].id) {
                    case &quot;Idtext&quot;: newcell.childNodes[0].innerHTML = Emp_Id;
                        break;
                    case &quot;BitCheck&quot;:
                        {
                            if (Bit == &quot;false&quot;) {
                                newcell.childNodes[0].checked = false;
                            }
                            else {
                                newcell.childNodes[0].checked = true;
                            }
                        }
                        break;
                    case &quot;Nametext&quot;: newcell.childNodes[0].innerHTML = Emp_Name;
                        break;
                }
            }
        }
    }
}

}
Posted 13-Apr-12 1:43am
Edited 13-Apr-12 8:41am
v2
Comments
ryanb31 at 13-Apr-12 8:22am
   
I don't follow. You need to load the 5 tables but want it faster? Is that what you are asking? You could use some AJAX and put up a twirly circle or something.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 OriginalGriff 475
1 Sergey Alexandrovich Kryukov 405
2 Maciej Los 290
3 ProgramFOX 265
4 CHill60 200
0 OriginalGriff 490
1 Sergey Alexandrovich Kryukov 405
2 Maciej Los 285
3 ProgramFOX 265
4 Peter Leow 210


Advertise | Privacy | Mobile
Web02 | 2.8.150331.1 | Last Updated 13 Apr 2012
Copyright © CodeProject, 1999-2015
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100