CODEWITHSUNDEEP
javascriptjquerypluginsdatatablehtml-table
prashant kandel
prashant kandel

Reputation: 3

Jquery Datable plugin not working

I've a tabe and want to use jquery datable plugin in that code and it is not working.I have tried downloading the javascript and css file and using those. heplp me to find a solution. here is my code.

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

Upvotes: 0

Views: 49

Answers (1)

Hariharan
Hariharan

Reputation: 1204

<thead> is not available in your table. Just add the header in thead and try

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

Upvotes: 1

Related Questions