Is it possible to use 4-5 datables on the same page?

amitccet

Currently I am using 2 datatables on the same page and it does work perfectly, sometimes it works and sometimes it does not work. I am not sure what I am doing wrong in that. And also in the future we need to use 4-5 dataTables in the same page. So need to confirm, before leveraging whether it is possible or not ?

reddy23

Yes you can use multiple tables, I use three on single page.

Please post a test case that reflects your problem.

meanwhile,
http://datatables.net/examples/basic_init/multiple_tables.html

for you reference.

gk2k2

Hi reddy23,
I have the same issue. However, if you have the same set of columns, then it works as evidenced in the link you provided. But we have 2 jsps embedded in a jsp. Each child jsp has a table where we utilize search, sort, pagination capabilities with different set of columns and data sources. In this scenario, only 1 table works correctly. However 2 tables are working very rarely. Most of time, the second table fails.
Thanks,
gk2k2

gk2k2

Hi reddy23,
Here are the code snippets from 2 jsp files. In one of the jsps, I am making an Ajax call to get new results and dynamically build the table and then apply datatables.

Please note that page1 works fine as is even after Ajax calls to dynamically build the html table. However page 2 fails. The error message is:

"Type r is undefined"

Thanks

Page1:

$(document).ready(function() {
    console.log("On Ready");
    $('#grid1 tfoot th')
        .each(
            function() {
                var title = $(this).text();
                $(this)
                        .html(
                                '<input type="text" placeholder="Search '+title+'" />');
            });

            var table1 = $('#grid1').DataTable({
                "columnDefs" : [ {
                    className : "columnwidth1",
                    "targets" : [ 0 ]
                }, {
                    className : "columnwidth2",
                    "targets" : [ 1 ]
                }, {
                    className : "columnwidth3",
                    "targets" : [ 2 ]
                }, {
                    className : "columnwidth4",
                    "targets" : [ 3 ]
                }, {
                    className : "columnwidth5",
                    "targets" : [ 4 ]
                } ],
                "pagingType" : "full","order": [[ 1, "asc" ]]
            });

            table1
                .columns()
                .every(
                    function() {
                        var that = this;
                        $('input', this.footer())
                            .on(
                                'keyup change',
                                    function() {
                                        if (that
                                            .search() !== this.value) {
                                            that
                                                .search(
                                                    this.value)
                                                    .draw();
                                        }
                                    });
                    });

});

---

Within Ajax call

jQuery("#selectedColumn").change(function() {
............
............
/getting new data thru Ajax call and building in the var, resultsHtml
//building new table
$('#bgrid1Tbody').html("").append(resultsHtml);

 $('#grid1 tfoot th')
        .each(
            function() {
                var title = $(this).text();
                $(this)
                        .html(
                                '<input type="text" placeholder="Search '+title+'" />');
            });

            var table2 = $('#grid2').DataTable({
                "columnDefs" : [ {
                    className : "columnwidth1",
                    "targets" : [ 0 ]
                }, {
                    className : "columnwidth2",
                    "targets" : [ 1 ]
                }, {
                    className : "columnwidth3",
                    "targets" : [ 2 ]
                }, {
                    className : "columnwidth4",
                    "targets" : [ 3 ]
                }, {
                    className : "columnwidth5",
                    "targets" : [ 4 ]
                } ],
                "pagingType" : "full","order": [[ 1, "asc" ]]
            });

            table2
                .columns()
                .every(
                    function() {
                        var that = this;
                        $('input', this.footer())
                            .on(
                                'keyup change',
                                    function() {
                                        if (that
                                            .search() !== this.value) {
                                            that
                                                .search(
                                                    this.value)
                                                    .draw();
                                        }
                                    });
                    });

});

-----------------------------------------------------------------------------------------------------------------Second Jsp page

$(document).ready(function() {
    console.log("On Ready");
    $('#grid2 tfoot th')
        .each(
            function() {
                var title = $(this).text();
                $(this)
                        .html(
                                '<input type="text" placeholder="Search '+title+'" />');
            });

            var anotherTable = $('#grid2').DataTable({
                "columnDefs" : [ {
                    className : "columnwidth6",
                    "targets" : [ 0 ]
                }, {
                    className : "columnwidth7",
                    "targets" : [ 1 ]
                }, {
                    className : "columnwidth8",
                    "targets" : [ 2 ]
                }, {
                    className : "columnwidth9",
                    "targets" : [ 3 ]
                }, {
                    className : "columnwidth10",
                    "targets" : [ 4 ]
                } ],
                "pagingType" : "full","order": [[ 1, "asc" ]]
            });

            anotherTable
                .columns()
                .every(
                    function() {
                        var that = this;
                        $('input', this.footer())
                            .on(
                                'keyup change',
                                    function() {
                                        if (that
                                            .search() !== this.value) {
                                            that
                                                .search(
                                                    this.value)
                                                    .draw();
                                        }
                                    });
                    });

});

amitccet

Found the issue, when we add, multiple column filter for multiple tables, otherwise it works fine.

Need to figure out how it works for multiple table with column filter functionality.

If anyone have faced same issue, Please post your inputs.

Thanks in advance.

amitccet

Can some one please help to solve the issue, it's becoming nightmare for us.

Thanks in advance.

jr42.gordon

My application utilizes up to 12 Datatables all within either jQuery tabs or dialogs. Some use the same DataTable init as they are either exactly the same or are only a few columns different.

It would help if you could link to an example with the issue you are facing to better help us help you solve your issue.

The tool is extremely powerful and you should definitely use it.

amitccet

Hi Sir,

I really appreciate all your inputs, as this issue has become nightmare for me.

Description of the Code :- We want two datatables in one page and in both of them their column should be searchable. So we should have column filters in each datatables. And also in future we are planning for 5 datatables in one page, in each of them having there own column filters.

Below is the code with two datables which is not working for me.

<script>
$(document).ready(function() {
// First Datatable code 
var table1 = $('#example1').DataTable(); 

 $('#example1 tfoot th').each(
                                function() {
                                    var title = $(this).text();
                                    $(this)
                                            .html(
                                                    '<input type="text" placeholder="Search '+title+'" />');
                                });

table1.columns().every(function() {
                            var that = this;
                            $('input', this.footer())
                                .on(
                                    'keyup change',
                                        function() {
                                            if (that
                                                .search() !== this.value) {
                                                that
                                                    .search(
                                                        this.value)
                                                        .draw();
                                            }
                                        });
                        });
// Second DataTable Code
$('#example2').DataTable(); 

var table2 = $('#example2').DataTable(); 

 $('#example2 tfoot th').each(
                                function() {
                                    var title = $(this).text();
                                    $(this)
                                            .html(
                                                    '<input type="text" placeholder="Search '+title+'" />');
                                });

table2.columns().every(function() {
                            var that = this;
                            $('input', this.footer())
                                .on(
                                    'keyup change',
                                        function() {
                                            if (that
                                                .search() !== this.value) {
                                                that
                                                    .search(
                                                        this.value)
                                                        .draw();
                                            }
                                        });
                        });
});
</script>
<table id="example1" class="display" cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th>Age</th>
                        <th>Salary</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th>Age</th>
                        <th>Salary</th>
                    </tr>
                </tfoot>
                <tbody>
                    <tr>
                        <td>Tiger Nixon</td>
                        <td>System Architect</td>
                        <td>Edinburgh</td>
                        <td>61</td>
                        <td>$320,800</td>
                    </tr>
                    <tr>
                        <td>Cedric Kelly</td>
                        <td>Senior Javascript Developer</td>
                        <td>Edinburgh</td>
                        <td>22</td>
                        <td>$433,060</td>
                    </tr>
                    <tr>
                        <td>Sonya Frost</td>
                        <td>Software Engineer</td>
                        <td>Edinburgh</td>
                        <td>23</td>
                        <td>$103,600</td>
                    </tr>
                    <tr>
                        <td>Quinn Flynn</td>
                        <td>Support Lead</td>
                        <td>Edinburgh</td>
                        <td>22</td>
                        <td>$342,000</td>
                    </tr>
                    <tr>
                        <td>Dai Rios</td>
                        <td>Personnel Lead</td>
                        <td>Edinburgh</td>
                        <td>35</td>
                        <td>$217,500</td>
                    </tr>
                    <tr>
                        <td>Gavin Joyce</td>
                        <td>Developer</td>
                        <td>Edinburgh</td>
                        <td>42</td>
                        <td>$92,575</td>
                    </tr>
                    <tr>
                        <td>Martena Mccray</td>
                        <td>Post-Sales support</td>
                        <td>Edinburgh</td>
                        <td>46</td>
                        <td>$324,050</td>
                    </tr>
                    <tr>
                        <td>Jennifer Acosta</td>
                        <td>Junior Javascript Developer</td>
                        <td>Edinburgh</td>
                        <td>43</td>
                        <td>$75,650</td>
                    </tr>
                    <tr>
                        <td>Shad Decker</td>
                        <td>Regional Director</td>
                        <td>Edinburgh</td>
                        <td>51</td>
                        <td>$183,000</td>
                    </tr>
                </tbody>
            </table>
            <table id="example2" class="display" cellspacing="0" width="100%">
                              <thead>
                    <tr>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th>Age</th>
                        <th>Salary</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th>Age</th>
                        <th>Salary</th>
                    </tr>
                </tfoot>
                <tbody>
                    <tr>
                        <td>Tiger Nixon</td>
                        <td>System Architect</td>
                        <td>Edinburgh</td>
                        <td>61</td>
                        <td>$320,800</td>
                    </tr>
                    <tr>
                        <td>Cedric Kelly</td>
                        <td>Senior Javascript Developer</td>
                        <td>Edinburgh</td>
                        <td>22</td>
                        <td>$433,060</td>
                    </tr>
                    <tr>
                        <td>Sonya Frost</td>
                        <td>Software Engineer</td>
                        <td>Edinburgh</td>
                        <td>23</td>
                        <td>$103,600</td>
                    </tr>
                    <tr>
                        <td>Quinn Flynn</td>
                        <td>Support Lead</td>
                        <td>Edinburgh</td>
                        <td>22</td>
                        <td>$342,000</td>
                    </tr>
                    <tr>
                        <td>Dai Rios</td>
                        <td>Personnel Lead</td>
                        <td>Edinburgh</td>
                        <td>35</td>
                        <td>$217,500</td>
                    </tr>
                    <tr>
                        <td>Gavin Joyce</td>
                        <td>Developer</td>
                        <td>Edinburgh</td>
                        <td>42</td>
                        <td>$92,575</td>
                    </tr>
                    <tr>
                        <td>Martena Mccray</td>
                        <td>Post-Sales support</td>
                        <td>Edinburgh</td>
                        <td>46</td>
                        <td>$324,050</td>
                    </tr>
                    <tr>
                        <td>Jennifer Acosta</td>
                        <td>Junior Javascript Developer</td>
                        <td>Edinburgh</td>
                        <td>43</td>
                        <td>$75,650</td>
                    </tr>
                    <tr>
                        <td>Shad Decker</td>
                        <td>Regional Director</td>
                        <td>Edinburgh</td>
                        <td>51</td>
                        <td>$183,000</td>
                    </tr>
                </tbody>
            </table>

Thanks,
Amit Doshi

amitccet

To add on the above post, it has having issue with column data searching..

Anyone please help me out..

allan

Please link to a test case showing the issue so it can be debugged live.

Allan

amitccet

Hi Allan,

Thanks for the response.

Here is the link http://jsfiddle.net/bhSv9/50/

Column filter is only working for 1st table, not working for other three tables.

Regards,
Amit Doshi

amitccet

Hi Allan,

Can you please help me out ?

Thanks,
Amit Doshi

allan

Hi Amit,

Thank you for the link. No need to bump your post just two hours after posting it. I have to take a break sometimes :-). If this is urgent for you, priority support is available.

The problem is with how you are finding the index of the input: $("tfoot input").index(this). That is getting the index of the element out of all the inputs on the page - not just the column index.

You need to make the selector more selective. For example:

oTable2.fnFilter( this.value, $("#example2 tfoot input").index(this) );

Allan