MicroDroid/vue-materialize-datatable

Server Search Issues

carlosdico opened this issue · 6 comments

carlosdico commented

I'm having problems with the server side search. I'm using Vue.js and when I start a search, the callback is called but in a loop. Y need to delete the letter introduced in the search input to stop the calls to the server.

How can I fix it?

Thanks.

MicroDroid commented
carlosdico commented

Sure
This is my datatable

<DataTable :title="title" :exportable="false" :printable="false" :columns="columns" :rows="rows" :serverSearch="true" :serverSearchFunc="serverSearchFunction" locale="es"> </DataTable>
And this is the script that load and update the datatable

`<script>
import DataTable from 'vue-materialize-datatable';

export default {
    name: "UserList",
    components: {
        DataTable,
    },
    data() {
        return {
            title: this.$t("user.selfs"),
            rows: [],
            columns: [],
        }
    },

    created(){

        this.columns.push({
            field: 'name',
            label: 'Usuario',
        });

        this.columns.push({
            field: 'displayname',
            label: 'Nombre',
        });

        this.columns.push({
            field: 'email',
            label: 'Correo electrónico',
        });


        this.$http.get('user')
            .then(function (response) {
                    console.log(response.data);
                    this.rows = response.data;
                }
            );
    },
    methods: {

        serverSearchFunction() {

            this.$http.get('users/searchUser')
                .then(function (response) {
                    console.log(response.data);
                    this.rows = response.data;
                });
        },
    },
},

</script>`

Thanks

MicroDroid commented

Try replacing this.rows only when response.data is not exactly same as this.rows.

I suspect that when you replace this.rows, internal processedRows computed property does get called again which re-triggers the callback.

@shafiqueqadri This is a bug though, can you please verify my suspicion and fix that?

carlosdico commented

Thanks MicroDroid,

I add this code to the function
if(JSON.stringify(this.rows) != JSON.stringify(response.data)){ this.rows = response.data; }

This fix the problem with the multiple calls but now I have an error with the paginatedRows

`[Vue warn]: Error in render: "TypeError: paginatedRows is undefined"

found in
at node_modules/vue-materialize-datatable/src/DataTable.vue
at resources/assets/js/components/user/UserList.vue
at resources/assets/js/components/App.vue
`

MicroDroid commented
MicroDroid commented

Should be fixed now!