Issue rendering DataTable and Foundation Modal on the same page
Issue rendering DataTable and Foundation Modal on the same page
OKC_Dave
Posts: 3Questions: 1Answers: 0
All,
I can implement each separately but not on the same page. My code has 4 different js references commented out, each with different, incorrect results.
Thanks for the help in advance. My html:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<!-- <link rel="stylesheet" type="text/css" href="style.css"> -->
<title>DataTable With Modal</title>
<!-- DataTable styling - partial modal (grayed screen - no prompt box)
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script> -->
<!-- Table with partial modal (grayed screen - no prompt box)-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!-- Table only - no modal
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> -->
<!-- partial DataTable Styling - No modal functionality
<script type="text/javascript" src="jQuery-2.2.4/jquery-2.2.4.min.js"></script> -->
<!-- Full DataTable Styling - No modal functionality
<script type="text/javascript" src="jquery.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.js"></script>
<!-- Modal references -->
<link rel="stylesheet" href="reveal.css">
<script type="text/javascript" src="jquery.reveal.js"></script>
<!-- DataTables references -->
<link rel="stylesheet" type="text/css" href="DataTables-1.10.13/css/jquery.dataTables.min.css">
<script type="text/javascript" language="javascript" src="DataTables-1.10.13/js/jquery.dataTables.min.js"></script>
<!--<link rel="stylesheet" type="text/css" href="DataTables-1.10.13/css/jquery.dataTables.css">
<script type="text/javascript" language="javascript" src="DataTables-1.10.13/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="DataTables-1.10.13/css/dataTables.foundation.css"> -->
<link rel="stylesheet" type="text/css" href="DataTables-1.10.13/css/dataTables.foundation.min.css">
<!-- Foundation -->
<link rel="stylesheet" type="text/css" href="Foundation-5.5.2/css/foundation.min.css">
<link rel="stylesheet" type="text/css" href="Foundation-5.5.2/css/foundation.css">
<script type="text/javascript" language="javascript" src="Foundation-5.5.2/js/foundation.min.js"></script>
<!--<script type="text/javascript" language="javascript" src="Foundation-5.5.2/js/foundation.js"></script> -->
</head>
<body>
<a href="#" class="big-link" data-reveal-id="myModal">
Click Here to Pop a Modal!!
</a>
<div id="myModal" class="reveal-modal">
<h1>Reveal Modal Goodness</h1>
<p>This is a default modal in all its glory, but any of the styles here can easily be changed in the CSS.</p>
<a class="close-reveal-modal">×</a>
</div>
<table id="table_id" class="display">
<thead>
<tr>
<th>Priority</th>
<th>Work Order Name</th>
<th>Work Order Number</th>
<th>Service Code</th>
<th>Customers Affected</th>
<th>Address</th>
<th>Work Order Type</th>
<th>Teams</th>
</tr>
</thead>
<tbody>
<tr>
<td >Reporting</td>
<td>PD-12082016-00001</td>
<td>45</td>
<td>969</td>
<td>303</td>
<td>123 N. 1st St</td>
<td>Row 1 Data 7</td>
<td>Team Data</td>
</tr>
<tr>
<td >Received</td>
<td>PD-12082016-00002</td>
<td>35</td>
<td>14</td>
<td>3</td>
<td>145 N. 5th St</td>
<td>Row 2 Data 7</td>
<td>Team Data</td>
</tr>
<tr>
<td >In Clear Follow Up</td>
<td>PD-12082016-00003</td>
<td>55</td>
<td>5</td>
<td>47</td>
<td>145 N. 6th St</td>
<td>Row 1 Data 7</td>
<td>Team Data</td>
</tr>
</tbody>
</table>
<script>
$(document).foundation();
</script>
</body>
<script >
$(document).ready( function () {
$('#table_id').DataTable({
//pageLength: 10,
});
alert("Initiating Table");
} );
</script>
<style type="text/css">
table{
text-align: center;
}
th .sorting aria-label{line-height: 1;}
body { font-family: "HelveticaNeue","Helvetica-Neue", "Helvetica", "Arial", sans-serif; }
.big-link { display:block; margin-top: 100px; text-align: center; font-size: 70px; color: #06f; }
</style>
</html>
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
Only include one set of styling files for DataTables. They will conflict if you include multiple.
For example, if you want to use the Foundation integration, include the
*.foundation.cssfiles, but not the DataTables ones.The download builder might help here as it will tell you exactly what you need to include based on the options selected.
Allan
Thanks allan!
That didn't quite get my issue solved but that is kind of what I think my issue is, too many references. I'm just not sure what I need to reference for a DataTable and a Modal using the Foundation styling.
I did use the download builder, bringing in only what I needed for this proof of concept but still no luck.
I have searched for examples of both on a page and not found any.
Thank you...
Are you able to give me a link to your page so I can take a look please?
Thanks,
Allan
Thanks allan. With your suggestion above I finally got the correct references and it now works!