Newbie - Can't get it to work!
Newbie - Can't get it to work!
My friend who is familiar with datatables provided me with some instructions on how to get datatables working. Here is what he said:
@import "datatables/media/css/demo_table.css";
$(document).ready(function(){
$('#the_table').dataTable();
});
instructions:
above script goes in the head of your html document
the two files will go on your server:
extract all the folders from the data tables zip to a folder named datatables (so the path is correct for the import)
and finally your table will need the id="the_table"
ex:
I followed all of the above instructions but it's not working. Here is a link to the page:
http://saacurh2012.com/volunteerChair.php
Please help! I don't know which step I'm missing. I tried to find a "tutorial" on the site, but it seems there's no "getting started" tutorial anyway--just tutorials on how to customize datatables to your needs.
Thanks!
@import "datatables/media/css/demo_table.css";
$(document).ready(function(){
$('#the_table').dataTable();
});
instructions:
above script goes in the head of your html document
the two files will go on your server:
extract all the folders from the data tables zip to a folder named datatables (so the path is correct for the import)
and finally your table will need the id="the_table"
ex:
I followed all of the above instructions but it's not working. Here is a link to the page:
http://saacurh2012.com/volunteerChair.php
Please help! I don't know which step I'm missing. I tried to find a "tutorial" on the site, but it seems there's no "getting started" tutorial anyway--just tutorials on how to customize datatables to your needs.
Thanks!
This discussion has been closed.
Replies
That's one seriously massive web-page you've got there - 5+MB (I gave up at that point I'm afraid) - taking 2+ minutes to load - assuming that it is loading rows for the table - that's going to be a good number of rows. You might want to consider server-side processing if its 50'000+ rows, or Ajax loading with deferred rendering if less to massive improve performance: http://datatables.net/release-datatables/examples/ajax/defer_render.html
Allan
[code]while ($count <= $num_rows)
{
echo "";
echo "";
$firstnamequery = "select FIRSTNAME from VOLUNTEER where ROWNUMBER = $count";
$firstnamequeryresult = mysql_query($firstnamequery);
echo $firstnamequeryresult;
echo "";
echo "";
}
?>
Content copyright 2012-2013. SAACURH 2012. All rights reserved.
Follow @SAACURH2012
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
[/code]
view-source:http://saacurh2012.com/volunteerChair.php
Just to clear things up, I decided to try just focusing on making datatables work. Here is a link:
http://saacurh2012.com/DataTablesTest.html
I've followed the instructions in the getting started blog post you guys linked me... And it still doesn't work! What am I doing wrong?
Thanks
[php]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Hide the script from old browsers --
img0_on = new Image(150,30);
img0_on.src="homeButtonHover.png";
img0_off = new Image(150,30);
img0_off.src="homeButton.png";
img1_on = new Image(150,30);
img1_on.src="campusButtonHover.png";
img1_off = new Image(150,30);
img1_off.src="campusButton.png";
img2_on = new Image(150,30);
img2_on.src="contactButtonHover.png";
img2_off = new Image(150,30);
img2_off.src="contactButton.png";
img3_on = new Image(150,30);
img3_on.src="diningButtonHover.png";
img3_off = new Image(150,30);
img3_off.src="diningButton.png";
img4_on = new Image(150,30);
img4_on.src="entertainmentButtonHover.png";
img4_off = new Image(150,30);
img4_off.src="entertainmentButton.png";
img5_on = new Image(150,30);
img5_on.src="etsuButtonHover.png";
img5_off = new Image(150,30);
img5_off.src="etsuButton.png";
img6_on = new Image(150,30);
img6_on.src="hotelButtonHover.png";
img6_off = new Image(150,30);
img6_off.src="hotelButton.png";
img7_on = new Image(150,30);
img7_on.src="philanthropyButtonHover.png";
img7_off = new Image(150,30);
img7_off.src="philanthropyButton.png";
img8_on = new Image(150,30);
img8_on.src="programmingButtonHover.png";
img8_off = new Image(150,30);
img8_off.src="programmingButton.png";
img9_on = new Image(150,30);
img9_on.src="registrationButtonHover.png";
img9_off = new Image(150,30);
img9_off.src="registrationButton.png";
img10_on = new Image(150,30);
img10_on.src="scheduleButtonHover.png";
img10_off = new Image(150,30);
img10_off.src="scheduleButton.png";
img11_on = new Image(150,30);
img11_on.src="spiritButtonHover.png";
img11_off = new Image(150,30);
img11_off.src="spiritButton.png";
img12_on = new Image(150,30);
img12_on.src="sponsorshipButtonHover.png";
img12_off = new Image(150,30);
img12_off.src="sponsorshipButton.png";
img13_on = new Image(150,30);
img13_on.src="staffButtonHover.png";
img13_off = new Image(150,30);
img13_off.src="staffButton.png";
img14_on = new Image(150,30);
img14_on.src="thingsButtonHover.png";
img14_off = new Image(150,30);
img14_off.src="thingsButton.png";
img15_on = new Image(150,30);
img15_on.src="transportationButtonHover.png";
img15_off = new Image(150,30);
img15_off.src="transportationButton.png";
img16_on = new Image(150,30);
img16_on.src="volunteerButtonHover.png";
img16_off = new Image(150,30);
img16_off.src="volunteerButtonHover.png";
img17_on = new Image(150,30);
img17_on.src="boardroomButtonHover.png";
img17_off = new Image(150,30);
img17_off.src="boardroomButton.png";
function over_image(parm_name)
{
document[parm_name].src = eval(parm_name + "_on.src");
}
function off_image(parm_name)
{
document[parm_name].src = eval(parm_name + "_off.src");
}
// --End Hiding Here -->
@import "datatables/media/css/demo_table.css";
$(document).ready(function(){
$('#the_table').dataTable();
});
SAACURH 2012 - Volunteer
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
Volunteer
Last Name
First Name
Organization
E-mail
Phone
Meeting Time
Available Times on Friday
Available Times on Saturday
Areas Interested
Shirt Size
Requests
<?php
$hostname="saacurh2012.db.9100308.hostedresource.com";
$username="saacurh2012";
$password="StayGold976";
$dbname="saacurh2012";
$connection = mysql_connect($hostname, $username, $password);
mysql_select_db($dbname, $connection);
$query = "SELECT * FROM VOLUNTEER";
$result = mysql_query($query);
$num_rows = mysql_num_rows($result);
$count = 1;
$rownumquery = "select ROW_NUMBER() over (Order by LASTNAME) as ROWNUMBER, LASTNAME, FIRSTNAME, ORGANIZATION, EMAIL, PHONE, MEETINGTIME, AVAILABLETIMESFRI, AVAILABLETIMESSAT, AREASINTERESTED, SHIRTSIZE, REQUEST FROM VOLUNTEER";
$rownumresult = mysql_query($rownumquery);[/php]
continued...
There are three 404 errors on the page:
jquery.js
jquery.dataTables.js
demo_table.css
Which is going to be a good starting point :-)
Allan
[code]
@import "/DataTables/media/css/demo_table.css";
[/code]
Do those three files actually exist in your system at the locations you have specified?
Allan
[code][/code]
There is no file in that folder called jquery.dataTables.js. There IS jquery.dataTables.min.js. I tried changing the name of the path in the code to that instead but it didn't change anything.
Here's my code again for reference...
[code]<!DOCTYPE html>
@import "/datatables/media/css/demo_table.css";
$(document).ready(function(){
$('#the_table').dataTable();
});
SAACURH
Column 1
Column 2
Row 1 Data 1
Row 1 Data 2
Row 2 Data 1
Row 2 Data 2
[/code]