Solved

Using an ajax datatable in classic asp

Posted on 2014-07-18
10
1,247 Views
Last Modified: 2014-07-28
I am trying to incorporate a datatable into my classic asp page and I am having a difficult time with the variable declaration, especially array dimensions.  Not sure if this should be done in the "main" page or in the page that creates the array.  Does it work like an include?  Here is my call to the data:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="/drop_menu/menu.css"> 

<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.1/css/jquery.dataTables.css">
  
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
  
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.1/js/jquery.dataTables.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $('#standings').dataTable( {
        "ajax": '/get_results.asp?series_id=<%=lSeriesID%>&gender=<%=sGender%>&year=<%=iYear%>&age_to=<%=iAgeTo%>'
    } );
} );
</script>

Open in new window


On the same page, here is my html:
                    <table id="standings" class="display" cellspacing="0" width="800px">
                        <thead>
                            <tr>
                                <th valign="bottom">Pl.</th>
                                <th valign="bottom">Name</th>
                                <%For i = 0 To UBound(SeriesRaces, 2) - 1%>
                                    <th style="text-align: center;width: 75px;white-space: nowrap;" valign="bottom"><%=SeriesRaces(1, i)%></th>
                                <%Next%>
                                <th valign="bottom">Total</th>
                            </tr>
                        </thead>
                        <tbody>
                            <%For i = 0 To UBound(Results, 2) - 1%>
                                <tr>
                                    <%If Results(14, i) = "0" Then Exit For%>

                                    <%If i mod 2 = 0 Then%>
                                        <td class="alt"><%=i + 1%>)</td>
                                        <td class="alt">
                                            <a href="javascript:pop('my_results.asp?series_id=<%=lSeriesID%>&amp;my_id=<%=Results(0, i)%>',525,400)"><%=Results(1, i)%>, <%=Results(2, i)%></a>
                                        </td>
                                        <%For j = 0 To UBound(Races, 2) - 1%>
                                            <td class="alt" style="text-align: right;"><%=Results(4 + j, i)%></td>
                                        <%Next%>
                                        <th class="alt" style="text-align: right;"><%=Results(14, i)%></th>
                                    <%Else%>
                                        <td><%=i + 1%>)</td>
                                        <td>
                                            <a href="javascript:pop('my_results.asp?series_id=<%=lSeriesID%>&amp;my_id=<%=Results(0, i)%>',525,400)"><%=Results(1, i)%>, <%=Results(2, i)%></a>
                                        </td>
                                        <%For j = 0 To UBound(Races, 2) - 1%>
                                            <td style="text-align: right;"><%=Results(4 + j, i)%></td>
                                        <%Next%>
                                        <th style="text-align: right;"><%=Results(14, i)%></th>
                                    <%End If%>
                                </tr>
                            <%Next%>
                        </tbody>
                        <tfoot>
                            <tr>
                                <th rowspan="2" valign="bottom">Pl.</th>
                                <th rowspan="2" valign="bottom">Name</th>
                                <%For i = 0 To UBound(SeriesRaces, 2) - 1%>
                                    <th style="text-align: center;width: 75px;" valign="bottom"><%=SeriesRaces(1, i)%></th>
                                <%Next%>
                                <th valign="bottom">Total</th>
                            </tr>
                        </tfoot>
                    </table>

Open in new window


What should be declared/dimensioned the "get_results.asp" page and what should be in this page?
0
Comment
Question by:Bob Schneider
  • 5
  • 4
10 Comments
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 40207820
I think you are trying to mix up server side and client side.

Looking at the sample, you only need the table head and footer in your html.    http://www.datatables.net/examples/data_sources/ajax.html

<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
 
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>

Open in new window

They show the output like this
{
  "data": [
    [
      "Tiger Nixon",
      "System Architect",
      "Edinburgh",
      "5421",
      "2011/04/25",
      "$320,800"
    ],
    [
      "Garrett Winters",
      "Accountant",
      "Tokyo",
      "8422",
      "2011/07/25",
      "$170,750"
    ]
]
}

Open in new window


For this very sample output, you can see how I created the objects here http://www.experts-exchange.com/Programming/Languages/Scripting/ASP/Q_28469969.html#a40206249
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<%Response.Buffer = false%>
<!-- #include file="db_connection.inc" --> 
{"data": [
<%

Set oConn=Server.CreateObject("ADODB.Connection") 
oConn.Open strConnect
strSQL1 = "SELECT top 50 dbo.Artists.artistname, dbo.Recordings.RecordingTitle, dbo.Tracks.TrackTitle, dbo.Tracks.TrackFileName FROM  dbo.Artists INNER JOIN dbo.Recordings ON dbo.Artists.artistid = dbo.Recordings.ArtistID INNER JOIN dbo.Tracks ON dbo.Recordings.RecordingID = dbo.Tracks.RecordingID "
Set oRs1=oConn.Execute(strSQL1,lngRecs,1)


' send data to an array'
if not oRs1.eof then
	myArray=oRs1.getrows()
end if

oRs1.Close
Set oRs1 = Nothing
oConn.Close
Set oConn = Nothing



for r = LBound (myArray,2) to UBound(myArray,2)
	artistname 		= myArray(0, r)
	RecordingTitle 	= myArray(1, r)
	TrackTitle 		= myArray(2, r)
	TrackFileName 	= myArray(3, r)

	TrackFileUrl = replace(TrackFileName,"M:\Music\","\mp3\")

	'M:\Music\MP3MusicAlbums\!!!\Louden Up Now\01-Louden Up Now-When The Going Gets Tough The Tough Gets Krazee.mp3

	' convert to'
	'\mp3\MP3MusicAlbums\!!!\Louden Up Now\01-Louden Up Now-When The Going Gets Tough The Tough Gets Krazee.mp3

	TrackFileLink = "<a href="&"[x]"&TrackFileUrl&"[x]"&">"&TrackTitle&"</a>"

    theURL = replace("["&chr(34)&artistname&chr(34)&","&chr(34)&RecordingTitle&chr(34)&","&chr(34)&TrackTitle&chr(34)&","&chr(34)&TrackFileLink&chr(34)&"]","\","\\")
    theURL = replace(theURL,"[x]","\"&chr(34))
    response.write theURL

        if r < UBound(myArray,2) then
    	response.write ","
    end if


next


%>
]}

Open in new window


The above is using getrows to make the array.  To make a nice json, you have to escape some characters such as slashes.  Run your asp page that generates the output and use a linter to see if the output is in correct form.   http://jsonlint.com/

Notice there is no looping in the main page, that is taken care of by the datatables js code.

Go back the super simple sample I showed you and start adding your own data and table.  If it does not work, more than likely it is the forming of the json.
0
 
LVL 52

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 500 total points
ID: 40207828
On the output page, surf to your url below replacing your asp tags for hard coded data.  Then put the results to the linter and that is a good first step.
/get_results.asp?series_id=<%=lSeriesID%>&gender=<%=sGender%>&year=<%=iYear%>&age_to=<%=iAgeTo%>

Open in new window

0
 
LVL 52

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 500 total points
ID: 40207841
This is what your table should be although I would get rid of the inline styles for now.  The variable table headings we can update with jquery.  For now, leave them hard coded with something.

 <table id="standings" class="display" cellspacing="0" width="800px">
                        <thead>
                            <tr>
                                <th valign="bottom">Pl.</th>
                                <th valign="bottom">Name</th>
                                <!-- TO DO: allow jquery to update text -->
                                    <th style="text-align: center;width: 75px;white-space: nowrap;">title to be changed later</th>
                                <th valign="bottom">Total</th>
                            </tr>
                        </thead>
                        <!-- remove tbody -->
                        <tfoot>
                            <tr>
                                <th rowspan="2" valign="bottom">Pl.</th>
                                <th rowspan="2" valign="bottom">Name</th>
                                <!-- TO DO: use jquyer to update data text -->
                                    <th style="text-align: center;width: 75px;" valign="bottom"></th>
                                
                                <th valign="bottom">Total</th>
                            </tr>
                        </tfoot>
                    </table>

Open in new window

0
Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

 

Author Comment

by:Bob Schneider
ID: 40209680
0
 
LVL 52

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 500 total points
ID: 40209739
Ok, now we need to work on your front end. I am pretty tied up today.  I will take a look later.  We need to set this up so jquery grabs what is in the drop down and sets some of the dynamic features instead of using serverside asp.
0
 

Author Comment

by:Bob Schneider
ID: 40209765
Take your time.  I will read up on this in the interim.  Whatever they are paying you, its not enough. :)
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 40209772
Pride and T-Shirts.  The real secret is we learn more by helping to figure out other's problems than by asking questions.
0
 

Author Comment

by:Bob Schneider
ID: 40225351
Ok so I am starting to get through this.  Here is my question:  what is in this text file and how is it created?  Is that a text file created from the asp (file system object) using the data in the array?

"ajax": '../ajax/data/arrays.txt'
0
 

Author Comment

by:Bob Schneider
ID: 40225479
I'm going to close this one out and re-focus the question because I have made a ton of progress.
0

Featured Post

Complete VMware vSphere® ESX(i) & Hyper-V Backup

Capture your entire system, including the host, with patented disk imaging integrated with VMware VADP / Microsoft VSS and RCT. RTOs is as low as 15 seconds with Acronis Active Restore™. You can enjoy unlimited P2V/V2V migrations from any source (even from a different hypervisor)

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Link a VBS to an HTA 6 36
Add box and text color changing for everything 1 26
PHP AJAX Wordpress 9 21
Button to go back 3 25
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

778 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question