SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: sorting a table

  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2001
    Location
    Northern Virginia
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    sorting a table

    can someone please help me. the following code is the source from my page. i combined the header and the table to create one call so all the cells under a particular heading will be the same size as the header cell.
    when you click on one of the header names, the rows sort assending. my problem is, if you look at it is the reordered rows appear underneath the old rows instead of replacing them.
    Can someone find out what i am doing wrong.
    THANKS
    dan





    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">







    <html>

    <head>
    <title>weapons in database</title>

    <style>
    .tblHeader { POSITION:absolute; LEFT:11px; TOP:51px; WIDTH:834px; HEIGHT:40px; }
    .tblb0dy { POSITION:absolute; LEFT:11px; TOP:105px; WIDTH:834px; HEIGHT:400px; }
    .tbllyr { POSITION:absolute; LEFT:11px; TOP:105px; WIDTH:837px; HEIGHT:400px; CLIP:rect(0 837 400 0); }
    </style>


    <script language=JavaScript>
    if (document.layers) {
    document.write('<scr'+'ipt language=Javascript1.2 src="../scrollns/scrollable.js"></scr'+'ipt>');
    }
    </script>
    <script language=JavaScript>
    <!-- // Begins
    sortColumn = -1;
    sortOrder = "ASC";
    myAlign = new Array('left', 'left', 'left', 'left', 'left', 'left', 'left', 'left', 'left', 'left', 'left', 'left', 'left', 'left', 'left');
    myWidth = new Array(130, 130, 130, 130, 130, 130, 130, 130, 130, 130, 130, 130, 130, 200);
    myHeader = new Array('WeapDesg', 'PartNbr', 'WeapSerial', 'Alt', 'InOn Hand', 'Yield', 'Mod', 'Application', 'PAL', 'Color', 'H1 PartNbr', 'H2 PartNbr', 'H2 PartNbr', 'Red Code', 'Red Reason');
    myDetail = new Array(

    new Array('B61-4', '456789-01', '200000', '123', 'OH', '1', '4', 'BM', 'P', 'Y', '111222-32', '', '', '', ''),

    new Array('B61-4', '456789-01', '200001', '123', 'OH', '1', '4', 'BM', 'P', 'Y', '111222-32', '', '', '', ''),

    new Array('B61-4', '456789-01', '200002', '123', 'OH', '1', '4', 'BM', 'P', 'Y', '111222-32', '', '', '', ''),

    new Array('B61-4', '456789-01', '200003', '123', 'OH', '1', '4', 'BM', 'P', 'Y', '111222-32', '', '', '', ''),

    'end');

    myDetail.length = myDetail.length - 1;

    function setStyle(btn) {
    if (!document.getElementById) {
    alert("Unsupported by browser.");
    return false;
    }
    if (btn.value=="ScrollisOff") {
    document.getElementById("tblBody").style.overflowY = "auto";
    btn.value = "ScrollisOn"
    } else {
    document.getElementById("tblBody").style.overflowY = "visible";
    btn.value = "ScrollisOff"
    }
    return true;
    }
    //------------------------------------------------------------------------
    function sortTable(col) {

    var temp = Number(col);
    sortOrder = (temp != sortColumn) ? "ASC" : ((sortOrder!="DSC")?"DSC":"ASC");
    sortColumn = (isNaN(temp)) ? 0 : temp;
    //alert(sortColumn);
    myDetail.sort(byColumn);
    return buildTable();
    }
    function byColumn(a,b) {
    if (sortOrder == "ASC") {
    if (a[sortColumn] < b[sortColumn]) return -1;
    if (a[sortColumn] > b[sortColumn]) return 1;
    } else {
    if (a[sortColumn] > b[sortColumn]) return -1;
    if (a[sortColumn] < b[sortColumn]) return 1;
    }
    return 0;
    }
    //--------------------------------------------------------
    //function buildHeader() {
    //var str = '<table border="1" cellpadding="2" cellspacing="2">\r';
    //for (var col in myHeader) {
    // alert(myWidth[col]);
    // str += '<th align="center" width="'+myWidth[col]+'">';
    //str += '<a href="Sort by '+myHeader[col]+'"';
    // str += ' title="Sort by '+myHeader[col]+'"';
    // str += ' onClick="return sortTable('+col+');"';
    // str += '>'+myHeader[col]+'</a>';
    // str += '</th>\r';
    // }
    // str += '</table>\r';
    // if (document.getElementById) {
    // document.getElementById("tblHeader").innerHTML = str;
    // document.getElementById("tblBody").className = "tblbody";
    // return;
    // }
    // if (document.layers) {
    // var myDiv = document.layers["tblHeader"].document;
    // myDiv.open();
    // myDiv.write(str);
    // myDiv.close();
    // return;
    //}
    // document.all["tblHeader"].innerHTML = str;
    // document.all["tblBody"].className = "tblbody";
    // return;
    //}
    //----------------------------------------------------------------

    function buildTable() {
    //alert(myWidth);
    var str = '<table border="1" cellpadding="2" cellspacing="2">\r';
    //--------------------------------------------
    //alert(sortColumn);
    if (sortColumn == -1){
    // alert("were are here");
    // var str = '<table border="1" cellpadding="2" cellspacing="2">\r';
    for (var col in myHeader) {
    //alert(myWidth[col]);
    str += '<th align="center" width="'+myWidth[col]+'">';
    str += '<a href="Sort by '+myHeader[col]+'"';
    str += ' title="Sort by '+myHeader[col]+'"';
    str += ' onClick="return sortTable('+col+');"';
    str += '>'+myHeader[col]+'</a>';
    str += '</th>\r';
    }
    //str += '</table>\r';
    }
    //---------------------------------------------------------

    for (var row in myDetail) {
    //alert(row);
    str += '<tr>\r';
    for (var col in myDetail[row]) {
    //alert(row);alert(myWidth[col]);
    str += '<td align="'+myAlign[col]+'" width="'+myWidth[col]+'">';
    if (col==1) {
    var k = Math.round(myDetail[row][col]/1024);
    str += (k>0)?k+'k':myDetail[row][col];
    } else {
    str += myDetail[row][col];
    }
    str += '</td>\r';
    }
    str += '</tr>\r';
    }
    str += '</table>\r';

    //--------------------------------------------------
    if (sortColumn == -1){
    if (document.getElementById) {
    document.getElementById("tblHeader").innerHTML = str;
    document.getElementById("tblBody").className = "tblbody";
    return;
    }
    if (document.layers) {
    var myDiv = document.layers["tblHeader"].document;
    myDiv.open();
    myDiv.write(str);
    myDiv.close();
    return;
    }
    document.all["tblHeader"].innerHTML = str;
    document.all["tblBody"].className = "tblbody";
    return;
    }
    //------------------------------------------------------

    if (document.getElementById) {
    document.getElementById("tblBody").innerHTML = str;
    return false;
    }
    if (document.layers) {
    var myDiv = document.layers["tblBody"].document;
    myDiv.open();
    myDiv.write(str);
    myDiv.close();
    var y = document.layers["tblBody"].pageY + myDiv.height;
    if (y > document.height) {
    document.height = y;
    }
    return false;
    }
    document.all["tblBody"].innerHTML = str;
    return false;
    }
    // Ends -->
    </script>
    </head>

    <body onload=" var rtn = buildTable();">
    <form>







    <div id="tblHeader" class="tblhdr">
    </div>
    <div id="tblBody" class="tbllyr">
    </div>

    </form>



    </body>

    </html>

  2. #2
    Currently Occupied; Till Sunda Andrew-J2000's Avatar
    Join Date
    Aug 2001
    Location
    London
    Posts
    2,475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sry i havent got time to look at it right now, but i suggest you have a look into converting it into xml,

    http://www.xmlpitstop.com/default.as...pe=XMLEXAMPLES

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2001
    Location
    Northern Virginia
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I really don't want to use xml. the code i displayed is almost correct. i am also going to attatch other code which is a different approach. it works just the way i want it to work, but the cells do not line up because the header and the data table are in two seperate calls. maybe this is easier to solve.

    thanks

    dan





    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">







    <html>

    <head>
    <title>weapons in database</title>

    <style>
    .tblHeader { POSITION:absolute; LEFT:11px; TOP:51px; WIDTH:834px; HEIGHT:40px; }
    .tblb0dy { POSITION:absolute; LEFT:11px; TOP:105px; WIDTH:834px; HEIGHT:400px; }
    .tbllyr { POSITION:absolute; LEFT:11px; TOP:105px; WIDTH:837px; HEIGHT:400px; CLIP:rect(0 837 400 0); }
    </style>


    <script language=JavaScript>
    if (document.layers) {
    document.write('<scr'+'ipt language=Javascript1.2 src="../scrollns/scrollable.js"></scr'+'ipt>');
    }
    </script>
    <script language=JavaScript>
    <!-- // Begins
    sortColumn = -1;
    sortOrder = "ASC";
    myAlign = new Array('left', 'left', 'left', 'left', 'left', 'left', 'left', 'left', 'left', 'left', 'left', 'left', 'left', 'left', 'left');
    myWidth = new Array(130, 130, 130, 130, 130, 130, 130, 130, 130, 130, 130, 130, 130, 200);
    myHeader = new Array('WeapDesg', 'PartNbr', 'WeapSerial', 'Alt', 'InOn Hand', 'Yield', 'Mod', 'Application', 'PAL', 'Color', 'H1 PartNbr', 'H2 PartNbr', 'H2 PartNbr', 'Red Code', 'Red Reason');
    myDetail = new Array(

    new Array('W78-0', '853070-01', '400000', '123', 'OH', '1', '0', 'UN', 'B', 'Y', '111222-32', '', '', '', ''),

    new Array('W78-0', '853070-01', '400001', '123', 'OH', '1', '0', 'UN', 'B', 'Y', '111222-32', '', '', '', ''),

    new Array('W78-0', '853070-01', '400002', '123', 'OH', '1', '0', 'UN', 'B', 'Y', '111222-32', '', '', '', ''),

    'end');

    myDetail.length = myDetail.length - 1;

    //function setStyle(btn) {
    //if (!document.getElementById) {
    // alert("Unsupported by browser.");
    // return false;
    // }
    // if (btn.value=="ScrollisOff") {
    // document.getElementById("tblBody").style.overflowY = "auto";
    // btn.value = "ScrollisOn"
    // } else {
    // document.getElementById("tblBody").style.overflowY = "visible";
    // btn.value = "ScrollisOff"
    // }
    // return true;
    //}
    //------------------------------------------------------------------------
    function sortTable(col) {

    var temp = Number(col);
    sortOrder = (temp != sortColumn) ? "ASC" : ((sortOrder!="DSC")?"DSC":"ASC");
    sortColumn = (isNaN(temp)) ? 0 : temp;
    //alert(sortColumn);
    myDetail.sort(byColumn);
    return buildTable();
    }
    //---------------------------
    function byColumn(a,b) {
    if (sortOrder == "ASC") {
    if (a[sortColumn] < b[sortColumn]) return -1;
    if (a[sortColumn] > b[sortColumn]) return 1;
    } else {
    if (a[sortColumn] > b[sortColumn]) return -1;
    if (a[sortColumn] < b[sortColumn]) return 1;
    }
    return 0;
    }
    //--------------------------------------------------------
    function buildHeader() {
    var str = '<table border="1" cellpadding="2" cellspacing="2">\r';
    for (var col in myHeader) {
    //alert(myWidth[col]);
    str += '<th align="center" width="'+myWidth[col]+'">';
    str += '<a href="Sort by '+myHeader[col]+'"';
    str += ' title="Sort by '+myHeader[col]+'"';
    str += ' onClick="return sortTable('+col+');"';
    str += '>'+myHeader[col]+'</a>';
    str += '</th>\r';
    }
    str += '</table>\r';
    if (document.getElementById) {
    document.getElementById("tblHeader").innerHTML = str;
    document.getElementById("tblBody").className = "tblbody";
    return;
    }
    if (document.layers) {
    var myDiv = document.layers["tblHeader"].document;
    myDiv.open();
    myDiv.write(str);
    myDiv.close();
    return;
    }
    document.all["tblHeader"].innerHTML = str;
    document.all["tblBody"].className = "tblbody";
    return;
    }
    //----------------------------------------------------------------

    function buildTable() {
    //alert(myWidth);
    var str = '<table border="1" cellpadding="2" cellspacing="2">\r';
    //---------------header stuff------------
    //alert(sortColumn);
    //if (sortColumn == -1){
    // alert("create header");
    // var str = '<table border="1" cellpadding="2" cellspacing="2">\r';
    // for (var col in myHeader) {
    //alert(myWidth[col]);
    // str += '<th align="center" width="'+myWidth[col]+'">';
    // str += '<a href="Sort by '+myHeader[col]+'"';
    // str += ' title="Sort by '+myHeader[col]+'"';
    // str += ' onClick="return sortTable('+col+');"';
    // str += '>'+myHeader[col]+'</a>';
    // str += '</th>\r';
    // }
    //str += '</table>\r';

    // }
    //---------------------------------------------------------
    //alert("create table");
    for (var row in myDetail) {
    //alert(row);
    str += '<tr>\r';
    for (var col in myDetail[row]) {
    //alert(row);alert(myWidth[col]);
    str += '<td align="'+myAlign[col]+'" width="'+myWidth[col]+'">';
    if (col==1) {
    var k = Math.round(myDetail[row][col]/1024);
    str += (k>0)?k+'k':myDetail[row][col];
    } else {
    str += myDetail[row][col];
    }
    str += '</td>\r';
    }
    str += '</tr>\r';
    }
    str += '</table>\r';

    //-------------------header stuff---------------
    // if (sortColumn == -1){
    // if (document.getElementById) {
    // document.getElementById("tblHeader").innerHTML = str;
    // document.getElementById("tblBody").className = "tblbody";
    // return;
    // }
    //if (document.layers) {
    // var myDiv = document.layers["tblHeader"].document;
    // myDiv.open();
    // myDiv.write(str);
    // myDiv.close();
    // return;
    // }
    // document.all["tblHeader"].innerHTML = str;
    //document.all["tblBody"].className = "tblbody";
    //return;
    //}
    //------------------------------------------------------

    if (document.getElementById) {
    document.getElementById("tblBody").innerHTML = str;
    return false;
    }
    if (document.layers) {
    var myDiv = document.layers["tblBody"].document;
    myDiv.open();
    myDiv.write(str);
    myDiv.close();
    var y = document.layers["tblBody"].pageY + myDiv.height;
    if (y > document.height) {
    document.height = y;
    }
    return false;
    }
    document.all["tblBody"].innerHTML = str;
    return false;
    }
    // Ends -->
    </script>
    </head>

    <body onload="buildHeader(); var rtn = buildTable();">
    <form>







    <div id="tblHeader" class="tblhdr">
    </div>
    <div id="tblBody" class="tbllyr">
    </div>

    </form>



    </body>

    </html>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •