How to get selected row while using Vue3 without jQuery
How to get selected row while using Vue3 without jQuery
sol
Posts: 18Questions: 7Answers: 0
Hi all,
I'm a beginner to Datatables. 
I wonder there's a way to get selected row's info ( ex) index, value, invisible cell's value ...etc) while using Vue3 without jQuery
I tried this.$refs.tableCom.dt() or this.$refs.tableCom.row(), but 'Uncaught TypeError: ~ is not a function' occured..
These are my code.. ▼
<template>
<DataTable
class="display"
ref="tableCom"
:columns="this.tableColumns"
:data="this.tableData"
:options="{
scrollY: 200,
scroller: true,
bPaginate: false,
bInfo: false,
bSelect: true,
responsive: true,
autoWidth: true,
select: true,
language: {
zeroRecords: this.zeroRecords,
searchPlaceholder: 'input value',
sSearch: '<span> | </span>',
},
}"
@select="clickRow()"
>
</DataTable>
</template>
import DataTablesLib from 'datatables.net';
import DataTable from 'datatables.net-vue3';
import 'datatables.net-select';
import 'datatables.net-responsive';
import 'datatables.net-select-dt';
import log from 'loglevel';
DataTable.use(DataTablesLib);
export default {
name: 'TableCom',
components: {
DataTable,
},
props: {
tableColumns: {
type: Array,
default: null,
},
tableData: {
type: Array,
default: null,
},
zeroRecords: {
type: String,
default: 'No data.',
},
},
data() {
return {
selectedRow: '',
};
},
methods: {
clickRow() {
const table = this.$refs.tableCom;
log.info('table: %o', table.dt()); ----> ** this returns 'table.dt is not a function' **
},
},
};
This question has an accepted answers - jump to answer
Answers
Try:
I think you must have found a reference to the old v1 API for this plug-in. The v2 uses
value.dtfrom the reference.Allan
Thanks @allan, I'm touched by your kind response to many people's questions..
I tried these
But.. There's an error in both of them
I've thought this error could be related to Vue's lifecycle, because I read this forum.
But actually, I use 'dt' in
methods.. so.. It couldn't be related...OMG @allan.. I solved it!!!!!
I solved it with this code!
I'll leave it in case it helps other people
Thanks for your help, Allan!
I hope you have a good day:-)
hmm ... It's too early to be happy...
Another error occured...
when I clicked each row, always the first row's data is returned.
I used
row().data()... what's wrong my code....I think,
@select="clickRow()"does not return selected row's info..how can I solve this problem..
I read this. https://datatables.net/reference/api/row().data()
And I tried
row(this).data()androw({selected : true}).data()but result is the same...I solved again.
It works!
Nice one - thanks for posting back with your solution!
Allan