Vue Js 2 Dynamic jQuery DataTables Tutorial Example

Last Updated on March 4, 2024 by Digamber in Vue JS

If you want to know how to create a dynamic table in Vue js using the jQuery Datatables, then get along till the end of this tutorial.

The primary use of a data table is to display data in an easy manner so that a user can easily scan the data in one go. Showing simple or short information is not a big challenge in the user interface.

The profound challenge from the user experience viewpoint arises when there are hundreds, thousands, or even more records.

In today’s vue js jQuery Datatables tutorial, we will tackle a similar situation of managing a large amount of data through DataTables. We will teach you how to create Datatables in the Vue js application using the jQuery DataTables library.

Not just that we will show you the proper and easy way to use the jQuery DataTables in Vue js to display the data in rows and columns format and our notion tells us you will love this tutorial.

Node.js Gatsby error – “digital envelope routines::unsupported …”

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 above error for invoking the app, make sure to update the "scripts": [] array in 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

Create Vue Project

First, run the command to install the vue cli tool.

npm install -g @vue/cli

Secondly, type command and hit enter to start downloading a new vue js app; cli ask you to choose the version of the app, you may choose vue 2 or 3.

vue create vue-datatable-demo

Step into the project’s root.

cd vue-datatable-demo

Add Datatables + jQuery + Bootstrap Packages

Altogether type the following commands to install jQuery, datatables, and bootstrap packages in the vue js project.

npm install jquery datatables.net-dt bootstrap

Install Axios Library

We will show the JSON data in the vue table; we will need a REST API to get the data from API that utterly relies on the Axios package, so install the Axios package.

npm install axios

Create jQuery DataTable Component

All the libraries have been added to the vue js app; this section will show you how to accumulate all the packages to create a jQuery datatable for displaying data systematically in the vue app.

Create JqueryTable.vue file in components folder, there after place the whole given below 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>

Register DataTable Component

Components have to be registered in the primary App.vue file, make sure to add it into the recommended 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>

Run Vue Application

Head over to the terminal screen, start typing the following command and run the vue app in the browser.

npm run serve

http://localhost:8080

Conclusion

In this comprehensive Vue js jQuery DataTables example, we shared some blatant information that might help you integrate jQuery DataTables in the vue js app.

Not only but also help you display data dynamically into a data table using the Axios and JSON server and a REST API in the Vue js application using the notable jQuery DataTables package.

Reference: https://www.npmjs.com/package/datatables.net-dt