数据表不起作用
[英]Datatable is not working
问题描述
i am using datatable to search the table content.but datatable cant work in my html code 
我正在使用数据表搜索表content。但是数据表不能在我的html代码中工作
I want to introduce filtering and sorting functionality to my table .all the table library included in the html script 我想为我的表引入过滤和排序功能。html脚本中包含的所有表库
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
</head>
<body>
<script type="text/javascript">
$('table').dataTable();
</script>
<table style="margin-top:100px">
<thead>
<tr class='header'>
<th>Name</th>
<th>Party</th>
<th>Constituency</th>
<th>Gender</th>
</tr>
</thead>
<tbody><tr>
<th>pom</th>
<th>1</th>
<th>bachni</th>
<th>male</th>
</tr>
<tr>
<th>santosh</th>
<th>2</th>
<th>bachni</th>
<th>male</th>
</tr>
<tr>
<th>deepak</th>
<th>3</th>
<th>bachni</th>
<th>male</th>
</tr>
<tr>
<th>sudhir</th>
<th>1</th>
<th>savarde</th>
<th>male</th>
</tr>
</tbody>
</table>
</body>
</html>
2 个解决方案
解决方案1
2 2014-04-04 07:41:13
Since you've placed your script before your DOM, you need to put your jQuery code inside DOM ready handler $(document).ready(function() {...}); 由于您已将脚本放置在DOM之前，因此需要将jQuery代码放入DOM准备就绪处理程序$(document).ready(function() {...}); or shorter form $(function(){...}): 或更短的$(function(){...}):
This step is used to make sure all of your DOM elements have been loaded to the page before executing your jQuery code: 此步骤用于确保在执行jQuery代码之前已将所有DOM元素均加载到页面中：
$(function() {
$('table').dataTable();
});
解决方案2
1 已采纳 2014-04-04 07:57:33
Try this code now work fine: 现在尝试下面的代码可以正常工作：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
</head>
<body>
<script type="text/javascript">
$('table').dataTable();
</script>
<table style="margin-top:100px" class="table table-striped table-bordered datatable dataTable">
<thead>
<tr class='header'>
<th>Name</th>
<th>Party</th>
<th>Constituency</th>
<th>Gender</th>
</tr>
</thead>
<tbody><tr>
<th>pom</th>
<th>1</th>
<th>bachni</th>
<th>male</th>
</tr>
<tr>
<th>santosh</th>
<th>2</th>
<th>bachni</th>
<th>male</th>
</tr>
<tr>
<th>deepak</th>
<th>3</th>
<th>bachni</th>
<th>male</th>
</tr>
<tr>
<th>sudhir</th>
<th>1</th>
<th>savarde</th>
<th>male</th>
</tr>
</tbody>
</table>
<script>
$(function() {
$('table').dataTable();
});
</script>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.