seachPanes: Show pane by column name, not ordinal position

soulbriski

Hi

I created a test case to demonstrate my problem but there is a script error so I can't show my issue. Test case is here live.datatables.net/kupizova/1/edit

All I want to do is show and hide panes based on their name, not the column position in the table. This is because the user can reOrder columns.

In my real world project, the searchPanes are ok and displayed in either a modal or a sidebar (user choice) but some panes like a telephone number or email address do not and should not be available for filtering because there would only ever be one. By rights, it should automatically be excluded from the panes because of the uniqueness.

If you were to apply this: -

$(document).ready(function() {
    $('#example').DataTable( {
        searchPanes:true,
        dom: 'Pfrtip',
        columnDefs:[
            {
                searchPanes:{
                    show: true,
                },
                targets: [0],
            },
            {
                searchPanes:{
                    show: false,
                },
                targets: [2],
            }
        ]
    });
});

Then pane 2 would not be shown

I want to replace targets: [2] with `targets: ['name:telephone', 'name:email']'

Is this possible?

Edited by Kevin:  Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

kthorngren

The columnDefs.targets docs list all of the options you can use:

0 or a positive integer - column index counting from the left
A negative integer - column index counting from the right
A string - class name will be matched on the TH for the column (without a leading .)
The string "_all" - all columns (i.e. assign a default)

You can use a class name that you can assign using columns.className.

Kevin

soulbriski

Thanks Kevin, I appreciate your response.

The solution I was looking for was the columns.className method you identified but I can't get it to work.

For a fuller picture, I am using stateSaveCallback and stateLoadCallback to/from MySQL and using features such as colReorder etc.

The searchPanes are drawn in my own bootstrap4 modal or sidebar (user preference) at intComplete using tbl.searchPanes.container().appendTo('#myContainer');

If I could make the testcase display the searchPanes I could show you the working code

Thanks in advance for any further tips

soulbriski

FYI @kthorngren

I've got a working (or not) test case now at http://live.datatables.net/kupizova/1/edit

Please note that targets: ['nopane'] is the line of code which is being ignored.

if you change it to targets: [4] then it works as you would expect.

I need to refer to the className and not the ordinal position of the column because my users can use colReorder

soulbriski

Having experminted further, I've now managed to answer my own question and have a solution to share.

If, like me you are presenting a large number of tables to the system's users then dynamics are very important.

In my case, it's important that the panes are shown/hidden based on the column object and not the column's ordinal position because the user can move columns using colReorder and as such the usual columnDefs approach wouldn't work because we don't know the position of the column once it has been moved and we are difining it's visibility before we initialize the dataTable.

This test case demonstrates column manipulation to achieve the showing/hiding of specific panes outside the rules set by the default threashold for uniqueness.

In the test case, I have hard-coded the column info but in my real project the column info is generated on the fly by the PHP code which returns the data for the table from MySQL as per this example PHP code:-

$data['ajax'] = json_encode(CrmModel::getCRMsList());

$data['table_id'] = 'crm';

// By this stage we have already retrieved our data from MySQL and have json_encode it. The following column assignment matches the data structure we have

$sp_obj = new stdClass();
        
$sp_obj->show = false;

$data['columns'] = json_encode(array(                                                                       array('data' => 'ord_pos', 'name' => 'ord_pos', 'title' => '#', 'className' => 'reorder'),
            array('data' => 'crm_name', 'name' => 'crm_name', 'title' => 'Company Name'),
            array('data' => 'crm_internal_id', 'name' => 'crm_internal_id', 'title' => 'Internal ID'),
            array('data' => 'crm_type_name', 'name' => 'crm_type_name', 'title' => 'Type'),
            array('data' => 'crm_telephone', 'name' => 'crm_telephone', 'title' => 'Telephone','searchPanes' => $sp_obj),
            array('data' => 'crm_email', 'name' => 'crm_email', 'title' => 'Email','searchPanes' => $sp_obj),
            array('data' => 'status', 'name' => 'status', 'title' => 'Status'),
        ));

Our js for the datatable is echoed in php so that we can use all our dynamics. It goes something like this (Only an excerpt, not everything shown)

$out = "
var tbl = $('#" . $data['table_id'] . "' ).DataTable( {
fixedHeader: true,
responsive: true,
stateSave: true,
data: " . $data['ajax'] . ",
columns: " . $data['columns'] . ",
searchPanes: {
 // Config here
},
// rest of dataTable initilization here for stateSaveCallback, stateLoadCallback etc
});"

echo $out;

kthorngren

Well, I guess using columns.className isn't applied early enough for columnDefs.targets to use. You will need to apply them before. I assigned the class directly in the th.
http://live.datatables.net/kupizova/2/edit

Kevin

soulbriski

Thanks for your help Kevin. I can see from your example that assigning the class directly in the th is also a way to acheive the same goal.