Reports

I needed a way to get the user input values from a multi-select DataTable (using the select plugin). I'm going to add this code, but it wouldn't be that hard to adapt to a non-multi-select use case.

Basically, it's building an array of the id of each selected row. That array is looped through and it makes an array of the selected data for each row (which it finds by the row ID). At this point, I'm making an array of objects to upload with ajax. This last step could be altered depending on your use case:

async function processUserInput() {
        cardioArry = [];
        var rowData = tblRecentCardio.rows({ selected: true }).data().toArray();
        await rowData.forEach(getUserInput);
        await postCardioLog(cardioArry)
    }

    async function getUserInput(rowData) {
        let rowId = rowData.RowId
        let exerciseId = rowData.ExerciseId;
        let description = rowData.Description;
        let duration = $(`table#tbl-cardio tr#${rowId}`).find('#duration').val();
        let calories = $(`table#tbl-cardio tr#${rowId}`).find('#calories').val();
        let distance = $(`table#tbl-cardio tr#${rowId}`).find('#distance').val();
        buildCardioObj(exerciseId, description, duration, calories, distance);
    }

    function buildCardioObj(exerciseId, description, duration, calories, distance) {

        const cardioObj = {
            ExerciseId: exerciseId,
            Description: description,
            Duration: duration,
            Distance: distance,
            Calories: calories,
            Date: activityDate,
        }
        cardioArry.push(cardioObj);
    }

    // Ajax post done here:
    async function postCardioLog(cardioArry) {

        dtUserInput(cardioArry);

        // const url = '/api/log/';
        // const params = {
        //     CardioBulkLog: cardioArry,
        // }
        // this.isFetching = true;
        // const data = await request(url, params, 'POST');
        // this.isFetching = false;  
        // if (data == "1") {

        // }          
    }

cardioArray is a globally available variable. "tblRecentCardio" is the jquery name for the table, and "tbl-cardio" is the html table id. Also, in the above example, "#duration" is the id of an input element in the table row.

The function "processUserInput()" is attached to a button external to the DataTable.

The function "dtUserInput(cardioArry);" is just another DataTable I used in the demo to display the user input. This would be removed and the object array could be posted to the backend in this function.

This does require that each row has a unique row ID, because jquery is finding the selected rows by the row id.

I made a live demo and it's available at the link below. It's using Alpine.js, but that's mainly to load the data. Nothing with the above code requires Alpine.js:

http://vue.qwest4.com/playground/datatables-user-input-multiselect.html

79314516