数据表不工作

Datatable is not working

本文关键字：工作 数据表      更新时间：2023-09-26

我正在使用数据表来搜索表内容，但是数据表无法在我的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>

由于你已经把脚本放在DOM之前，你需要把你的jQuery代码放在DOM就绪的处理程序$(document).ready(function() {...});或更短的$(function(){...}):

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

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

试试这段代码现在工作正常： 

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

请检查此小提琴

相关文章：