Sorting and | for sort order. about vue-table HOT 7 CLOSED

@tmikaeld Can you please explain more about this?

from vue-table.

If i set:
:sort-order="[{ field: 'id', direction: '' }]"
or:
:sort-order="[{ field: 'id' }]"

I will get ?id=|

While in the API I'm consuming, sort order is defined with -id for descending and id for ascending. Not sure how to accomplish that without changing the library code.

from vue-table.

@tmikaeld OK. I think of something and let you know. May not be tonight though.

from vue-table.

@tmikaeld What I would do is to modify getSortParam() a bit that it will check if there is getSortParam() method in its parent instance. And if there is, it will call the method (with the sortOrder as its argument) on the parent instance instead of using the default one.

So, you could effectively override how the sort parameter would be constructed before sending it to the server in the loadData().

This way I don't have to introduce another prop.

from vue-table.

This was the best i could come up with without creating a new prop.

With this you just set seperator: '+-' in the :sort-order prop object.

:sort-order="[{ field: 'id', direction: 'desc', seperator: '+-' }]"

The change in vue-table.js, from line 661:

        getSortParam: function getSortParam() {
            if (!this.sortOrder || this.sortOrder.field == '') {
                return '';
            }

            var result = '';

            for (var i = 0; i < this.sortOrder.length; i++) {
                var fieldName = typeof this.sortOrder[i].sortField === 'undefined' ? this.sortOrder[i].field : this.sortOrder[i].sortField;

                console.log(this.sortOrder[i].seperator)

                //Support for -fieldName fieldName as ascending/descending sort order instead of fieldName|desc fieldName|asc
                if(!this.sortOrder[i].seperator == '+-') {
                  result += fieldName + '|' + this.sortOrder[i].direction + (i + 1 < this.sortOrder.length ? ',' : '');
                } else {
                  if(this.sortOrder[i].direction == 'asc') {
                    result += fieldName.replace('-','') + (i + 1 < this.sortOrder.length ? ',' : '');
                  } else {
                    result += '-'+fieldName.replace('-','') + (i + 1 < this.sortOrder.length ? ',' : '');
                  }

                }

            }

            return result;
        },

Let me know if it's good enough to include to the library.

from vue-table.

@tmikaeld FYI. No new prop is needed. I just don't have time for the documentation right now, sorry.

this is now in develop branch.

this is the example for Semantic UI.

And this is for Bootstrap.

from vue-table.

That's certainly more flexible, thanks!

from vue-table.