I am trying to use both datatables and datepicker in the same page. Can you help me out.
I have a html page for datepicker which works OK: (ignore the alert when you load it)
http://www.renderplus.com/archon_php/test_datepicker.htm
I have a page for datatables which works OK (ignore the alert when you load it)
http://www.renderplus.com/archon_php/test_datepicker.htm
But when I combine them both onto one page, I get a problem where the init function for datatables is called twice.
In the middle of initializing datepicker the start function is run again. You can see this because of the alerts "at1", "at2", etc. which are being displayed twice.
I suspect this is related to including .js for Jquery datepicker and .js for datatables.
Here is the html file which tries to do both:
I have a html page for datepicker which works OK: (ignore the alert when you load it)
http://www.renderplus.com/archon_php/test_datepicker.htm
I have a page for datatables which works OK (ignore the alert when you load it)
http://www.renderplus.com/archon_php/test_datepicker.htm
But when I combine them both onto one page, I get a problem where the init function for datatables is called twice.
In the middle of initializing datepicker the start function is run again. You can see this because of the alerts "at1", "at2", etc. which are being displayed twice.
I suspect this is related to including .js for Jquery datepicker and .js for datatables.
Here is the html file which tries to do both:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/media/images/favicon.ico" />
<title>DataTables example</title>
<style type="text/css" title="currentStyle">
@import "../DataTables-1.7.4/media/css/demo_page.css";
@import "../DataTables-1.7.4/media/css/demo_table.css";
</style>
<!-- DatePicker JS -->
<link type="text/css" href="../jquery/css/ui-lightness/jquery-ui-1.8.6.custom.css" rel="stylesheet" />
<script type="text/javascript" src="../jquery/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery/js/jquery-ui-1.8.6.custom.min.js"></script>
<!-- DataTales JS -->
<script type="text/javascript" language="javascript" src="../DataTables-1.7.4/media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="../DataTables-1.7.4/media/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
alert("Set dataTable");
$('#example').dataTable( {
"aaSorting": [[ 4, "desc" ]]
} );
alert("Set datepicker");
$( "#datepicker" ).datepicker();
} );
</script>
<title>test_both</title>
</head>
<body>
<div class="demo">
<p>Date: <input type="text" id="datepicker"></p>
</div><!-- End demo -->
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr class="gradeX">
<td>Trident</td>
<td>Internet
Explorer 4.0</td>
<td>Win 95+</td>
<td class="center">4</td>
<td class="center">X</td>
</tr>
<tr class="gradeC">
<td>Trident</td>
<td>Internet
Explorer 5.0</td>
<td>Win 95+</td>
<td class="center">5</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>Trident</td>
<td>Internet
Explorer 5.5</td>
<td>Win 95+</td>
<td class="center">5.5</td>
<td class="center">A</td>
</tr>
</table>
</body>
</html>