SearchPanes Sort Total

joseoliveiraborlas · February 4

After approximately 80 pages on this forum, I was unable to find information about: how (if possible) to organize/sort automaticly a searchPanes panel with the {total} or {found} of results, instead of the title. It's possible? If yes, where is this information provided?

It's like when you click on sort icon, bujt i dont have buttons, i want sort auto in inicialization

I leave an image to illustrate my bad English!

allan · February 5

Try using the searchPanes.dtOpts property to set the ordering for the pane's DataTable to be on the second column:

    $('#example').DataTable({
        searchPanes: {
            dtOpts: {
                order: [[1, 'asc']]
            }
        },
        dom: 'Plfrtip'
    });

Allan

joseoliveiraborlas · February 6

Hello. Thanks for the response. But it doesn't change anything, I tried it on all panels and it doesn't make any changes, whether asc or desc.

columnDefs: [
    {
        searchPanes: {
            orthogonal: 'sp',
            dtOpts: {
                scrollY: 145,
                scrollCollapse: true,
        order: [[0, 'asc'], [1, 'asc'], [2, 'asc'], [3, 'asc'], [4, 'asc'], [5, 'asc']],  // <---------
            }
        },
        target: '_all'
    }
],

searchPanes: {
    controls: false,
    viewTotal: true,
    orthogonal: 'sp',
    columns: [2, 3, 5, 6],
    layout: 'columns-4',
    dtOpts: {
        dom: 'pt',
        paging: false,
        searching: false,
        viewTotal: false,
        scrollY: '145px'
    }
},

kthorngren · February 6

Each searchPane is a separate Datable with only two columns. You are specifying more than two columns with this:

order: [[0, 'asc'], [1, 'asc'], [2, 'asc'], [3, 'asc'], [4, 'asc'], [5, 'asc']],

To apply to all searchPanes add order: [[1, 'asc']] to your searchPanes.dtOpts section starting in line 21. You are probably getting a Javascript error in the browser's console due to specifying columns that don't exists, ie [2, 'asc'], [3, 'asc'], [4, 'asc'], [5, 'asc'].

For example:
https://live.datatables.net/feqalori/1/edit

However if you want to use columns.searchPanes.dtOpts then use order: [[1, 'asc']]`` only. For example:
https://live.datatables.net/feqalori/1/edit

Kevin

joseoliveiraborlas · February 6

Hi Kevin,

Do you have the second example? The URL as the same as first.

kthorngren · February 6

Sorry about that:
https://live.datatables.net/feqalori/4/edit

Its similar to the example in the columns.searchPanes.dtOpts docs. Set the columns.targets to the appropriate setting. Basically remove the order option you have and replace with order: [[1, 'asc']].

Kevin

joseoliveiraborlas · February 7

I can't make it work. Nothing changes with 'order'.
Maybe it's incompatible with 'orthogonal'? Or something conflicting?
I don't know why I need all this code, repeating sometimes, but it's working this way. If I remove something in columnDefs or searchPanes, something goes wrong. I really never understood the differences between the two manners.

columnDefs: [{
        searchPanes: {
            dtOpts: {
                order: [
                    [1, 'asc']
                ]
            }
        },
        targets: [4]
    }, {
        searchPanes: {
            orthogonal: 'sp',
            dtOpts: {
                scrollY: 145,
                scrollCollapse: true,
            }
        },
        target: '_all'
    }],

    searchPanes: {
        controls: false,
        viewTotal: true,
        orthogonal: 'sp',
        columns: [2, 3, 5, 6],
        layout: 'columns-4',
        dtOpts: {
            dom: 'pt',
            paging: false,
            searching: false,
            viewTotal: false,
            scrollY: '145px'
        }
    },

allan · February 7

Here is an example showing it working: https://live.datatables.net/cijudeqa/1/edit .

Maybe just move the order from dtOpts into the global SearchPanes dtOpts so it applies to all panes?

Allan

kthorngren · February 7

I really never understood the differences between the two manners

The searchPanes option provides configuration options that affect all the searchPanes. Using columns.searchPanes, ie in columnDefs, allows for configuring searchPanes options specific to one or more columns defined by columnDefs.targets.

I don't know why I need all this code, repeating sometimes, but it's working this way.

Using targets: "_all" will apply to all searchPanes columns. Any SearchPanes config options defined in columns.searchPanes will override the options configured in searchPanes. Anything under the targets: "_all" should just go in the main -optino searchPanes option. Like this:
https://live.datatables.net/cutopese/1/edit

For the order: [ [1, 'asc'] ] option you have targets: [4] but you aren't displaying column 4 according to the columns: [2, 3, 5, 6], setting. I changed my example to use column 2, the Office column. This index represents the table column displayed by the SearchPane not the SearchPane itself.

Kevin

joseoliveiraborlas · February 7

This code doesn't appear to do anything, anywhere. Regardless of where I put it and the information I put, it doesn't change the SearchPanes at all.

I'm using 'orthogonal', I've already tried deactivating it.

language: { searchPanes: { count: '{shown}', countFiltered: '{shown}' }}
I already removed it too.

In data I am using for example:

columns: [
{ "data": "object" , "searchable": true },
]

I can even putorder: [ [8465145, 'asc'] ]and it never gives an error. It gives the feeling that you are not even assuming.

joseoliveiraborlas · February 7

Hi kthorngren,

I reduced my code to:

columnDefs: [{
    searchPanes: {
        dtOpts: {
            order: [
                [1, 'asc']
            ],
        }
    },
    target: '_all'
}], 

searchPanes: {
    viewTotal: true,
    columns: [6],
},

This dont order anything in SP:

allan · February 7

Are you using server-side processing? That's rather an important point here... My example shows that it can and does work, but that is client-side processing.

Allan

joseoliveiraborlas · February 12

No, I'm not using server-side. But I've tried server-side, and it still doesn't change anything in the 'order'. Any idea more?

I would like to take this opportunity to ask, if I use serverside I won't be able to customize the panes information, right? For example, as HTML to customize, like the attached image.

allan · February 12

Ordering by the aggregation count won't work with server-side processing enabled - not without changing the server-side libraries we provide anyway.

Assuming you want to peruse this, I'd need a link to a page showing the issue, since the example I linked to appears to be working well.

Allan

joseoliveiraborlas · February 14

Hello. By 'customize' I meant using orthogonal data like the imagem example. If it's possible, I'll forget this matter and move on to the server side first.

SearchPanes Sort Total

SearchPanes Sort Total

Answers

Howdy, Stranger!

Categories

DataTables

SearchPanes Sort Total

SearchPanes Sort Total

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables