Click here to Skip to main content
12,078,489 members (45,867 online)
Rate this:
 
Please Sign up or sign in to vote.
See more: table
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() {
 
    $.ajax({
        type: 'POST',
        url: 'AppHome.aspx/Select',
        contentType: 'application/json',
        data: "{}",
        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("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;
                            break;
                        case "BitCheck":
                            {
                                if (Bit == "false") {
                                    newcell.childNodes[0].checked = false;
                                }
                                else {
                                    newcell.childNodes[0].checked = true;
                                }
                            }
                            break;
                        case "Nametext": newcell.childNodes[0].innerHTML = Emp_Name;
                            break;
                    }
                }
            }
        }
    }
}
Posted 13-Apr-12 1:43am
Edited 13-Apr-12 8:41am
v2
Comments
ryanb31 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
Top Experts
Last 24hrsThis month


Advertise | Privacy | Mobile
Web01 | 2.8.160212.1 | Last Updated 13 Apr 2012
Copyright © CodeProject, 1999-2016
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