DataTable use ajax with vuejs

Long Lundy

why is datatable use ajax when has event Order data from server has be change but template #student has be not change like data from server?

<template>
<DataTable :columns="columns" :options="options" :ajax="ajax/json" class="display nowrap"
width="100%">
<template #student="props">
<span>{{props.rowData.Name}}</span>
<span>{{props.rowData.Age}}</span>
</template>
</DataTable>

</template>

import DataTable from "datatables.net-vue3"; import DataTablesCore from "datatables.net"; import "datatables.net-responsive-dt"; import "datatables.net-responsive"; import "datatables.net-fixedheader-dt"; import "datatables.net-fixedcolumns-dt"; import "datatables.net-rowreorder-dt"; // init dataTable DataTable.use(DataTablesCore); const columns = [ {title:'Id',data:'Id',className:'all',}, {title:'Student',data:null,className:'',render:'#student'}, {title:'Score',data:Score',className:'',}, ]

allan

Can you link to a test case showing the issue please? Ideally a minimal git repo or an example on StackBltiz, so I can take a look.

Allan

Long Lundy

here is my project test
https://stackblitz.com/~/github.com/mizterdy07/vue3-test-datatable?file=src/App.vue

allan

You've implemented your own sorting of the underlying data there. DataTables sees that the underlying data has changed (since it is reactive) and thus will re-display the whole table.

If you just want to sort data, you'd be better simply using the order() method:

function sortData(direct){
  let dt = datatable.value.dt;

  if(direct === "DESC"){
    dt.order([0, 'desc']).draw();
  }else if(direct ==="ASC"){
    dt.order([0, 'asc']).draw();
  }
}

Not sure if my update gets saved here: https://stackblitz.com/~/github.com/mizterdy07/vue3-test-datatable?file=src/App.vue:L32-L43 .

Allan