Leads page: dynamically creating and sorting a table

If your application is data intensive, and you want the user to be able to sort the data after it is received, then using the full power of DHTML to create, update, and rearrange HTML elements on a page can be superior to dynamically generating a page on the server that becomes a static page on the user's mobile device. For a full listing of the DHTML source code for this page, see Leads page sample: dynamically creating and sorting a table.

The leads page displays four tabs: Leads, Accts, Contacts, and Opps. Initially, the page displays the Leads tab, as shown in the figure below.

Tapping on a tab displays the table for the type of information identified by the tab label. Tapping the Accts tab displays the table of accounts information, as shown in the following figure.

Tapping on a column heading in a table sorts the table by that column's data. For example, tapping the Name column heading in the Accts table sorts that table on the Name column, as shown in the following figure.

Leads page displaying Accts table, sorted by Name

All of the tables are created dynamically. The HTML for the <div> where the tables will be displayed is initially just a placeholder. The id tells the DHTML code where to do its work:

<div id="TabTablesDiv"> 
<!---------- START TABS CONTENT ----------> 
</div>

All of the data arrives in JavaScript arrays within the page. The code below assigns an index value to the Leads tab and initializes an array to hold the Leads tab data:

var intLM_LeadsTab = 1; 
var arrLM_Leads =[ 
    ["Name", "Company", "Status"], 
    ["Chambers, B.", "Starco", "Open"], 
    ["Johnson, E.", "J & A Inc.", "Closed"], 
    ["Perez, R.", "Lux. P&T", "Working"], 
    ["Smyth, S.", "Gen. Comp.", "Contacted"], 
    ["Weller, P", "Lexin Ind.", "Open"], 
    ["Williams, M.", "Telco GBMH", "Working"], 
    ["Rock, F.", "US Airways", "Open"], 
    ["Webb, S.", "Air, Inc.", "Closed"] 
    ];

All of the tables are dynamically generated from the array data. The code below creates the basic table structure and calls a function to create each table's rows and cells and then load the table's data:

objMasterTabsDIV = document.getElementById("TabTablesDiv");

for (I = 1; I <= 4; I++) 
{ 
    // 
    // DIV 
    // 
    objDIV = document.createElement("DIV"); 
    objMasterTabsDIV.appendChild(objDIV) 
    objDIV.id="MainT" + I + "Div"; 
    objDIV.style.display = (I == 1) ? "block" : "none";

    // 
    // DIV => TABLE 
    // 
    objTABLE = document.createElement("TABLE"); 
    objDIV.appendChild(objTABLE); 
    objTABLE.id = "Table" + I; 
    objTABLE.border = "1"; 
    objTABLE.cellSpacing = "0"; 
    objTABLE.width = "134px"; 
    objTABLE.style.fontSize = "8px";

    // 
    // DIV => TABLE => TBODY 
    // 
    objTBODY = document.createElement("TBODY"); 
    objTABLE.appendChild(objTBODY); 
    // 
    // DIV => TABLE => TBODY 
    //     => BR 
    // 
    objBR = document.createElement("BR"); 
    objDIV.appendChild(objBR); 
} // for

// 
// Dynamically load the data into the Lead 
// Manager tables. (Adds the TR and TD 
// elements to the above tables.) 
// 
LoadLeadManagerTable("Table1", arrLM_Leads); 
LoadLeadManagerTable("Table2", arrLM_Accounts); 
LoadLeadManagerTable("Table3", arrLM_Contacts); 
LoadLeadManagerTable("Table4", arrLM_Opps);

return;

The code below is the first part of the LoadLeadManagerTable() function. This part deletes any existing table rows:

function LoadLeadManagerTable(strTableName, arrTableData) 
{ 
    var objTable; 
    var eleTR; 
    var intTableRows; 
    var intTableCols; 
    var i;

    if (arguments.length != 2) 
        throw new Error("function LoadLeadManagerTable()
        incorrectly called");

    fChangeColor = 0;

    objTable = document.getElementById(strTableName);

    // 
    // Delete the existing rows in the table. 
    // 
    intTableRows = objTable.rows.length;

    for (i = 0; i < intTableRows; i++) 
    objTable.deleteRow(0);

    // 
    // Add the records to the table. 
    // 
    fChangeColor = 0;

    // 
    // How many columns does this table have? 
    // 
    if (arrTableData.length > 0) 
    intTableCols = arrTableData[0].length

The code below is the second part of the LoadLeadManagerTable() function. This part creates a table's rows and cells and loads a table's data from the associated array:

    // 
    // Load the data into the table. 
    // 
    for (i = 0; i < arrTableData.length; i++) 
    { 
        // 
        // Insert a new row for each record: adds a TR element. 
        // 
        eleTR = objTable.insertRow(i);

        if (i == 0) { 
            eleTR.style.color = "white"; 
            eleTR.align = "center"; 
            eleTR.valign = "top"; 
            } 
        else { 
            eleTR.style.color = "black"; 
            }

        // 
        // Add cells to the row: add TD elements. 
        // 
        for (j = 0; j < intTableCols; j++) 
        {

            cell = eleTR.insertCell(j); 
            cell.border = 1;
            
            if (i == 0) {
                cell.onclick = SortLeadManagerTable; 
                cell.style.backgroundColor = "navy";
                } 
            else {
                cell.style.backgroundColor = (fChangeColor == 1)
            ? "aqua" : "white"; 
                } 
            cell.appendChild(document.createTextNode(arrTableData[i][j])); 
        } // for

        // 
        // Create the alternating row colors. 
        // 
        if (fChangeColor == 1) 
            fChangeColor = 0; 
        else 
            fChangeColor = 1;
    } // for add rows

    return; 

} // LoadLeadManagerTable

When the user taps a column heading, a sort routine is called to sort the array data for the table in order by that column. DHTML code then reloads the existing table with the sorted array values, again using the LoadLeadManagerTable() function, without having to regenerate the table. The only thing that changes is the values in the table.

Send feedback about this page using email.