Click here to Skip to main content
Rate this: bad
Please Sign up or sign in to vote.
See more: table Dynamics
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() {
        type: 'POST',
        url: 'AppHome.aspx/Select',
        contentType: 'application/json',
        data: "{}",
        dataType: 'json',
        processData: false,
        success: function (response) {
        error: function (xhr, ajaxOptions, thrownError) {
            OnErrorUserEnrolledEvents(xhr.status, thrownError);
    return true;
function OnErrorUserEnrolledEvents(status, error) {
    alert("Some information cann't be loaded, sorry for inconvenience");
function OnSuccessUserEnrolledEvents(result) {
    if (result.d == '') {
        var eventlist = "<div>Sorry! You have not enrolled for any event</div>";
        document.getElementById("Msg").InnerHTML = eventlist;
        //return true;
    else {
        Sel = eval('(' + result.d + ')');
        if (Sel.length == 0) {
            eventlist = "<div>Sorry! You have not enrolled for any event</div>";
            document.getElementById("Msg").InnerHTML = eventlist;
        else {
            var table = document.getElementById("dataTable");
//            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 "Idtext": newcell.childNodes[0].innerHTML = Emp_Id;
                        case "BitCheck":
                                if (Bit == "false") {
                                    newcell.childNodes[0].checked = false;
                                else {
                                    newcell.childNodes[0].checked = true;
                        case "Nametext": newcell.childNodes[0].innerHTML = Emp_Name;
Posted 13-Apr-12 1:43am
Edited 13-Apr-12 8:41am
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)

Advertise | Privacy | Mobile
Web01 | 2.8.150302.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