CODEWITHSUNDEEP
javascriptjquery
pramod24
pramod24

Reputation: 1116

Datatable is not working

i am using datatable to search the table content.but datatable cant work in my html code
I want to introduce filtering and sorting functionality to my table .all the table library included in the html script

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

Upvotes: 0

Views: 252

Answers (2)

Mr.G
Mr.G

Reputation: 3569

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>

please check this fiddle

Upvotes: 1

Felix
Felix

Reputation: 38112

Since you've placed your script before your DOM, you need to put your jQuery code inside DOM ready handler $(document).ready(function() {...}); or shorter form $(function(){...}):

This step is used to make sure all of your DOM elements have been loaded to the page before executing your jQuery code:

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

Upvotes: 2

Related Questions