Creating a panelled table

abickford

I have a table that will have a fixed number of rows but a variable number of columns. The number of columns is determined by user input (specifically, the user will select a number of geographies elsewhere in my application and the selection will determine the number of columns, 2 per geography plus 2 fixed columns on the left). The two fixed columns on the left contain the row information.

I want the table panels to be 6 columns wide, i.e., the two fixed columns and four data columns (i.e., two columns for two geographies). I need column navigation so that a user can page through the panels (ideally a button click would page the display forward or backward through the panels, rather than scrolling). The number of panels will depend on the number of geographies selected. For example, if a user selects 11 geographies, the table will have 22 data columns plus the two fixed columns, for a total of 24 columns. These columns would form 4 panels.

Is this possible? I looked at SearchPanes, but this doesn't produce what I want.
Any suggestions would be appreciated.
TIA

abickford

One more thing. In trying to use searchPanes, I received a message at the top of my table:

No SearchPanes

Below are the CDN calls I am using and the code. What is going on?

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.6.0/jszip-2.5.0/dt-1.12.1/b-2.2.3/b-html5-2.2.3/sc-2.0.6/sp-2.0.1/sl-1.4.0/datatables.min.css"/>
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.6.0/jszip-2.5.0/dt-1.12.1/b-2.2.3/b-html5-2.2.3/sc-2.0.6/sp-2.0.1/sl-1.4.0/datatables.min.js"></script> 

$(tabObj).DataTable({
       "pageLength" : 11,
       "scrollY" : true,
        "scrollX":        true,
        "fixedColumns":   { left: 2},
        "fixedHeader":   true,
        searchPanes: {
            layout : 'columns-6'
        },
         "columnDefs" : [
         { 'targets': [2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22] 'className': 'dt-body-right'},
         { 'targets': [0,1],  'className': 'dt-body-left'}
            ],
       "dom": 'Plfrtip'
})

kthorngren

No SearchPanes

See if this thread with the same message helps.

I want the table panels to be 6 columns wide, i.e., the two fixed columns and four data columns (i.e., two columns for two geographies). I need column navigation so that a user can page through the panels

Datatables doesn't have anything built in to create panels like you describe. SearchPanes is for building search panels for the table. If I understand your requirement SearchPanes is not what you are looking for. You will need to create the panels yourself and any forward/backward display controls. In each panel place a table that you will initialize Datatables against. You will need to separate the data for each table.

You can initialize the Datatables individually or all at once using this technique.

Kevin

abickford

Thanks @kthorngren
If this is what I have to do, I guess I can do it.
Cheers--
AB