Question

我正在使用数据表来搜索表格内容。但数据表无法在我的HTML代码中工作我想在我的表中引入过滤和排序功能。所有包含在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>

Answer 1

由于您已将脚本放在DOM之前，因此需要将jQuery代码放在 DOM ready 处理程序$(document).ready(function() {...});或更短格式$(function(){...}):

此步骤用于确保在执行jQuery代码之前已将所有DOM元素加载到页面中：

$(function() {
   $('table').dataTable();
});

Answer 2

现在尝试使用此代码正常工作：

<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>

please check this fiddle

数据表无法正常工作

2 个答案: