Vue Js 2 Tutorial- How To Create A Dynamic Table In Vue Using jQuery Datatables

Learn How To Create A Dynamic Table In Vue Using jQuery Datatables

In this tutorial, we will learn how to create a dynamic table in Vue js using jQuery Datatables.

Most of us already know that the primary use of a data table is to display data in an easy manner. This makes the user scan the data in one go and that too in quite an easy way.

When we need to show simple or short information, then there is no difficulty in that but when it comes to showing data with hundreds, thousands of records, then it can prove to be a big difficult situation.

 

In today’s Vue js jQuery datatable tutorial, we will tackle a similar situation of managing a large amount of data through DataTables. We will learn how to create datatable in the Vue js app using the jQuery DataTable library.

In addition, we will get to understand a smooth way to use the jQuery DataTables in Vue js to display the data in rows and columns format.

 

Error: digital envelope routines::unsupported
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'

To remove the above error for invoking the app, make sure to update the “scripts”: [] array in the package.json file.

 

"scripts": {
    "serve": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
    "build": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build",
    "lint": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service lint"
},

How To Integrate jQuery DataTables In Vue 2 App

Step 1- Create Vue Project

Step 2- Install Datatables + jQuery + Bootstrap Packages/li>

Step 3- Install Axios Library

Step 4- Create jQuery DataTable Component

Step 5- Register DataTable Component

Step 6- Run Vue Application

 

Step 1- Create Vue Project

First of all, we have to install a standard CLI tool for Vue Js development. We will have to do so using the below command:

npm install -g @vue/cli

 

Further, we need to download a new Vue js app by typing the following command on the console. When we are asked about the version of Vue, then we can choose Vue 2 or 3:

vue create vue-datatable-demo

 

Then, we will get into the project’s root:

cd vue-datatable-demo

 

Step 3- Add Datatables + jQuery + Bootstrap Packages

In order to install jQuery, datatables, and bootstrap packages in the Vue js project, we will have to type the following command:

npm install jquery datatables.net-dt bootstrap

 

Step 4- Install Axios Library

We will show the JSON data in the Vue table. We will be needing a REST API to get the data from an API that utterly relies on the Axios package for which we have to install the Axios package:

npm install axios

 

Step 5- Create jQuery DataTable Component

Since all the libraries have been added to the Vue js app, we will see further how to accumulate all the packages to create a jQuery datatable for displaying data systematically in the Vue app.

Afterward, we have to create a JqueryTable.vue file in the components folder after which, we will place the following code in the components/JqueryTable.vue template:

<template>
  <div>
    <h2>Implement jQuery DataTable in Vue Js</h2>
    <table class="table" id="datatable">
      <thead>
        <tr>
          <th>ID</th>
          <th>Product Title</th>
          <th>Product Price</th>
          <th>Created On</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in products" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.product_title }}</td>
          <td>{{ item.product_price }}</td>
          <td>{{ item.created_at }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
import "jquery/dist/jquery.min.js";
import "bootstrap/dist/css/bootstrap.min.css";
import "datatables.net-dt/js/dataTables.dataTables";
import "datatables.net-dt/css/jquery.dataTables.min.css";
import axios from "axios";
import $ from "jquery";
export default {
  mounted() {
    axios.get("API_Goes_Here").then((response) => {
      this.products = response.data;
      $("#datatable").DataTable();
    });
  },
  data: function () {
    return {
      products: [],
    };
  },
};
</script>

 

Step 6- Register DataTable Component

Then, we have to open the App.vue file and register the newly created components after which we will have to add the given code within the file:

<template>
  <div class="container mt-4">
    <JqueryTable/>
  </div>
</template>
<script>
import JqueryTable from './components/JqueryTable.vue'
export default {
  name: 'App',
  components: {
    JqueryTable
  }
}
</script>
<style>
  .container {
    max-width: 1000px;
  }
</style>

Step 6- Run Vue Application

So, we have reached the final step of this Vue guide where we have to head over to the command-line tool and type the given command. This will run the Vue app in the browser:

npm run serve

 

Conclusion

In this Vue js query datatable example, we have learned how to integrate jQuery datatables in the Vue js app.

We have also seen how to display data dynamically into a data table using the Axios and JSON server and a REST API in the Vue js app using the jQuery datatable package.

 

Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *