javascript - Jquery 数据表插件不起作用

Question

我有一个 tabe，想在该代码中使用 jquery datable 插件，但它不起作用。我尝试下载 javascript 和 css 文件并使用它们。帮助我找到解决方案。这是我的代码。

<script src="required/jquery-3.2.1.js" type="text/javascript"></script>
<link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />   

<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>

<table class="display" cellspacing="0" width="100%" id="example">
    <tr>
        <th>Question:</th>
        <th>option1</th>
        <th>option2</th>
        <th>option3</th>
        <th>option4</th>
        <th>Right option</th>
        <th>Action</th>
    </tr>
    <tr><td>Who is the father of science?</td>
        <td>Sir Issac Newton</td>
        <td>Albert Einstein</td>
        <td>Michel Farady</td>
        <td>Robert Hook</td>
        <td>2</td>
        <td>Edit Delete</td>
    </tr>
    <tr>
        <td>Who is father of computer?</td>
        <td>Charles Babbage</td>
        <td>Lady Ada </td>
        <td>Blaise Pascal</td>
        <td>Bill Gates</td>
        <td>1</td>
        <td>Edit Delete</td>
    </tr>
    <tr>
        <td>rame</td>
        <td>a</td>
        <td>s</td>
        <td>a</td>
        <td>a</td>
        <td>1</td>
        <td>Edit Delete</td>
    </tr>
    <tr>
        <td>q</td>
        <td>a</td>
        <td>e</td>
        <td>e</td>
        <td>e</td>
        <td>1</td>
        <td>Edit Delete</td>
    </tr>
</table>
<script type="text/javascript">
    $(document).ready(function () {
        $('#example').DataTable();
    });
</script>

Answer 1

<thead>在您的表中不可用。只需在 thead 中添加 header 即可并尝试

<thead>
        <th>Question:</th>
        <th>option1</th>
        <th>option2</th>
        <th>option3</th>
        <th>option4</th>
        <th>Right option</th>
        <th>Action</th>
    </thead>