Range date filter with vuejs component

nunziorash

Hi I need help with vuejs <DataTable> component, how do i post the code?

colin

See if this thread here helps. If not, this SO thread looks like it's asking the same question,

Colin

nunziorash

Thank you very much.
This is the solution to the problem: LINK
I searched online but didn't get this result.
Thanks again.

nunziorash

Unfortunately I can no longer use ajax to load data, because there must be authorization with Bearer token.
By changing the code i have this situation:

With this function I retrieve the results

const risultati = ref([]);
const ajax_GET_URL = `${process.env.VUE_APP_API_BASE_URL}` + '/api/v1/utenti/';
        axios.get(ajax_GET_URL)
        .then(({data})=>{
            
            if(data.stato == 200){
            risultati.value = data.data;
            }

        }).catch(({response:{data}})=>{
            console.log(data.message)
        })

This is the date filter function

let dt
    const table = ref(null);
    function searchDate() {

    dt = table.value.dt

    //get dates
    const rangepicker = document.getElementById('cercaPerRangeDate').rangepicker;
    var dates = rangepicker.getDates();
    let min = dates[0];
    let max = dates[1];

    //get results
    let o = dt.data();

    //filter
    let filtered = o.filter(o => {
        // name column
        let colonnaData = o.data_inserimento;
        // formatting date
        let startDate = new Date(colonnaData.substr(6, 4), colonnaData.substr(3, 2) - 1, colonnaData.substr(0, 2));
        

        if (startDate) {
            if (min == null && max == null) {
                return true;
            }
            if (min == null && startDate <= max) {
                return true;
            }
            if (max == null && startDate >= min) {
                return true;
            }
            if (startDate <= max && startDate >= min) {
                return true;
            }
            return false;
        }
    })
    
    // diltering result
    dt.clear().rows.add(filtered).draw();
    }

When the two inputs with dates change, I have to call the filter function

//get input
        const MinElem = document.getElementById('min');
        const MaxElem = document.getElementById('max');

        MinElem.addEventListener('changeDate', function(e) {
            dt = table.value.dt;
            dt.clear().rows.add(risultati.value).draw() //not work
            searchDate() //not work
         
        });
        MaxElem.addEventListener('changeDate', function(e) {
            dt = table.value.dt;
            dt.clear().rows.add(risultati.value).draw() //not work
            searchDate() //not work

        });

But it does not work! It seems that the table data is not reset before doing the filter.
Help!!!

allan

If you can link to a page showing the issue so I can diagnose it, I'd be happy to help out.

Allan

nunziorash

https://stackblitz.com/edit/vue-vbhaca?file=src%2FApp.vue

This is the code but I couldn't get it to work, sorry. I'm learning vue by building an application but I've always used datatables. And I don't quite know how to post a vue code.
I apologize, can you help me please

allan

Hi,

Thanks for the link. However, I'm getting the following error from it:

Error in src/App.vue
Script missing

Does it run for you?

dt.clear().rows.add(risultati.value).draw() //not work

What is risultati.value value at that point? I'm not clear on why you are adding a row to the table when changing the filter date?

Allan

nunziorash

Sorry, I don't know how to run. I copied my code, but it doesn't start.
Anyway, I fixed it myself.
I managed to reset the table results, and start the search function immediately afterwards, when the two input dates change adding this:

dt.clear().draw();
dt.rows.add(risultati.value).draw();
searchDate()

Thanks anyway

allan

Good stuff - thanks for letting us know.

Allan