question about table.display

abickford · December 2021

I need to understand this structure:

$(document).ready(function() {
    $('table.display').DataTable();
} );

I get the $(document).ready... part. What I am attempting t do is to write two Datatables to a div on my page. The examples (eg: https://datatables.net/examples/basic_init/multiple_tables.html) show the creation of the tables using HTML code, not using Datatable syntax.
I don't understand several things about the $('table.display').DataTable() command:
1) How are the tables to be displayed identified? I have my two tables identified as instances of a "class = 'display'", but Datatables cannot find them or render them.
2) Can I construct the tables using Datatables code, not HTML? Can I write the Datatables to variables and then reference the variables in the display command?
3) What options do I have to display two tables in a div? Ideally, these two tables would be linked so that a sort command will reorder both tables. Also, I want to wrap these tables in a set of download buttons. I'd appreciate any examples.

TIA

colin · December 2021

that should work, as the selector seems correct. You would need to confirm the class is on the table element.
you can load the table with Ajax if the data isn't in the DOM - see example here,
Yep, that's easily done, see the sort button in this example.

Colin

abickford · December 2021

Still having problems displaying multiple tables.
I am writing to two separate tables within a single div on my page. I have two data arrays, one containing population counts ("tab_data_Pop") and the other containing growth rates to be presented as percentages ("tad_data_Gr").

I am writing the table element for each table like this:

$(outDiv1).append("<table id='growthtab1' class='DTTable' width='100%'></table>");
$(outDiv1).append("<table id='growthtab2' class='DTTable' width='100%'></table>");

The DataTable code is the same for each table with 2 exceptions: the render.number function and the data command:

    $("#growthtab1").DataTable( {
        "columnDefs" : [
        {'targets' : [2, 3, 4, 5, 6, 7, 8], 'type' : 'num',
        render: DataTable.render.number( ',', '.', 0, '','' )},
        {   
            'targets': [0,1], 'className': 'dt-body-left',
            'targets' : [2, 3, 4, 5, 6, 7, 8], 'className': 'dt-body-right'
        },
        { 'targets': 1, 'width': '20%' ,
          'targets' : [2, 3, 4, 5, 6, 7, 8], 'width' :'10%'
        }  
        ],
        dom: 'Bfrtip',
       buttons: [
        {  
                extend: 'word',
                text :'Word',
                titleAttr: fileName,
                footer : true
            },
            {  
                extend: 'excelHtml5',
                title: fileName,
                footer : true
            },
            {
                extend: 'csvHtml5',
                title: fileName,
                footer : true
            },
            {
                extend: 'pdfHtml5',
                title: fileName,
                footer : true
            }
        ],
        "order": [],
        data: tab_data_Pop,
        columns : labels
    } );

    $("#growthtab2").DataTable( {
        "columnDefs" : [
        {'targets' : [2, 3, 4, 5, 6, 7, 8], 'type' : 'num',
        render: DataTable.render.number( '', '.', 1, '','%' )},
        {   
            'targets': [0,1], 'className': 'dt-body-left',
            'targets' : [2, 3, 4, 5, 6, 7, 8], 'className': 'dt-body-right'
        },
        { 'targets': 1, 'width': '20%' ,
          'targets' : [2, 3, 4, 5, 6, 7, 8], 'width' :'10%'
        }  
        ],
        dom: 'Bfrtip',
       buttons: [
        {  
                extend: 'word',
                text :'Word',
                titleAttr: fileName,
                footer : true
            },
            {  
                extend: 'excelHtml5',
                title: fileName,
                footer : true
            },
            {
                extend: 'csvHtml5',
                title: fileName,
                footer : true
            },
            {
                extend: 'pdfHtml5',
                title: fileName,
                footer : true
            }
        ],
        "order": [],
        data: tab_data_Gr,
        columns : labels
    } );

The first table displays. The second table doesn't. The second table throws the following error message:


datatables.min.js:113 Uncaught (in promise) TypeError: h.sTitle.replace is not a function
    at cc (datatables.min.js:113)
    at S.fn.init.<anonymous> (datatables.min.js:137)
    at datatables.min.js:121
    at Function.map (datatables.min.js:14)
    at F (datatables.min.js:121)
    at ja (datatables.min.js:75)
    at ka (datatables.min.js:75)
    at Ba (datatables.min.js:93)
    at f (datatables.min.js:138)
    at HTMLTableElement.<anonymous> (datatables.min.js:139)
cc @ datatables.min.js:113
(anonymous) @ datatables.min.js:137
(anonymous) @ datatables.min.js:121
map @ datatables.min.js:14
F @ datatables.min.js:121
ja @ datatables.min.js:75
ka @ datatables.min.js:75
Ba @ datatables.min.js:93
f @ datatables.min.js:138
(anonymous) @ datatables.min.js:139
each @ datatables.min.js:14
each @ datatables.min.js:14
u @ datatables.min.js:129
l.fn.DataTable @ datatables.min.js:218
growth_tab @ profile.js:144
(anonymous) @ profile.js:1664
Promise.then (async)
genSel2display @ profile.js:1626
(anonymous) @ profile.js:904
Promise.then (async)
genProfile @ profile.js:869
changeContent @ profile.html:273

I don't understand why the second table won't render, and I don't understand the source of the error.

Sorry for the long post.
TIA

colin · December 2021

Could you update the example in my last comment above to demonstrate your issue, please - it'll help us to debug the problem,

Colin

abickford · December 2021

I didn't see a comment fro December 28

My problem is shown in the longish post, posted at 1:28 am on December 28.
I have been experimenting with writing the two tables. When I generate a single table, either to "#growthtab1" or to "#growthtab2", the selected table renders. This works regardless of the table being generated.

When I try to generate both tables I receive the error "datatables.min.js:113 Uncaught (in promise) TypeError: h.sTitle.replace is not a function..."

None of this makes any sense to me.

kthorngren · December 2021

I copied your code into this test case:
http://live.datatables.net/tegikane/1/edit

It loads both tables with made up table data and labels. I commented out the word button as there is no builtin word button type. See the Builtin buttons docs for a listing of builtin buttons.

Please update the test case or post a link to your page to show the issue you are having.

You can set default Datatable settings to apply to all Datatables on the page. See the options docs for more details.

Kevin

abickford · December 2021

Thanks. I was able to make this work by appending the HTML code for the table to "#growthtab1" and "#growthtab2" and then applying the DataTable specifications to each table element in turn.

BTW, I had to create a Word button and the functions download a table in MS Word. My users insist on downloading everything in multiple formats.
Cheers

kthorngren · December 2021

Sounds like you have everything working the way you want, correct?

Kevin

question about table.display

question about table.display

Answers

Howdy, Stranger!

Categories

DataTables

question about table.display

question about table.display

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables