Cara menggunakan npm datatables bootstrap 5

This package contains a built distribution of the SearchPanes extension for DataTables with styling for Bootstrap5.

The SearchPanes extension for DataTables provides improved Searching functionality allowing users to select options from a "Pane" which will then in turn search the DataTable and return the relevant results. There are multiple configuration options available to enhance SearchPanes.

Installation

Browser

For inclusion of this library using a standard <script> tag, rather than using this package, it is recommended that you use the DataTables download builder which can create CDN or locally hosted packages for you, will all dependencies satisfied.

npm

npm install datatables.net-searchpanes-bs5

ES3 Syntax

var $ = require( 'jquery' );
var dt = require( 'datatables.net-searchpanes-bs5' )( window, $ );

ES6 Syntax

import 'datatables.net-searchpanes-bs5'

bower

bower install --save datatables.net-searchpanes-bs5

Documentation

Full documentation and examples for SearchPanes can be found on the website.

Bug / Support

Support for DataTables is available through the DataTables forums and commercial support options are available.

Contributing

If you are thinking of contributing code to DataTables, first of all, thank you! All fixes, patches and enhancements to DataTables are very warmly welcomed. This repository is a distribution repo, so patches and issues sent to this repo will not be accepted. Instead, please direct pull requests to the DataTables/SearchPanes. For issues / bugs, please direct your questions to the DataTables forums.

License

This software is released under the MIT license. You are free to use, modify and distribute this software, but all copyright information must remain.

Saya sendiri telah banyak mengerjakan project menggunakan datatables, karena simple, mudah, dan adanya fitur filter, show per-page, dan pagination.

Saya yakin anda sudah tidak asing lagi dengan datatables, itulah kenapa Anda membaca artikel ini.

Beberapa bulan yang lalu, saya mengerjakan project Point Of Sale (POS) menggunakan datatables dan codeigniter.

Semua berjalan baik pada awalnya, disaat data produk telah mencapai 12,000 record, masalah pun muncul. Data yang diload sangat lambat dan sering tidak merespon (not responding) pada browser.

Hal itu sangat menjengkelkan, saya yakin Anda juga pernah memiliki masalah yang sama.

Cukup bingung dengan masalah tersebut, saya hampir memutuskan untuk tidak menggunakan datatables dan beralih untuk membuat pagination bawaan codeigniter dan membuat filter (pencarian) sendiri.

Usut punya usut, saya menyadari sesuatu. Ternyata pagination bawaan codeigniter datanya di proses di sisi server (server-side processing).

Kemudian saya mulai menelusuri server-side processing dengan datatables. Akhirnya nemu juga. Memang terbukti load data 12,000 record jauh lebih cepat.

Beberapa bulan yang lalu saya telah menulis artikel tentang datatable server-side processing menggunakan codeigniter.

Akan tetapi, untuk membuat server-side processing menggunakan datatables masih harus menulis lebih banyak baris coding.

Merasa tidak puas dengan hal ini, akhirnya saya mencoba menelusuri lebih dalam lagi. Dan klimaks-nya saya menemukan sebuah library yang sangat bagus untuk datatables server-side processing yaitu ignited-datatables.

Ignited-datatables merupakan sebuah library yang di fungsikan untuk mempermudah pembuatan server-side processing pada datatables.

    npm install --save jquery
    npm install --save datatables.net-bs4
    npm install bootstrap --save
    npm install axios

3. Setelah instalasi selesai dilakukan, selanjutnya buka file dimana kalian ingin menggunakan datatable. Lalu ikuti scriptnya seperti di bawah ini.

<template>
  <div class="container">
    <h1 style="text-align: center">DataTable</h1>
    <p style="text-align: center">Latihan Menggunakan DataTable di Vue Js</p>
    <table
      id="myTable"
      class="table table-striped table-bordered"
      style="width: 100%"
    >
      <thead>
        <tr>
          <th>ID</th>
          <th>Nama</th>
          <th>Username</th>
          <th>Email</th>
          <th>Phone</th>
          <th>Website</th>
        </tr>
      </thead>
    </table>
  </div>
</template>

<script>
import $ from "jquery";
import axios from "axios";
import "bootstrap/dist/css/bootstrap.css"; //kalian bisa import ini di main.js agar dapat digunakan secara global
import "datatables.net-bs4"; //kalian bisa import ini di main.js agar dapat digunakan secara global

export default {
  
  mounted() {
    axios.get("https://jsonplaceholder.typicode.com/users").then((response) => {

      $("#myTable").DataTable({
        data: response.data,
        columns: [
            { data: "id" },
            { data: "name" },
            { data: "username" },
            { data: "email" },
            { data: "phone" },
            { data: "website" },
        ],
        });
    });
  },
};
</script>

<style>
</style>