Bootstrap Modal Lookup dengan Datatables

Bootstrap Modal Lookup dengan Datatables

3547
30
SHARE

Apa itu? hehe.. judulnya mungkin memang membingungkan karena saya sendiri juga belum tahu apa istilah untuk input model seperti ini :D. Saya menamakannya lookup.

DEMO | DOWNLOAD

Sebenarnya saya pernah mengulas topik yang sama beberapa bulan yang lalu di sini. Namun pada waktu itu kita belum menggunakan modal bootstrap. Kali ini kita akan menggunakan modal bootstrap dan menggabungkannya dengan datatables.

Prinsipnya sederhana sebenarnya, yaitu kita memiliki form dengan tombol lookup. Bila kita tekan tombol tersebut akan muncul modal yang berisi tabel data. Bila kita klik salah satu baris pada tabel tersebut, data yang terpilih akan masuk ke form.

Lookup ini sangat ampuh untuk menggantikan select. Bila data anda mencapai ribuan atau lebih sebaiknya anda menggunakan lookup ini daripada menggunakan select.

Berikut ini adalah kodenya

Untuk penerapan menggunakan codeigniter tinggal menyesuaikan data untuk lookup. Selebihnya tidak ada yang berubah. Semoga bermanfaat, jangan lupa dishare dan di like ya. Terima kasih telah berkunjung ke harviacode.com.

30 COMMENTS

  1. Makasih om artikelnya, kayaknya saya banyak belajar dari artikel disini. saya coba di ci tapi masih belum sukses, uda googling tapi belum nemu yang pas. misal kita sudah buat function di model dan controler gimana ngeload data di form modal sedangkan form modal ada di dalam form index? sory om kalau bahasa saya kurang dimengerti

    • bisa aja mas Agus.. cm harus modif javascriptnya. tinggal gimana hasil yang dimau. nanti bisa pakai implode untuk hasil multi selectnya..

      • om, kalau mau nambah value waktu di klik dan masuk ke input text gimana ya.. udah saya utak atik dan tambah

        // jika dipilih, kode obat akan masuk ke input dan modal di tutup
        $(document).on(‘click’, ‘.pilih’, function (e) {
        document.getElementById(“kode_obat”).value = $(this).attr(‘data-kodeobat’);
        document.getElementById(“nama_obat”).value = $(this).attr(‘data-namaobat’);
        document.getElementById(“harga_beli_obat”).value = $(this).attr(‘data-hargabeliobat’);
        document.getElementById(“harga_jual_obat”).value = $(this).attr(‘data-hargajualobat’);
        document.getElementById(“stok_obat”).value = $(this).attr(‘data-stokobat’);
        document.getElementById(“ket_obat”).value = $(this).attr(‘data-ketobat’);
        $(‘#myModal’).modal(‘hide’);
        });

        masih belum muncul, justru waktu di klik, sisanya malah keluar ‘undefined’

  2. min, pas waktu ngeload modal, kan ada form search sama nampilin data perpage nya.
    sourcecode di php yg didownload gk ada, tapi waktu dijalankan trus di inspect element, ada form search sama data perpage nya. itu pake apa ya? trus supaya ngeload searchnya bagaimana?

    • o.. itu karena di file download itu menggunakan mysql bukan mysqli, makanya error dan tidak mw muncul datanya. sekarang kodenya telah saya ubah ke mysqli. silahkan download ulang ya. jika masih bermasalah silahkan tanyakan lagi.. 🙂

  3. gan ko eror yaa ..
    Warning: mysqli_connect(): (HY000/1049): Unknown database ‘harviacode’ in C:\xampp\htdocs\modal\index.php on line 63

    Warning: mysqli_query() expects parameter 1 to be mysqli, boolean given in C:\xampp\htdocs\modal\index.php on line 64

    Warning: mysqli_fetch_array() expects parameter 1 to be mysqli_result, null given in C:\xampp\htdocs\modal\index.php on line 65

    • itu databasenya belum ada mas. silahkan sesuaikan dengan database yang anda gunakan. nanti sesuaikan juga sql nya. SELECT * FROM bla bla bla.. semoga membantu mas Didit

  4. om, kalau mau nambah value waktu di klik dan masuk ke input text gimana ya.. udah saya utak atik dan tambah

    // jika dipilih, kode obat akan masuk ke input dan modal di tutup
    $(document).on(‘click’, ‘.pilih’, function (e) {
    document.getElementById(“kode_obat”).value = $(this).attr(‘data-kodeobat’);
    document.getElementById(“nama_obat”).value = $(this).attr(‘data-namaobat’);
    document.getElementById(“harga_beli_obat”).value = $(this).attr(‘data-hargabeliobat’);
    document.getElementById(“harga_jual_obat”).value = $(this).attr(‘data-hargajualobat’);
    document.getElementById(“stok_obat”).value = $(this).attr(‘data-stokobat’);
    document.getElementById(“ket_obat”).value = $(this).attr(‘data-ketobat’);
    $(‘#myModal’).modal(‘hide’);
    });

    masih belum muncul, justru waktu di klik, sisanya malah keluar ‘undefined’

    • udah benar seperti itu mas, cm ada yang kurang. harusnya di baris 68 juga di tambahkan masing2 data-* atrribute tersebut, sehingga baris 68 krg lebih menjadi seperti ini
      Reply

  5. Terimakasih ilmu nya pak sangat bermanfaat,

    saya sudah berhasil dengan 2 value seperti di atas yaitu kode dan nama obat, bagaimana caranya jika ada 2 tabel misalkan tabel siswa (kode_siswa, nama ) dan tabel pinjam buku (kode_siswa, kode_buku, nama_buku) sedangkan siswa bisa meminjam banyak buku?

    mohon share ilmunya pak,

  6. malam pak, terimakasih sharing ilmunya, semoga anda banyak rezeki

    saya sudah mencoba cara di atas dan berhasil, bagaimana caranya jika terdapat 2 tabel, contoh tabel siswa (kodeSiswa, namaSiswa) dan tabel buku (kodeBuku, kodeSiswa, namaBuku), saya ingin menampilkan data siswa dalam textbox (seperti contoh di atas) dan data buku yang di pinjam siswa di bawah nya dalam bentuk tabel, karena siswa bisa meminjam banyak buku.

    terimakasih sebelumnya

    • terima kasih mas Mahdi.

      caranya sama seperti di atas mas, tinggal di tambahkan data siswa di atasnya. lalu buat di bawahnya untuk menampilkan data buku yang dipinjam. nah input buku yang di pinjam menggunakan cara di atas. 😀 bingung jelasinnya saya, tp kurang lebih seperti itu mas. hehe

LEAVE A REPLY