SearchPanes title not showing, custom title not working either

latinunit

The titles for my search panes are not automatically being displayed, I tried setting custom titles by following the example on this link https://datatables.net/extensions/searchpanes/examples/customisation/customTitle.html but no luck. what could be wrong? here is my script

    $('#recipients').DataTable({      
            data: response.data,
            searchPanes: {cascadePanes: true, viewTotal: true},            
            dom: 'Pfrtip', 
            stateSave: true,  
            responsive: true,
            language: {
            searchPanes: {
                count: '{total} records',
                countFiltered: '{shown} / {total}'
            }
        },            
           columns:    [
                             { data: 'name' },
                             { data: 'jurisdiction' },
                             { data: 'relationshipManager' },
                             { data: 'blackList'},
                             { data: 'clawfulBasis'}
                             
                        ],
           columnDefs: [ 
                             { title: 'Recipient', targets: [0]},
                        
                             { searchPanes: {show: true}, targets: [1,2,3,4]},
                             
                             { searchPanes: {header: 'Jurisdiction'}, targets: [1]},                             
                              
                             { target: 1, visible:false},
                             { target: 2, visible:false},
                             { target: 3, visible:false},
                             { target: 4, visible:false}                             
                        
                        ],     
         });

By the way, how can I cuztomise the panes that are showing intengers, 0,1 so that I can do a case, if 1 then 'consent yes' if 0 consent no, something like below.

                               data: 'blackList',
                               render:function(data, type) {
                                if(type == 0) { //return string}
                               
                               }
                               return data;
                             },

latinunit

I tried the following to render the integers, but doesnt work

                         {
                           data: 'blackList',
                           render:function(data) {
                            switch (data) {
                              case 0:
                              data = 'No';
                              break;

                              case 1:
                              data = 'Yes';
                              break;
                            }
                           return data;
                         },
                        },

latinunit

Ok got the render working, but not the panes titles

                         {
                           data: 'blackList',
                           render:function(data) {
                            let consent  = (data == 0) ? 'No' : 'Yes';
                              return consent;
                           },
                         },

latinunit

So now, custom titles show for 3 panels except for the 2nd one. thats weird

       columnDefs: [            
                         { title: 'Recipient', targets: [0]},
                         { searchPanes: {show: true}, targets: [1-4]},
                         { targets: [1,2,3,4], visible:false},

                         {searchPanes: {header: 'Jurisdiction'}, targets: [1]},         
                         {searchPanes: {header: 'Manager'},      targets: [2]},     
                         {searchPanes: {header: 'Blacklist'},    targets: [3]},  
                         {searchPanes: {header: 'Consent'},      targets: [4]},                                                                             
                    ],   

kthorngren

Your code snippet works here:
http://live.datatables.net/bacusijo/1/edit

Please update the test case or provide a link to your page to replicate the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Maybe right click and inspect the Manager header to see if there is a styling problem.

Kevin

latinunit

Hi Thor,

On your snippet, it only shows correctly for the 1st and 2nd pane, the 3rd and 4th are ignored? why

latinunit

also this line seems invalid

searchPanes: {show: true}, targets: [1-4]},

As soon as I use the correct syntax (below) the custom titles dissapear. seems to be an issue as they are hidden panels?

searchPanes: {show: true}, targets: [1,2,3,4]},

Here is the updated case http://live.datatables.net/beleyope/1/

kthorngren

also this line seems invalid

Yes, take a look at the columnDefs.targets docs for details. Basically [1-4] would result in [-3].

seems to be an issue as they are hidden panels?

I was messing with this too and I agree with you. Comment outsearchPanes: {show: true}, targets: [1,2,3,4]}, and the headers work correctly for the panels that are shown. But force them with columns.searchPanes.show seems to break the headers. @allan will need to look at this.

Kevin

latinunit

Here is my latest test case with all my test data http://live.datatables.net/yohuzuke/1/ my panes collapse also do not work

kthorngren

You could use columns.title to set the header titles for all the columns which then would be shown with SearchPanes. You can use this within the columns array, like this:
http://live.datatables.net/rudeboco/1/edit

However that still leaves the issue you ran into but should solve the problem for you.

Kevin

latinunit

Thanks Thor, that way is simpler and better, one final thing, any ideas why the panels are not collaped on init?, i've tried setting statesave off and doesnt work either.

http://live.datatables.net/yohuzuke/1/

latinunit

got it working, weirdly it doesnt mention where this setting should be configured, but luckly it worked by setting it here, any idea why and if this is correct?

kthorngren

You have two searchPanes options:

            searchPanes: {cascadePanes: true, viewTotal: true},            
            dom: 'Pfrtip', 
            stateSave: true,  
            responsive: true,
            language: {
            searchPanes: {
                count: '{total} records',
                countFiltered: '{shown} / {total}',
                collapse: false,
                initCollapsed: true
            }

One will overwrite the other. The option in line 6 is overwritten by the one in line 1. Plus you have searchPanes.collapse set false which, according to this example is incorrect when trying to use searchPanes.initCollapsed.

Kevin