Is it possible to have Server-side processing and preSelect on search panes?

hutchpd

Problem definition:

I want the user to land on the page with pre-selected options that they can chose to alter, and I need to use server-side processing due to the size of the data.

What I've tried:

I tried using the preSelect option in combination with the serverside: true flag.

Problems I found:

The searchPanes[ColumnName][i] field does not get populated on the first ajax call, subsequent ones do however. e.g. calling $('#dataTable.PreselectLive').DataTable().ajax.reload from console loads the data as expected after the table has rendered for the first time.

Interpretation

I believe the SearchPane doesn't get populated with data until after the first ajax call as that's where it gets it's data, so it sends nothing, however I know what it will be beforehand and wish to override that behaviour as in this case it will always be the same.

Sample code

$('#dataTable.PreselectLive').DataTable({
    "processing": true,
    "serverSide": true,
    "ajax": {
        "url": "/Event/GetEvents",
        "type": "POST"
    },
    searchPanes: {
        threshold: 1,
        columns: [1]
    },
    "columns": [
        { "data": 'CourseName' },
        { "data": 'Status' },
        { "data": 'StartDate' },
        { "data": 'EndDate' },
        { "data": 'Attendance' },
        { "data": 'Id' },
        { "data": 'Role' }
    ],
    select: true,
    dom: 'Pfrtip',
    language: {
        searchPanes: {
            clearMessage: 'Obliterate Selections',
            collapse: { 0: 'Search Options', _: 'Search Options (%d)' }
        }
    },
    buttons: [
        {
            extend: 'searchPanes',
            text: 'Search Options'
        },
        'excel',
        'pdf'
    ],
    "order": [[2, "asc"]],
    "columnDefs": [
        {
            "targets": [5,6],
            "visible": false
        },
        { "type": "date", "targets": 2 },
        {
            searchPanes: {
                preSelect: ['Created', 'Live', 'Uncompleted']
            },
            targets: [1]
        }
    ],
    dom: 'Bfrtip'
    //"initComplete": function (settings, json) {
    //    setTimeout($('#dataTable.PreselectLive').DataTable().ajax.reload, 1000);
    //}
})

Last notes

You'll see the commented out

    //"initComplete": function (settings, json) {
    //    setTimeout($('#dataTable.PreselectLive').DataTable().ajax.reload, 1000);
    //}

Does solve the problem, as a second after init the data does exist, however this is obviously inideal for the end users, and we'd rather get this done in one post.

I'm a bit stuck and unsure the best way forward, does anybody have any ideas to help me get it to do what I want it to do?

Any help will be greatly appreciated , thanks in advance for any replies.

sandy

Hi @hutchpd ,

Thanks for spotting this, I've reproduced the issue locally and I am seeing that the row is selected but that is not reflected in the filtering results for the table. I've raised an issue internally (DD-1661 for my reference) and will report back here when there is an update. This should be very soon!

Thanks,
Sandy

sandy

Hi @hutchpd ,

Normally you would perform a SearchPanes rebuild, but it is possible to apply the search on the first call. If you set a listener for the preXhr then you can add the required SearchPanes data to the request there. Something along the lines of...

$('#example').one('preXhr.dt', function ( e, settings, data ) {
        data.searchPanes = {};
        data.searchPanes["users.first_name"] = ['Alexa'];
    })
    .DataTable( {

Where users.first_name is your data point and Alexa is the data to select. You should also keep the preselect option in your config to select the rows in the panes.

Hope this helps,
Sandy

koko82

Hi @sandy,
I replicated your suggestion and the structure of @hutchpd ... it works perfectly!
Thanks a lot.