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() {
 
    $.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 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 Sergey Alexandrovich Kryukov 269
1 OriginalGriff 240
2 CPallini 195
3 Maciej Los 177
4 BillWoodruff 173
0 OriginalGriff 5,655
1 DamithSL 4,506
2 Maciej Los 3,997
3 Kornfeld Eliyahu Peter 3,480
4 Sergey Alexandrovich Kryukov 3,180


Advertise | Privacy | Mobile
Web03 | 2.8.141216.1 | Last Updated 13 Apr 2012
Copyright © CodeProject, 1999-2014
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