Mode Malam
| Mode Tampilan
Penulis : admin

Home » Programming » Membuat Pagenation Pada DataGridView Menggunakan BindingNavigator Di VB.NET
Membuat Pagenation Pada DataGridView Menggunakan BindingNavigator Di VB.NET

Membuat Pagenation Pada DataGridView Menggunakan BindingNavigator Di VB.NET


Menampikan data yang terlalu besar akan menjadi masalah jika kita mencoba menampilkan keseluruhan datanya sekaligus. Ini disebabkan karena akan memakan memori yang besar dan proses looping yang terlalu banyak, sehingga waktu yang dibutuhkan untuk menampilkan data tersebut cukup lama. Bayangkan jika kita memiliki lebih dari 1 juta baris data dalam database yang kemudian kita ingin tampilkan ke dalam datagridview, tentu kita akan merasakan prosesnya lumayan lama. Solusinya adalah dengan membagi data tersebut menjadi beberapa bagian atau halaman yang pada setiap halaman kita batasi dengan jumlah baris data yang sedikit, istilah kerennya pagenation atau paging.

advertisement

Pada artikel kali ini, kita akan belajar membuat pagenation pada DataGridView menggunakan BindingNavigator seperti gambar berikut.

Membuat Pagenation Pada DataGridView Menggunakan BindingNavigator Di VB.NET

Kita langsung ke tutorialnya saja.

  1. Silahkan kalian download desain form yang sudah saya buat, lewat link berikut Desain Form PageNation. Kemudian kalian bisa extract file zip yang sudah didownload tadi, dan kalian akan mendapatkan tiga file berikut.
    Membuat Pagenation Pada DataGridView Menggunakan BindingNavigator Di VB.NET
    Selanjutnya kita import file tadi ke project kita dengan cara. Di bagian Solution Explorer pilih vbproject kalian kemudian klik kanan dan pilih Add - Existing Item. Atau kalian juga bisa menggunakan shortcut keyboard dengan cara menekan Shift + Alt + A.
    Membuat Pagenation Pada DataGridView Menggunakan BindingNavigator Di VB.NET
    Kemudian kalian cari file yang sudah di extract tadi dan pilih hanya FormUsersData.vb dan klik Add. Secara otomatis 2 file lainnya juga akan ikut terimport.
    Membuat Pagenation Pada DataGridView Menggunakan BindingNavigator Di VB.NET
  2. Jika desain tadi sudah berhasil di import, selanjutnya kita masuk ke tahap pengcodingan.

  • Buat Module SqlHelper yang sudah pernah kita buat di artikel Membuat Module Sql Helper VB.NET.
  • Pada FormUserData silahkan tekan F7 untuk beraril ke View Code. Buat sebuah variable BindingSource seperti berikut.
    Imports System.IO
    Public Class FormUsersData
        Dim bs As New BindingSource
    End Class

    BindingSource digunakan untuk membinding data ke dalam BindingNavigator, yang nantinya kita akan menggunakan event hanlder PositionChanged untuk menentukan posisi halaman dari database yang telah di bagi.

  • Buat sebuah methode dengan nama showDataGridView untuk menampilkan data kedalam DataGridView. Syntaxnya sebagai berikut
    Public Sub showDataGridView()
            Dim query As String = "select * from users where nama like '%" & TextBoxSearch.Text & "%' order by id desc OFFSET " & bs.Position & " ROWS FETCH NEXT " & ComboBoxEntries.Text & " ROWS ONLY;"
            dgv.DataSource = getDataSet(query).Tables(0)
            dgv.AllowUserToAddRows = False
            LabelJumlahBaris.Text = "Jumlah Baris : " & dgv.RowCount
    End Sub

    Dibagian query silahkan kalian ganti dengan nama table dan nama kolom kalian sendiri, di Sql Sever kita menggunakan fungsi FETCH NEXT {jumlahrow} ROW ONLY, untuk menlimit berbeda halnya dengan query MySql.

  • Buat sebuah methode dengan nama ShowNavPageData() yang akan kita gunakan untuk menentukan jumlah dan posisi halaman pada data yang akan di tampilkan. Syntaxnya sebagai berikut.
    Sub ShowNavPageData()
            dgv.DataSource = Nothing
            Dim query As String = "select top (select convert(int, ceiliNG(count(*)/ (convert(float," & ComboBoxEntries.Text & ")))) from Users  where nama like '%" & TextBoxSearch.Text & "%' ) '-' from Users"
            bs.DataSource = getDataSet(query).Tables(0)
            BindingNavigatorPaging.BindingSource = bs
            If bs.Position >= 0 Then
                showDataGridView()
            End If
     End Sub

    Sebenarnya kita tidak mengambil data apapun menggunakan query di atas, kita hanya butuh baris data dengan jumlah baris yang sudah di bagi perentri data, untuk mengisi data pada BindingNavigator kita. So itu hanya sebuah trik query saja.

  • Terakhir kita bikin method even listenernya
    handle BindingSource_PositionChanged, ComboBox_KeyPress, ComboBox_SelectedIndexChanged, TextBox_TextChanged dan Form_Load. Syntaxnya sebagai berikut.
    Private Sub BindingSource_PositionChanged(sender As Object, e As EventArgs)
            'Untuk menentukan posisi part/page data yang akan di tampilkan
            If bs.Count > 0 Then
                showDataGridView()
            End If
        End Sub
    
        Private Sub ComboBox_KeyPress(sender As Object, e As KeyPressEventArgs) Handles ComboBoxEntries.KeyPress
            ' Agar combobox menjadi readonly
            e.Handled = True
        End Sub
    
        Private Sub ComboBox_SelectedIndexChanged(sender As Object, e As EventArgs) Handles ComboBoxEntries.SelectedValueChanged
            'Untuk mengganti jumlah baris data yang ingin di tampilkan
            If Me.Visible Then
                ShowNavPageData()
            End If
        End Sub
    
        Private Sub TextBoxSearch_TextChanged(sender As Object, e As EventArgs) Handles TextBoxSearch.TextChanged
            'Untuk texboxt pencarian data berdasarkan kolom tertentu
            ShowNavPageData()
        End Sub
        Private Sub FormMaxxisEmployee_Load(sender As Object, e As EventArgs) Handles MyBase.Load
            'Mengkonfigurasi koneksi database
            setConnection("DATA SOURCE=USER\SQLEXPRESS;INITIAL CATALOG=MYAPP; USER ID=sa; PASSWORD=123")
            'Cara men add methode event handler yang sudah kita buat diatas ke BindingSource kita
            AddHandler bs.PositionChanged, AddressOf BindingSource_PositionChanged
            ShowNavPageData()
        End Sub

Sekarang tinggal kita percantik tampilan datagridviewnya dengan mengatur beberapa propertiesnya, caranya bisa kalian baca di artikel cara mendesain datagridview seperti tabel bootstrap.

advertisement

Sekian dulu tutorial cara membuat pagenation pada datagridview menggunakan bindingnavigator. Jangan lupa di share jika kalian merasa artikel ini bermanfaat, dan jangan lupa tinggalkan jejak dengan berkomentar dibawah ini. File projectnya bisa kalian download di sini.

 

Tags: #vbnet #pagination #datagridview
Bagikan :

Komentar:

Silahkan berkomentar dengan baik dan bijak!

Name * :
Email :
Website :
Comment :


This website uses cookies to ensure you get the best experience on our website

learn more