javascript - Restructure BootstrapVue table sorting language priority

Question

https://codesandbox.io/s/vue-template-2je6c?file=/src/App.vue

I'm gonna to customized our own sorting sequence in bootstrapVue's table like above, coding function in bootstrapVue table's open dock":sort-compare".

So here is my sorting rule

1. When it comes to Descend the language has to follow the priority "Mandarin"-->"English"-->"Number" , and if it comes to ascend all of items follows the contrary "Number"-->"English"-->"Mandarin"

2. The compared target becomes to every item's first word. If two of items's first word were exactly the same, both change to compare the second word and still follow the rule one "Mandarin"-->"English"-->"Number"

example:

given 10 items: ['果apple5','果果pple','a果ple','appl蘋果蘋果e','apple','蘋果蘋plexx','apple', '5apple', '果5apple','蘋果蘋果']

when it comes to descend, the sequence should be like this [ '蘋果蘋果', '蘋果蘋plexx', '果果pple', '果apple5', '果5apple', 'a果ple', 'appl蘋果蘋果e', 'apple', 'apple', '5apple' ]

The following is my failure code I show you for understanding more clearer but it has flaw which is when I apply it those exactly same items doesn't be sorted put together anymore.

    let mandarinRegexp = /[u4E00-u9FA5]+/
    let englishRegexp = /[A-Za-z]+/
    let numberRegexp = /[0-9]+/
    let outsideStart = 0
    let outsideNext = true
    while (outsideNext) {
        let aComparedText = targetA.substr(outsideStart, 1)
        let bComparedText = targetB.substr(outsideStart, 1)
        if (aComparedText.length !== 0 && bComparedText.length !== 0) {
            if (!numberRegexp.test(aComparedText) && !numberRegexp.test(bComparedText) || aComparedText === bComparedText) {
                if (aComparedText !== bComparedText) {
                    if (!sortDesc) {
                        console.log('!sortDesc')
                        if (mandarinRegexp.test(aComparedText) && !mandarinRegexp.test(bComparedText)) {
                            return 1
                        } else if (targetA === targetB) {
                            return 0
                        } else {
                            return -1
                        }
                    } else {
                        if (englishRegexp.test(aComparedText) && !englishRegexp.test(bComparedText)) {
                            console.log('return 1')
                            return -1
                        } else if (targetA === targetB) {
                            return 0
                        } else {
                            console.log('return ----1')
                            return 1
                        }
                    }
                } else {
                    outsideStart++
                }
            } else {
                outsideNext = false
            }
        } else {
            outsideNext = false
        }
    }

If there is any part of my description unclear, please talk me. I will reply you as soon as I can Thank you all guy coming here to read my question deeply.

Sincerely

question from:https://stackoverflow.com/questions/65713038/restructure-bootstrapvue-table-sorting-language-priority

Answer 1

Waitting for answers