SearchPanes + Save State + Server Side Processing

APWW

Having an issue when using SearchPanes 1.2.2 with save state and server-side processing.

After making a selection from a search pane and refreshing the page, the save state is missing searchPanes['selectionList']. The consequence is that subsequent page refreshes will not apply search pane filters. However, triggering dt.ajax.reload() with a button applies the search pane filters and the save state is updated with the searchPanes['selectionList'].

APWW

Live demo: https://apwdev.com/dt/

Select a color from the search pane and refresh the page - everything looks good, but refresh the page once again and the search pane filtering won't be applied.

APWW

Although likely irrelevant, I've included ssp.php below:

$request = $_REQUEST;

$db = array(
    array(
        'ID' => 1,
        'color' => 'Green',
        'state' => 'Oregon'
    ),
    array(
        'ID' => 2,
        'color' => 'Red',
        'state' => 'Texas'
    ),
    array(
        'ID' => 3,
        'color' => 'Green',
        'state' => 'Colorado'
    ),
    array(
        'ID' => 4,
        'color' => 'Blue',
        'state' => 'California'
    ),
    array(
        'ID' => 5,
        'color' => 'Red',
        'state' => 'California'
    ),
);


if( ! empty( $request['searchPanes']['color'] ) ) {
    $color = $request['searchPanes']['color'][0];
    $data = array_values( ssp_filter( $db, 'color', $color ) );
} else {
    $data = $db;
}

$response['draw'] = intval( $request['draw'] );
$response['recordsFiltered'] = count( $data );
$response['recordsTotal'] = count( $db );
$response['data'] = $data;

if( $request['draw'] == 1 ) {
    $response['searchPanes'] = array(
        'options' => array(
            'color' => array( 
                array(
                    'label' => 'Green',
                    'value' => 'Green',
                    'total' => 2,
                    'count' => 2
                ),
                array(
                    'label' => 'Red',
                    'value' => 'Red',
                    'total' => 2,
                    'count' => 2
                ),
                array(
                    'label' => 'Blue',
                    'value' => 'Blue',
                    'total' => 1,
                    'count' => 1
                ),
            ),
        )
    );
}

$json = json_encode( $response );

header( 'Content-Type: application/json; charset=utf-8' );
echo $json;
die;


function ssp_filter( $array, $key, $key_value ) {
    return array_filter( $array, function( $value ) use ( $key, $key_value ) {
        return $value[$key] == $key_value; 
    } );
}

sandy

Hi @APWW ,

Thanks for the test case. I'm afraid the filter remains selected no matter how many times I refresh the page. Are there any other steps that you are taking?

Thanks,
Sandy

APWW

The problem is not the search pane state, but the filtering applied to the table.

Steps:
1. Select Green - 2 records shown
2. Refresh page - 2 records shown
3. Refresh page - 5 records shown

sandy

Hi @APWW ,

Ah yes I can see the issue now. I've also managed to replicate it locally. I've raised an issue internally (DD-1937 for my reference) and will report back here when there is an update, hopefully later today.

Thanks,
Sandy

sandy

Hi @APWW ,

That should be the issue fixed now. This will be available in the next SearchPanes release which we hope will be in the next few weeks. Until then you can access the fix from the nightly builds.

Thanks,
Sandy

APWW

Hi @sandy,

I'm grateful for your help. I updated my demo and included a version with the fix applied. I will leave the demo up until the fix is released.

I assume the styling differences in the current SearchPanes 1.3.0 build is due to it being under development. (ie. div.dtsp-panesContainer)

colin

I'm surprised there would be any styling differences between the two releases as we try to keep that consistent. Please could you give an example of the difference you're seeing. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

colin

Ah, apologies, I see you've done that already

https://apwdev.com/dt/fix.php
https://apwdev.com/dt/

We'll take a look and report back,

Colin

sandy

Hi @APWW ,

There have been a couple of styling changes (or other changes that have a knock on effect of changing the styling) made since the last official release.

The pane here is full width because the searchPanes.layout option now defaults to auto which will match the panes to the width of the container the best it can. That explains why the pane is now full width.

Beyond this the "Clear All" button gets a grey colour when nothing is selected. We have also removed the border around the SearchPanes for a cleaner look.

The last change I can see is the fonts. The font family that SearchPanes was applying in previous versions has been removed so to ensure consistency with the rest of the page.

Hope this helps to explain,
Sandy

APWW

Hi @sandy,

Thank you for the styling clarification.

As @colin indicated, it is a surprise as the styling is normally consistent across releases, but I understand the changes and it is better to get it right early than to change later.