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.
Datatable adalah plugin atau library andalan saya untuk membuat tabel dengan fitur yang lengkap tapi mudah digunakan. Datatable memiliki beberapa fitur unggulan seperti filtering, ordering, pagination, row entries, dan fitur-fitur hebat lainnya. Datatable juga dapat digunakan pada versi bootstrap 5 yang sudah tidak mendukung jquery lagi.
Vue js juga tidak menggunakan jquery untuk memanipulasi DOM. Tapi meski tidak menggunakan jquery, kita tetap bisa menggunakannya di vue js untuk syarat agar library datatable bisa berjalan. Nah pada kesempatan kali ini kita akan coba mengimplementasikan datatable bootstrap 4 dengan mengambil data dummy api. Silahkan scroll ke bagian paling bawah artikel ini untuk melihat hasil akhirnya.
Cara Menggunakan Datatable pada Vue Js1. Install vue js terlebih dahulu atau gunakan project vue js yang sudah ada. Untuk cara instalasi vue js bisa kalian ikuti selengkapnya di link berikut ini. //www.sahretech.com/2020/11/cara-install-vue-js-dengan-vue-cli.html
2. Selanjutnya install depedecy atau library yang dibutuhkan dengan menjalankan perintah di bawah ini
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("//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>
Jika kalian perhatikan contoh script di atas, cara penggunaan datatable persis seperti cara menggunakan datatable tanpa vue js. Sangat mudah dan familiar. Selain itu kalian bisa import beberapa library di atas seperti bootstrap dan datatable di dalam file main.js agar dapat digunakan secara global.
4. Ok, sampai sini kita sudah bisa melakukan uji coba. Silahkan jalankan latihan kita kali ini, jika berhasil maka tampilannya akan terlihat seperti gambar di bawah ini.
Ok, sekarang kalian sudah berhasil menggunakan datatable pada vue js. Sangat mudah dan menyenangkan bukan?. Sekarang kalian bisa melakukan improvisasi dengan menambahkan beberapa konfigurasi dan case lainnya. Tabel ini juga tetap dapat dijalankan setelah di deploy ke server, jadi jangan khawatir codingan kalian akan rusak dan berantakan.
Sekian tutorial kali ini tentang cara menggunakan datatable pada vue js. Semoga bermanfaat. Jika ada yang ingin ditanyakan silahkan tanya langsung pada kolom komentar di bawah ini atau tanya langsung di fanspage sahretech. Sekian dan terima kasih.