Reorder the column filter integration options

ArielSAdamsNASA

Link to test case: http://live.datatables.net/fotorewe/19/
Description of problem: How would one reorder the options in the filter? I do not want them to be in alphabetical order. For example, in Office, I want New York to be the first option.

colin

SearchPanes are just DataTables, so you can orthogonal data on them to change the ordering, see example here. It's setting "New York" to be the lowest number so it appears at the top of the list,

Colin

ArielSAdamsNASA

@colin

Quick question: How would one remove the option "Edinburgh, New York". I want them to be their own options, so one is Edinburgh and one is New York, not the combination of both.

http://live.datatables.net/bafuhare/30/edit

colin

You would use orthogonal data for that - see this example from this thread,

Colin

ArielSAdamsNASA

@colin

When implementing http://live.datatables.net/bafuhare/29/edit, I get the error:

DataTables warning: table id=DataTables_Table_6 - Requested unknown parameter '0' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4

The error goes away when removing targets: [3], but the reordering no longer works
My code looks like:

                                  searchPanes: {
                                        name: 'when-to-consider',
                                        header: 'When to consider',
                                        show: true,
                                        // Reorder options for When to consider
                                        // Reference: https://stackoverflow.com/questions/67544225/how-to-specify-custom-order-of-options-in-searchpanes-for-datatables
                                        dtOpts: {
                                          columnDefs: [ {
                                            **targets: [3],**
                                            render: function ( data, type, row, meta ) {
                                              if (type === 'sort') {
                                                var dayNum;
                                                switch(data) {
                                                  case 'Project Startup':
                                                    dayNum = 1;
                                                    break;
                                                  case 'Project Planning':
                                                    dayNum = 2;
                                                    break;
                                                  case 'Software Requirements Engineering':
                                                    dayNum = 3;
                                                    break;
                                                  case 'At SW SRR':
                                                    dayNum = 4;
                                                    break;
                                                  case 'Design':
                                                    dayNum = 5;
                                                    break;
                                                  case 'At SW PDR':
                                                    dayNum = 6;
                                                    break;
                                                  case 'At SW CDR':
                                                    dayNum = 7;
                                                    break;
                                                  case 'Coding and Integration':
                                                    dayNum = 8;
                                                    break;
                                                  case 'Software Verification and Validation':
                                                    dayNum = 9;
                                                    break;
                                                  case 'Product Release and Transition':
                                                    dayNum = 10;
                                                    break;
                                                  case 'Sustaining Engineering and Maintenance':
                                                    dayNum = 11;
                                                    break;
                                                  case 'Throughout the project':
                                                    dayNum = 12;
                                                    break;
                                                }
                                                return dayNum;
                                              } else {
                                               return data;
                                             }
                                            }
                                          } ]
                                      },
                                        options:[{
                                    label: 'Project Startup',
                                    type: "checkbox",
                                    value: function(rowData, rowIdx) {
                                        return rowData[3].includes("Project Startup");
                                    }
                                },
                                {
                                    label: 'Project Planning',
                                    type: "checkbox",
                                    value: function(rowData, rowIdx) {
                                        return rowData[3].includes("Project Planning");
                                    }
                                },
                                {
                                    label: 'At SW SRR',
                                    type: "checkbox",
                                    value: function(rowData, rowIdx) {
                                        return rowData[3].includes("At SW SRR");
                                    }
                                },
                                {
                                    label: 'Software Requirements Engineering',
                                    type: "checkbox",
                                    value: function(rowData, rowIdx) {
                                        return rowData[3].includes("Software Requirements Engineering");
                                    }
                                },
                                {
                                    label: 'Design',
                                    type: "checkbox",
                                    value: function(rowData, rowIdx) {
                                        return rowData[3].includes("Design");
                                    }
                                },
                                {
                                    label: 'Coding and Integration',
                                    type: "checkbox",
                                    value: function(rowData, rowIdx) {
                                        return rowData[3].includes("Coding and Integration");
                                    }
                                },
                                {
                                    label: 'Software Verification and Validation',
                                    type: "checkbox",
                                    value: function(rowData, rowIdx) {
                                        return rowData[3].includes("Software Verification and Validation");
                                    }
                                },
                                {
                                    label: 'Product Release and Transition',
                                    type: "checkbox",
                                    value: function(rowData, rowIdx) {
                                        return rowData[3].includes("Product Release and Transition");
                                    }
                                },
                                {
                                    label: 'Sustaining Engineering and Maintenance',
                                    type: "checkbox",
                                    value: function(rowData, rowIdx) {
                                        return rowData[3].includes("Sustaining Engineering and Maintenance");
                                    }
                                },
                                {
                                    label: 'At SW PDR',
                                    type: "checkbox",
                                    value: function(rowData, rowIdx) {
                                        return rowData[3].includes("At SW PDR");
                                    }
                                },
                                {
                                    label: 'At SW CDR',
                                    type: "checkbox",
                                    value: function(rowData, rowIdx) {
                                        return rowData[3].includes("At SW CDR");
                                    }
                                },
                                {
                                    label: 'Throughout the project',
                                    type: "checkbox",
                                    value: function(rowData, rowIdx) {
                                        return rowData[3].includes("Throughout the project");
                                    }
                                },
                                               ]

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

colin

I'm not seeing that in the example you posted. Please can you update it to demonstrate the error,

Colin

ArielSAdamsNASA

@colin I managed to fix the issue, but I found a new one.

http://live.datatables.net/bafuhare/35/

The ordering for anything above 10 is wrong.

Ten and eleven should be at the last of the list, but it is not.

colin

It's treating it as a string - you can force it to be a number with columns.type, see your example updated here: http://live.datatables.net/bafuhare/36/edit

Colin

ArielSAdamsNASA

@colin

http://live.datatables.net/bafuhare/39/edit

How would I view the total results for the filter? viewTotal:true is not working.

colin

It seems like the columnDefs is interfering with the searchPanes.viewTotal. We'll take a look and report back, probably towards the end of this week,

Colin

ArielSAdamsNASA

@colin

Thank you. I appreciate it!

sandy

Hi @ArielSAdamsNASA ,

You need to be careful when changing the columnDefs of the SearchPanes. SearchPanes does set values for the rendering itself, and while it is fine to change these, you need to be sure to include any elements that you want to remain.

You can see the SearchPanes columnDefs code here. And I've updated your example here.

Thanks,
Sandy

ArielSAdamsNASA

@sandy

Thank you for the updated example! If I wanted to show the cascadePanes, but not viewTotal, how would I do so for the Office column? In other words, when I click an item in the Name filter, there is a number in parenthesis for the Office filter that I do not want. This number does not show for the Name filter, when clicking an item in the Office filter.

http://live.datatables.net/kuvavapu/2/edit

colin

You should be able to use searchPanes.viewTotal to disable that, but it doesn't appear to be working. I'll see if Sandy has any thoughts on it,

Colin

ArielSAdamsNASA

@colin

Thank you. I was also wondering if there was a way to use cascadePanes and viewTotal, but exclude the second number in the parenthesis. So when a user clicks the option Tiger Nixon in the Name filter, the Office filter shows the option Moore and the number of results left which would be just 1 instead of 1 (1).

http://live.datatables.net/kuvavapu/2/edit

allan

searchPanes.hideCount is what you want I think.

Allan

ArielSAdamsNASA

@allan

I still want the numbers to appear, just not the total number in the parenthesis. So, when a user clicks on a filter, the number should say how many results are left not how many results there are in total.

allan

Ah I see - thanks for the clarification. Yes, that can be customised as shown in this example.

Allan

ArielSAdamsNASA

@allan

Can the total number not be displayed at all and just the shown number displayed?

Edit: Found the answer, just removed {{ total }}

sandy

Hi @ArielSAdamsNASA ,

Yes, that is exactly what you want to do. Because you are doing it on a column basis you will need to change the i18n function call in the render function rather than using the i18n initialisation options as this would affect all of the panes.

Thanks,
Sandy

ArielSAdamsNASA

@sandy

In the example you provided, http://live.datatables.net/kuvavapu/1/edit, I get the error
for my private internal website.

I cannot replicate the error in a fiddle, but here is all the code I am using http://live.datatables.net/riyejume/1/edit

Edit: I removed that entire function, and the error is still there so I doubt it is the reorder column function.

sandy

Hi @ArielSAdamsNASA ,

You're using an old version of SearchPanes. Try updating to use the new and improved v2 of SearchPanes - I'd imagine this may fix the problem. You can also try using the nightly build for the most up to date fixes.

If the bug persists then we will take a deeper look then.

Thanks,
Sandy

ArielSAdamsNASA

@sandy

That seemed to work, but now my searchpanes are messed up.

http://live.datatables.net/riyejume/5/edit

As seen in the test case, it does not save the state of the searchpanes.
1. Click flight in project type
2. Click Run with JS
The flight option is no longer selected

Also, the options that have 0 are still shown. All options in the searchpanes whose value is 0 should be gone.

sandy

Hi @ArielSAdamsNASA ,

I've made a fix that removes the rows that have no records present. 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.

As for your stateSave issue, I'm afraid that isn't possible. The docs for custom options state

Note: Custom search functions are not compatible with stateSave. This is because the state is saved as a JSON object and functions cannot be represented in JSON.

Thanks,
Sandy

ArielSAdamsNASA

@sandy

Thank you for fixing the issue. I look forward to the next release!

I wonder why stateSave worked in the past for custom search functions in version 1.4.0, but no worries.