I am trying to use paging system in a table as mentioned in this post but it doesn't seem to work
What is expected:
What I am getting:
I have placed all the styles in the head section and all the scripts at the bottom of the body section as usual, But I am not getting why it is not working any guess
Code
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=".2.0/css/bootstrap.min.css">
<link rel="stylesheet" href=".10.2/css/jquery.dataTables.min.css">
</head>
<body>
<div class="table-responsive">
<table id="myTable" class="display table" width="100%">
<thead>
<tr>
<th>ENO</th>
<th>EMPName</th>
<th>Country</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>Anusha</td>
<td>India</td>
<td>10000</td>
</tr>
<tr>
<td>002</td>
<td>Charles</td>
<td>United Kingdom</td>
<td>28000</td>
</tr>
<tr>
<td>003</td>
<td>Sravani</td>
<td>Australia</td>
<td>7000</td>
</tr>
<tr>
<td>004</td>
<td>Amar</td>
<td>India</td>
<td>18000</td>
</tr>
<tr>
<td>005</td>
<td>Lakshmi</td>
<td>India</td>
<td>12000</td>
</tr>
</tbody>
</table>
</div>
<script>
$(document).ready(function(){
$('#myTable').dataTable();
});
</script>
<script src=".7.1/jquery.min.js"></script>
<script type="text/javascript" src=".10.2/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src=".2.0/js/bootstrap.min.js"></script>
</body>
</html>
Note: I have deleted some rows from the table to ignore the stack overflow error
I am trying to use paging system in a table as mentioned in this post but it doesn't seem to work
What is expected:
What I am getting:
I have placed all the styles in the head section and all the scripts at the bottom of the body section as usual, But I am not getting why it is not working any guess
Code
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn./bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.datatables/1.10.2/css/jquery.dataTables.min.css">
</head>
<body>
<div class="table-responsive">
<table id="myTable" class="display table" width="100%">
<thead>
<tr>
<th>ENO</th>
<th>EMPName</th>
<th>Country</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>Anusha</td>
<td>India</td>
<td>10000</td>
</tr>
<tr>
<td>002</td>
<td>Charles</td>
<td>United Kingdom</td>
<td>28000</td>
</tr>
<tr>
<td>003</td>
<td>Sravani</td>
<td>Australia</td>
<td>7000</td>
</tr>
<tr>
<td>004</td>
<td>Amar</td>
<td>India</td>
<td>18000</td>
</tr>
<tr>
<td>005</td>
<td>Lakshmi</td>
<td>India</td>
<td>12000</td>
</tr>
</tbody>
</table>
</div>
<script>
$(document).ready(function(){
$('#myTable').dataTable();
});
</script>
<script src="http://ajax.googleapis./ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.datatables/1.10.2/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn./bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
Note: I have deleted some rows from the table to ignore the stack overflow error
Share Improve this question edited Feb 24, 2018 at 20:17 Brian Tompsett - 汤莱恩 5,89372 gold badges61 silver badges133 bronze badges asked Feb 24, 2018 at 19:07 Olivia BrownOlivia Brown 6424 gold badges16 silver badges28 bronze badges2 Answers
Reset to default 2Your script isn't loaded yet. And you are calling on the function.
<script>
$(document).ready(function(){
$('#myTable').dataTable();
});
</script>
<script src="http://ajax.googleapis./ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.datatables/1.10.2/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn./bootstrap/3.2.0/js/bootstrap.min.js"></script>
Place the external script tags above the internal script.
<script src="http://ajax.googleapis./ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.datatables/1.10.2/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn./bootstrap/3.2.0/js/bootstrap.min.js"></script>
/*Now the external js are loaded and you can call any function from here.*/
<script>
$(document).ready(function(){
$('#myTable').dataTable();
});
</script>
Edit 2 as requested:
dataTable() is a method which lies inside the script:
The inline script gets executed as it is loaded. But the external script takes time to load and it is placed below your inline script.
Hence, you are calling the method before it is defined.
Re-order your scripts to look like this:
<script src="http://ajax.googleapis./ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.datatables/1.10.2/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn./bootstrap/3.2.0/js/bootstrap.min.js">
</script>
<script>
$(document).ready(function(){
$('#myTable').dataTable();
});
</script>
This is the result I get:
Hope this helps!