asked on

sorttable.js not working

I have a javascript function that gets called on body load (<body onload="">).
That function makes an AJAX call my C# code to generate a table.
The C# code send the table back to my javascript code and the javascript code applies the table to my <div>

The sortable.js file is set in the header. problem is the sort function doesn't work. Any ideas?

Thanks

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="overview.aspx.cs" Inherits="Overview" %>
<%@ Assembly Name="System.DirectoryServices, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<link rel="stylesheet" href="overview.css" type="text/css"/>
        <script src="sorttable.js" type="text/javascript"></script>
        <script type="text/javascript">
            function GetDatabase()
            {
                var xmlhttp = new XMLHttpRequest();
                xmlhttp.onreadystatechange = function ()
                {
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
                    {
                        document.getElementById("myDiv").innerHTML = "<table id=" + "\"mainTable\"" + " border=" + "\"1\"" + " class=" + "\"sortable\"" + ">" +  xmlhttp.responseText + "</table>";
                    }
                }
                xmlhttp.open("POST", "overview.aspx/GetDatabase", true);
                xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                xmlhttp.send("Method=" + encodeURIComponent("GetDatabase"));
            }

         </script>
	</head>

	<body onload="GetDatabase()">
	<center>
        <table border="1">
            <tr>
                <td>
                    <input type="button" id="GetSizeData" value="Get Space Data" onclick="GetVolumeSpace()" />
                </td>
            </tr>
            <tr>
                <td>
                    <label id="label1"></label>
                </td>
            </tr>
            </table>

        <div id="myDiv"></div>
	</center>
	</body>
</html>

Open in new window

Rainer Jeschor

Hi,
could you please add the information, which "sortable.js" plugin/library you are using?

Normally you will have to initialize the functionality somehow and in your case this would be in your readystate function:

 if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
                    {
                        document.getElementById("myDiv").innerHTML = "<table id=" + "\"mainTable\"" + " border=" + "\"1\"" + " class=" + "\"sortable\"" + ">" +  xmlhttp.responseText + "</table>";
                        // Here should be the initialization
                    }

Open in new window

But again, that depends on your sortable library. Also you added a class "sortable" to the table, but is this class defined in the overview.css file?

Thanks.
Rainer

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Tim

ASKER

Awesome. Just what was needed.

Thank you much.

Julian Hansen

You are welcome - good luck with your project.

Tim

ASKER

Thanks now onto fixing the sorting issues with this algorithm.

For letters it sorts caps a to z first then sorts lowercase a to z. Need it to sort a to z case insensitive.

For numbers it seems to only look at the first digit to sort to it put 1 before 10. 9 before 100 etc...

Julian Hansen

It will do that - it is a lexicographic sort which means it will sort it the way you are seeing it.

If you want more than this you might want to look at something like jQuery Data Tables

https://www.datatables.net/

It has more options and caters to plug-ins - there may be a sorting plugin available (or you can write one) to sort the way you want.