Is it possible to have Server-side processing and preSelect on search panes?
Is it possible to have Server-side processing and preSelect on search panes?
hutchpd
Posts: 1Questions: 0Answers: 0
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.
Replies
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
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
preXhrthen you can add the required SearchPanes data to the request there. Something along the lines of...Where
users.first_nameis your data point andAlexais 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
Hi @sandy,
I replicated your suggestion and the structure of @hutchpd ... it works perfectly!
Thanks a lot.