DataTable.js - Always return an empty array

Question

When I try to access the .DataTable() function its always return null, I have been really struggling with this... Here is my code : view jsfiddle

HTML:

<table id="example">
    <thead>
        <tr>
            <th> Name </th>
            <th> Age </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th> Rotem </th>
            <th> 18 </th>
        </tr>
        <tr>
            <th> Bar </th>
            <th> 13 </th>
        </tr>
        <tr>
            <th> Shadmot </th>
            <th> 8 </th>
        </tr>
        <tr>
            <th> Devora </th>
            <th> 78 </th>
        </tr>
    </tbody>
</table>

<button id="button"> Click me </button>

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
</body>

JAVASCRIPT:

$(document).ready(function() {
     var b = $('#example').dataTable();

     $('#button').on('click', function() {
        window.alert(b);
     });
 });

Thank you very much

b is not null, but when i need to use b ( b.DataTable() its always return an empty array ) — R.Bar
– R.Bar, Commented Jan 18, 2016 at 17:20

deamentiaemundi · Accepted Answer · 2016-01-18 17:25:47Z

1

What you got in b is the API to the data table library. If you change it to say

$(document).ready(function() {
     var b = $('#example').DataTable();

     $('#button').on('click', function() {
        b.search("13");
        b.draw();
     }); 
 });

you will get the correct result. You really have to read the manuals in these times you can't get away with mere wild guessing as in the old times.

answered Jan 18, 2016 at 17:25

deamentiaemundi

5,5352 gold badges15 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bindrid · Accepted Answer · 2016-01-18 18:08:06Z

I changed my answer a little bit. In the button handler, I get the instance of data table inside the handler. Note that I used capital D to get the instances. In my example, q returns the data in column form 2x4 array, and s = returns the data in rows form 4x4 array. Note that I also added the css style sheet and moved the links to the top.

   <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <link href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css" type="text/css" rel="stylesheet" />
        <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
        <script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>

        <script type="text/javascript">
            var b = null;
            $(document).ready(function () {
                 b = $('#example').dataTable();

                $('#button').on('click', function () {
                    var q = $('#example').DataTable().columns().data();
                    var s = $('#example').DataTable().rows().data();
                });
            });
        </script>
    </head>
        <body>
            <table id="example" class='display'>
                <thead>
                    <tr>
                        <th> Name </th>
                        <th> Age </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th> Rotem </th>
                        <th> 18 </th>
                    </tr>
                    <tr>
                        <th> Bar </th>
                        <th> 13 </th>
                    </tr>
                    <tr>
                        <th> Shadmot </th>
                        <th> 8 </th>
                    </tr>
                    <tr>
                        <th> Devora </th>
                        <th> 78 </th>
                    </tr>
               </tbody>
            </table>
            <button id="button"> Click me </button>
        </body>
    </html>

Cédric NICOLAS · Accepted Answer · 2016-06-09 21:48:25Z

0

The question is not so stupid it may appear. I had the same problem, but not because of api misunderstanding. This was because, after having initialized a main datatable in my page, I was loading by ajax some partial HTML code, which was including the <script src="../dataTables.js"> in it. So dataTable plugins was loaded twice in the page. And of course (even it took me a bit of time to understand..), the $(selector).DataTable().rows(), or $(selector).dataTable().api().rows(), were both returning empty array, while my table was still there and clearly visible... Removing the duplicate datatable.js script loading solved the issue.

answered Jun 9, 2016 at 21:48

Cédric NICOLAS

1,1042 gold badges12 silver badges25 bronze badges

Collectives™ on Stack Overflow

DataTable.js - Always return an empty array

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related