Jquery datatable plugin not working in html table

akhilanadimpalli · March 2017

I am trying to use the DataTable plugin to add functionality to my html table. I followed the steps for installation and initialization from datatables.net, but it is not adding any functionality to my html page. I am wondering if it is because my table is formatted in a way that isn't supported by the plug-in. Any input would be useful. Thanks a lot!

</head>
<body>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>

tangerine · March 2017

Your HTML has no closing "table" tag.

kd1989 · June 2017

I'm using following code in a local .html file and load it in the browser, but datatables does not get applied. Can someone please help.

<head>

<link rel="stylesheet" href="http://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"</script>
<script>
$(document).ready(function(){
$('#example').DataTable();
});
</script>

</head>
<body>

<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
        </tbody>
    </table>
    
</body>

Edited by Allan - Markdown syntax highlighting

bindrid · June 2017

for a basic table, after your jQuery includes, try these

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

tangerine · June 2017

$(document).ready(function(){ $('#example').DataTable(); });

That needs to be in script tags.

allan · June 2017

Are there any errors or warnings shown on your browser's console?

If not, please link to a test page showing the issue so we can check it out.

Allan

Priyanka11 · July 2017

Hi

Priyanka11 · July 2017

This code is not working for me please suggest me

Priyanka11 · July 2017

<script type="text/javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.15/js/dataTables.jqueryui.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {

        alert("hi");
        $('#example').DataTable();
    });
</script>

</head>
<body>
<div>

    <table id="example" datatable="" class="display" width="100%" cellspacing="0">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
            </tr>
            <tr>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2012/03/29</td>
                <td>$433,060</td>
            </tr>
            <tr>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>2008/11/28</td>
                <td>$162,700</td>
            </tr>
            <tr>
                <td>Brielle Williamson</td>
                <td>Integration Specialist</td>
                <td>New York</td>
                <td>61</td>
                <td>2012/12/02</td>
                <td>$372,000</td>
            </tr>
            <tr>
                <td>Herrod Chandler</td>
                <td>Sales Assistant</td>
                <td>San Francisco</td>
                <td>59</td>
                <td>2012/08/06</td>
                <td>$137,500</td>
            </tr>
            <tr>
                <td>Rhona Davidson</td>
                <td>Integration Specialist</td>
                <td>Tokyo</td>
                <td>55</td>
                <td>2010/10/14</td>
                <td>$327,900</td>
            </tr>
            <tr>
                <td>Colleen Hurst</td>
                <td>Javascript Developer</td>
                <td>San Francisco</td>
                <td>39</td>
                <td>2009/09/15</td>
                <td>$205,500</td>
            </tr>
            <tr>
                <td>Sonya Frost</td>
                <td>Software Engineer</td>
                <td>Edinburgh</td>
                <td>23</td>
                <td>2008/12/13</td>
                <td>$103,600</td>
            </tr>
            <tr>
                <td>Jena Gaines</td>
                <td>Office Manager</td>
                <td>London</td>
                <td>30</td>
                <td>2008/12/19</td>
                <td>$90,560</td>
            </tr>
            <tr>
                <td>Quinn Flynn</td>
                <td>Support Lead</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2013/03/03</td>
                <td>$342,000</td>
            </tr>
            <tr>
                <td>Charde Marshall</td>
                <td>Regional Director</td>
                <td>San Francisco</td>
                <td>36</td>
                <td>2008/10/16</td>
                <td>$470,600</td>
            </tr>
            <tr>
                <td>Haley Kennedy</td>
                <td>Senior Marketing Designer</td>
                <td>London</td>
                <td>43</td>
                <td>2012/12/18</td>
                <td>$313,500</td>
            </tr>
            <tr>
                <td>Tatyana Fitzpatrick</td>
                <td>Regional Director</td>
                <td>London</td>
                <td>19</td>
                <td>2010/03/17</td>
                <td>$385,750</td>
            </tr>
            <tr>
                <td>Michael Silva</td>
                <td>Marketing Designer</td>
                <td>London</td>
                <td>66</td>
                <td>2012/11/27</td>
                <td>$198,500</td>
            </tr>
            <tr>
                <td>Paul Byrd</td>
                <td>Chief Financial Officer (CFO)</td>
                <td>New York</td>
                <td>64</td>
                <td>2010/06/09</td>
                <td>$725,000</td>
            </tr>
            <tr>
                <td>Gloria Little</td>
                <td>Systems Administrator</td>
                <td>New York</td>
                <td>59</td>
                <td>2009/04/10</td>
                <td>$237,500</td>
            </tr>
            <tr>
                <td>Bradley Greer</td>
                <td>Software Engineer</td>
                <td>London</td>
                <td>41</td>
                <td>2012/10/13</td>
                <td>$132,000</td>
            </tr>
            <tr>
                <td>Dai Rios</td>
                <td>Personnel Lead</td>
                <td>Edinburgh</td>
                <td>35</td>
                <td>2012/09/26</td>
                <td>$217,500</td>
            </tr>
            <tr>
                <td>Jenette Caldwell</td>
                <td>Development Lead</td>
                <td>New York</td>
                <td>30</td>
                <td>2011/09/03</td>
                <td>$345,000</td>
            </tr>
            <tr>
                <td>Yuri Berry</td>
                <td>Chief Marketing Officer (CMO)</td>
                <td>New York</td>
                <td>40</td>
                <td>2009/06/25</td>
                <td>$675,000</td>
            </tr>
            <tr>
                <td>Caesar Vance</td>
                <td>Pre-Sales Support</td>
                <td>New York</td>
                <td>21</td>
                <td>2011/12/12</td>
                <td>$106,450</td>
            </tr>
            <tr>
                <td>Doris Wilder</td>
                <td>Sales Assistant</td>
                <td>Sidney</td>
                <td>23</td>
                <td>2010/09/20</td>
                <td>$85,600</td>
            </tr>
            <tr>
                <td>Angelica Ramos</td>
                <td>Chief Executive Officer (CEO)</td>
                <td>London</td>
                <td>47</td>
                <td>2009/10/09</td>
                <td>$1,200,000</td>
            </tr>
            <tr>
                <td>Gavin Joyce</td>
                <td>Developer</td>
                <td>Edinburgh</td>
                <td>42</td>
                <td>2010/12/22</td>
                <td>$92,575</td>
            </tr>
            <tr>
                <td>Jennifer Chang</td>
                <td>Regional Director</td>
                <td>Singapore</td>
                <td>28</td>
                <td>2010/11/14</td>
                <td>$357,650</td>
            </tr>
            <tr>
                <td>Brenden Wagner</td>
                <td>Software Engineer</td>
                <td>San Francisco</td>
                <td>28</td>
                <td>2011/06/07</td>
                <td>$206,850</td>
            </tr>
            <tr>
                <td>Fiona Green</td>
                <td>Chief Operating Officer (COO)</td>
                <td>San Francisco</td>
                <td>48</td>
                <td>2010/03/11</td>
                <td>$850,000</td>
            </tr>

        </tbody>

    </table>

</div>

</body>
</html>

tangerine · July 2017

DataTables requires jQuery. It's not referenced in your HTML.

kthorngren · July 2017

Looks like you are missing some JS and CSS includes, like jquery.js. The easiest way to get all the needed files is with the download builder:
https://datatables.net/download/index

Kevin

venkat0708 · April 2018

{% extends 'base.html' %}

{% load static %}

{% block title %}

Invoices

{% endblock %}

{% block additionalcss %}
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.css">
{% endblock %}

{% block content %}
<div class="container">

  <div class="row">
    <div class="col-sm-12">

      <h2>list of Invoices</h2>
      <br/>
      <hr/>

 {% if invoices %}
 <table id="invoicesTable" class="table table-striped">
   <thead>
     <tr>
       <th>#</th>
       <th>Customer Name</th>
       <th>Created Date</th>
       <th>Due Date</th>
       <th>Paid Date</th>
       <th>Status</th>
       <th>Total Amount</th>
       <th>Paid Amount</th>
       <th>Due Amount<th>
       <th></th>
       <th></th>
     </tr>
   </thead>
   <tbody>
   {% for i in invoices %}
   <tr>
     <th scope="row">{{ forloop.counter }}</th>
     <td>{{ i.customer }}</td>
     <td>{{ i.generated_date }}</td>
     <td>{{ i.due_date }}</td>
     <td>{{ i.Paid_date }}</td>
     <td>{{ i.status }}</td>
     <td>{{ i.amount }}</td>
     <td>{{ i.paid }}</td>
     <td>{{i.due_amount}}</td>

     <td><a href="{{ i.get_update_url }}"><button type="button" class="btn btn-primary">Edit</button></a></td>
     <td><a href="{{ i.get_delete_url }}"><button type="button" class="btn btn-danger">Delete</button></a></td>
   </tr>
     {% endfor %}
   </tbody>
 </table>

{% else %}
<h3>No Invoices yet, Would you like to add one </h3>
{% endif %}
    </div>
  </div>


</div>
{% endblock content %}


{% block additionaljs %}
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>
<script type="text/javascript">
$(document).ready( function () {
    $('#invoicesTable').DataTable();
} );
</script>

{% endblock %}
````

it's not initialised with data table sort and search. If there is no data for empty table it is getting initialized

Thanks,
Venkat

kthorngren · April 2018

Are you getting any alert errors or errors in the browser's console?

Without seeing the actual problem its hard to say what is happening. Can you post a link to your page or provide a test case with the issue?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Can you try with just one row? Maybe you can take that data and build a test case for us.

Kevin

aktjkt · August 2018

Hello I am geting the huge table from api listing is not working in datatable whenever i select any no of list its showing only one row at a time and in first time instead of shoiwng 10 lines its showing all data please help i am newbie i am attaching the code following

<!DOCTYPE html>
<html>
<head>
    <title>tools</title>
    <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
       
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
</head>
<body>
    <table id ="bitrateInformation" width="80%">
        <thead>
            <!-- <th>Sl.No</th> -->
            <th>Duration</th>
            <th>StartTime</th>
            <th>Size</th>
            <th>BitRate</th>
            <th>Height</th>
            <th>Id</th>
            <th>FrameRate</th>
            <th>LoggedAt</th>
            <th>Width</th>
        </thead>

        <tbody id ="tablebody">
            
        </tbody>
    </table>
    <script type="text/javascript">
        var data;
        var chankInformation=[];
        var information=[];
        var finalChanks=[];
        var check=[];
        var len;
        $.ajax({
            url:'http://192.168.76.124:7777/v1/get/bitRateById?id=36',
            type:'GET',
            datype:'Json',
            success:function(responce){
                console.log(responce);
                data= responce;
                if(data.summary.description==="OK"){
                    console.log("Yes");
                    chankInformation=data.data.resolutions;
                    console.log(chankInformation);
                }else{
                    console.log("Problem");
                }
                    
                    
                 
                   $(document).ready(function(obj) {
              //  function generateTable(obj){
                    console.log("generateTable calling");
                     for(var i=0;i<chankInformation.length;i++){
                console.log(chankInformation[i].resolution);
                console.log(chankInformation[i].streamDetails);
                for(var j=0;j<chankInformation[i].streamDetails.length;j++){
                    //console.log("loping loing");
                    console.log("Duration "+chankInformation[i].streamDetails[j].duration);
                    console.log("StartTime "+chankInformation[i].streamDetails[j].startTime);
                    console.log("Size "+chankInformation[i].streamDetails[j].size);
                    console.log("BitRate "+chankInformation[i].streamDetails[j].bitRate);
                    console.log("Height "+chankInformation[i].streamDetails[j].height);
                    console.log("ID "+chankInformation[i].streamDetails[j].id);
                    console.log("FrameRate "+chankInformation[i].streamDetails[j].rFrameRate);
                    console.log("LoggedAt "+chankInformation[i].streamDetails[j].loggedAt);
                    console.log("Width "+chankInformation[i].streamDetails[j].width);

                     var Html = "<tr> <td>"+chankInformation[i].streamDetails[j].duration+
                                 "</td> <td>"+chankInformation[i].streamDetails[j].startTime+
                                 "</td><td>"+chankInformation[i].streamDetails[j].size+
                                 "</td><td>"+chankInformation[i].streamDetails[j].bitRate+
                                  "</td><td>"+chankInformation[i].streamDetails[j].height+
                                  "</td><td>"+chankInformation[i].streamDetails[j].id+
                                  "</td><td>"+chankInformation[i].streamDetails[j].rFrameRate+
                                  "</td><td>"+chankInformation[i].streamDetails[j].loggedAt+
                                  "</td><td>"+chankInformation[i].streamDetails[j].width+
                                "</td></tr>"
                      $('#tablebody').append(Html); 
                       $('#bitrateInformation').DataTable();

                }


             }
                 
        });          
            

        }
    });


    </script>
</body>
</html>

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan · August 2018

Can you link to the page showing the issue so we can help to debug it please? It isn't immediately obvious from the above what is going wrong.

That said, the one thing that does stand out for me is that you are initialising the DataTable inside your double for loops (i.e. after every row is added). That's not going to work. Move it to outside of your for loops.

Allan

Ksenia · October 2018

I have the similar problem (plugin not worked) when used jquery library v2.
It works with jquery 3

swapnakadam · January 2019

thanks for this.. its very helpful for me...

joshi_suhani · December 2019

i am creating the datatable included the javascript but my table is just showing one row that is undefined. i have tried so many things but nothing is working.
code is below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Employee List</title>
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

 <!--  <link rel="icon" type="image/png" href="/assets/img/favicon.ico">-->
        
       <link rel="icon" type="image/png" href="/assets/img/favicon.ico">
        
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.20/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.20/datatables.min.js"></script>
 
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
        
        <!--     Fonts and icons     --> 
        <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
        <link href='http://fonts.googleapis.com/css?family=Droid+Serif:400,700' rel='stylesheet' type='text/css'>
        <link href="/assets/css/fonts/pe-icon-7-stroke.css" rel="stylesheet">
        <link href="/assets/css/fonts/Rubik-Fonts.css" rel="stylesheet" />
        
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script type="text/javascript" src="js/background.cycle.js"></script>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        
        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity=   "sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
        
        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>




<script type="text/javascript">

var HttpClient = function() {
    this.get = function(aUrl, aCallback) {
        var anHttpRequest = new XMLHttpRequest();
        anHttpRequest.onreadystatechange = function() { 
            if (anHttpRequest.readyState == 4 && anHttpRequest.status == 200)
                aCallback(anHttpRequest.responseText);
        }

        anHttpRequest.open( "GET", aUrl, true );            
        anHttpRequest.send( null );
    }
}

var theurl="http://dummy.restapiexample.com/api/v1/employees";
var client = new HttpClient();
    client.get(theurl, function(response) {
        var response1 = JSON.parse(response);
        //alert(response);
        
        document.getElementById("id").innerHTML = response1.id;
        document.getElementById("employee_name").innerHTML = response1.employee_name;
        document.getElementById("employee_salary").innerHTML = response1.employee_salary;
        document.getElementById("employee_age").innerHTML = response1.employee_age;
        document.getElementById("profile_image").innerHTML = response1.profile_image;
        
        
        
        } );


$(document).ready( function () {
     $('#table_id').DataTable();
} );        

</script>

<style>
        th, td, p, input {
            font:14px Verdana;
        }
        table, th, td 
        {
            border: solid 1px #DDD;
            border-collapse: collapse;
            padding: 2px 3px;
            text-align: center;
        }
        th {
            font-weight:bold;
        }
    </style>


</head>

<body>

            <table id="table_id" class="display">
    <thead>
        <tr>
            <th>ID</th>
            <th>Employee Name</th>
            <th>Employee Salary</th>
            <th>Employee Age</th>
            <th>Profile Image</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td id="id"></td>
            <td id="employee_name"></td>
            <td id="employee_salary"></td>
            <td id="employee_age"></td>
            <td id="profile_image"></td>
            
        </tr>
        
    </tbody>
</table>


</body>
</html>

colin · December 2019

You haven't said why it isn't working? Are you seeing errors?

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

Jquery datatable plugin not working in html table

Jquery datatable plugin not working in html table

Answers

Howdy, Stranger!

Categories

DataTables

Jquery datatable plugin not working in html table

Jquery datatable plugin not working in html table

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables