Sorting and | for sort order.

[tmikaeld]

My API doesn't use | seperator for sort order, this should be an option not a requirement (It's added even if direction: '' is empty.

[ratiw]

@tmikaeld Can you please explain more about this?

[tmikaeld]

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.

[ratiw]

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

[ratiw]

@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.

[tmikaeld]

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.

[ratiw]

@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.

[tmikaeld]

That's certainly more flexible, thanks!