multiple tables based on single div with id

multiple tables based on single div with id

dukebartdukebart Posts: 11Questions: 3Answers: 0
edited January 2017 in Free community support

Hi Allan,

Is it possible to generate multiple tables, all on the same div?

My tbales are populated with JSON data from mysql. Every table has different data.

For example:

function getCMTableLevel1() {   
    setTimeout(function() {     
        var funcid = "get_cm_level_1";      
        var jqxhr = $.getJSON('functions/getdata.php', {
            "funcid":funcid}).done(function(dataSet) {
             if (dataSet == null) {
                showAlert();
             } else {
                  $('#datatable-cm-1').dataTable({
                    data: dataSet
            })          
            .fail(function() {showAlert();});
    }, 500);
}

another function with different data looks like this:

function getCMTableLevel1() {   
    setTimeout(function() {     
        var funcid = "get_cm_level_2";  
        var jqxhr = $.getJSON('functions/getdata.php', {
            "funcid":funcid}).done(function(dataSet) {
             if (dataSet == null) {
                showAlert();
             } else {
                  $('#datatable-cm-1').dataTable({
                    data: dataSet
            })          
            .fail(function() {showAlert();});
    }, 500);
}

This doesn't work as the table is not being drawn/populated..

Regards, Bart

This question has accepted answers - jump to:

Answers

  • kthorngrenkthorngren Posts: 21,179Questions: 26Answers: 4,923
    Answer ✓

    I'm not Allan but thought I would try to help :) The ID should be a table ID not div. Your second table would have a different ID for example: $('#datatable-cm-2').dataTable({. You can put these within the same div.

    HTH,
    Kevin

  • allanallan Posts: 63,226Questions: 1Answers: 10,416 Site admin
    Answer ✓

    Yup - you'd need some way to index the tables and be able to address them each uniquely. And id or an index would be the way to go.

    Allan

  • dukebartdukebart Posts: 11Questions: 3Answers: 0
    edited January 2017

    OK, but then I still need to hide one of them otherwise two tables are shown?

  • dukebartdukebart Posts: 11Questions: 3Answers: 0
    edited January 2017

    Hi Guys,

    I did this and this seems to work:

    In case of a succesfull JSON request I added the next two lines of code:

    $('#datatable-main').remove("#datatable-cm-1");
    $('#datatable-main').html('<table id="datatable-cm-1" class="table"></table>');
    

    Now I can use the same table id for every table and every new JSON request.

    Any thoughts on this solution?

    Regards, Bart

  • allanallan Posts: 63,226Questions: 1Answers: 10,416 Site admin
    Answer ✓

    You've got a memory leak there. Make sure you use the destroy() method to remove any old table before nuking it from the DOM and then creating a table table.

    Allan

  • dukebartdukebart Posts: 11Questions: 3Answers: 0

    Hi allan,

    Thanks. I incorprated the .destroy(); method now.

    Thanks!

This discussion has been closed.