Vue Js: Как использовать jquery DataTable в приложении vuejs
В этом руководстве вы узнаете, как использовать jquery dataTables в приложении Vue js. А также, как отображать динамические данные в таблице с помощью json apis с jQuery dataTable в приложении vue js.
В этом руководстве вы шаг за шагом узнаете, как использовать jQuery datatable в приложении vue js. И вы можете легко использовать jQuery dataTable в vue.js и отображать данные с помощью json apis.
Как использовать jquery dataTable в приложении vuejs
Просто выполните следующие шаги и внедрите jquery dataTable в приложение vuejs:
Шаг 1 - Создайте новое приложение VUE JS
На этом шаге откройте терминал и выполните следующую команду, чтобы создать новое приложение vue js:
vue create my-app
Шаг 2 - Установите библиотеку jQuery DataTable
На этом шаге откройте свой терминал и выполните следующие команды, чтобы установить библиотеку данных jQuery и Bootstrap в вашем приложении vue js:
cd my-app
npm install --save datatables.net-dt
npm install jquery --save
npm i axios
npm i bootstrap
Шаг 3 - Создать компонент
На этом этапе перейдите в каталог /src/components и создайте новый компонент с именем VueDataTable.vue и добавьте в него следующий код:
<template>
<h1>Vue 3 jQuery DataTable Example Tutorial</h1>
<table class="table table-hover table-bordered" id="example">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Job Title</th>
</tr>
</thead>
<tbody>
<tr v-for="user in users" :key="user.id">
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td>{{user.email}}</td>
<td>{{user.job_title}}</td>
</tr>
</tbody>
</table>
</template>
<script>
//Bootstrap and jQuery libraries
import 'bootstrap/dist/css/bootstrap.min.css';
import 'jquery/dist/jquery.min.js';
//Datatable Modules
import "datatables.net-dt/js/dataTables.dataTables"
import "datatables.net-dt/css/jquery.dataTables.min.css"
import $ from 'jquery';
import axios from 'axios';
export default {
mounted(){
//API Call
axios
.get("https://www.testjsonapi.com/users/")
.then((res)=>
{
this.users = res.data;
$('#example').DataTable();
})
},
dаta: function() {
return {
users:[]
}
},
}
</script>
Шаг 4 - Добавьте компонент в main.js
На этом шаге посетите каталог /src/ и файл main.js. А затем добавьте в него следующий код:
import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
Шаг 5 - Импорт компонента в App.vue
На этом шаге импортируйте компонент в файл src -> App.vue, как показано ниже:
// App.vue
<template>
<div id="app">
<vue-data-table></vue-data-table>
</div>
</template>
<script>
import VueDataTable from './components/VueDataTable'
export default {
name: 'app',
components: {
VueDataTable
}
}
</script>
В этом руководстве вы узнали, как использовать DataTable jquery в приложении vue js. А также, как отображать динамические данные в таблице, используя json apis с jQuery datatable в приложении vue js.
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.